How to Set Up a New TypeScript Project

TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. .ts is the extension of TypeScript file.

1. Setup

Before inst…


This content originally appeared on DEV Community and was authored by Asim Shrestha

TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. .ts is the extension of TypeScript file.

1. Setup

  • Before installing TypeScript on your system, first you need to install Node.js. You can check the official documentation for installating it.
  • Type the following command to check to ensure Node.js is install. The command gives out the Node.js version. 
> node --version
  • Example:

Node.js version check

  • Create a new directory and go inside it. 
> mkdir code && cd code
  • Initialize package.json file. Its a file which contains all the packages or dependencies install for the application. 
> npm init -y
  • Install TypeScript 
> npm install typescript --save-dev
  • --save-dev flag indicate we are installing TypeScript for development purpose and we don't need this package for production.
  • Initialize TypeScript config file. 
> npx tsc --init

2. Set Up Project

  • Create new files and folders inside the code folder. 
> touch index.html
> mkdir src dest
> touch src/main.ts
  • Folders and files tree

TypeScript Project Structure

  • NOTE: Browser can only understand JavaScript, so you need to compile the TypeScript into Javascript.
  • Specify where to output the compile JavaScript. Customize the tsconfig.json file to output inside the .dest folder. 
// tsconfig.json
...
"outDir": "./dest", /* Specify an output folder for all emitted files. */
...
  • The ... three dots indicates their is more code.
  • Create a script that will watch your TypeScript file changes and automatically compile it into JavaScript. We will create a new script start inside the package.json file. 
// package.json
{
  "name": "code",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "tsc --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "typescript": "^5.5.3"
  }
}
  • We will add some code inside our TypeScript file src/main.ts 
const username: string = "Jane Doe";
console.log(`Hello, ${username}!`)
  • Now, we will run the start script to watch the TypeScript file changes. 
> npm run start
  • The start script command will automatically create a new file called main.js inside the dest folder which is our compiled JavaScript file.
  • Inside our index.html we will link our compiled JavaScript file and open it on the browser. Then, check the console to verify the message is logged. 
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TypeScript Project Set Up</title>
</head>
<body>
<h1>Press <code>F12</code> and check your browser console. There you will see the message which we have written.</h1> 

<script src="./dest/main.js"></script>
</body>
</html>
  • Now, you can add your code and create your project!


This content originally appeared on DEV Community and was authored by Asim Shrestha


Print Share Comment Cite Upload Translate Updates
APA

Asim Shrestha | Sciencx (2024-07-05T14:36:49+00:00) How to Set Up a New TypeScript Project. Retrieved from https://www.scien.cx/2024/07/05/how-to-set-up-a-new-typescript-project/

MLA
" » How to Set Up a New TypeScript Project." Asim Shrestha | Sciencx - Friday July 5, 2024, https://www.scien.cx/2024/07/05/how-to-set-up-a-new-typescript-project/
HARVARD
Asim Shrestha | Sciencx Friday July 5, 2024 » How to Set Up a New TypeScript Project., viewed ,<https://www.scien.cx/2024/07/05/how-to-set-up-a-new-typescript-project/>
VANCOUVER
Asim Shrestha | Sciencx - » How to Set Up a New TypeScript Project. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/05/how-to-set-up-a-new-typescript-project/
CHICAGO
" » How to Set Up a New TypeScript Project." Asim Shrestha | Sciencx - Accessed . https://www.scien.cx/2024/07/05/how-to-set-up-a-new-typescript-project/
IEEE
" » How to Set Up a New TypeScript Project." Asim Shrestha | Sciencx [Online]. Available: https://www.scien.cx/2024/07/05/how-to-set-up-a-new-typescript-project/. [Accessed: ]
rf:citation
» How to Set Up a New TypeScript Project | Asim Shrestha | Sciencx | https://www.scien.cx/2024/07/05/how-to-set-up-a-new-typescript-project/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts