How to Set Up a New TypeScript Project
Tags: typescript, setup, javascript, webdev
Published: 2024-07-05 14:36:49

### 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](https://nodejs.org/en/download/package-manager) for installating it.
- Type the following command to check to ensure Node.js is install. The command gives out the Node.js version.
```shell
> node --version
```
- Example:

![Node.js version check](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j67d08acz8oq5okkku9.png)
- Create a new directory and go inside it.
```shell
> mkdir code && cd code
```
- Initialize `package.json` file. Its a file which contains all the packages or dependencies install for the application.
```shell
> npm init -y
```
- Install TypeScript
```shell
> 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](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
```shell
> npx tsc --init
```
### 2. Set Up Project
- Create new files and folders inside the `code` folder.
```shell
> touch index.html
> mkdir src dest
> touch src/main.ts
```
- Folders and files tree

![TypeScript Project Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pc68qgmp8k3bh10wvdcb.png)
- **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.
```json
// 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.
```json
// 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`
```JavaScript
const username: string = "Jane Doe";
console.log(`Hello, ${username}!`)
```
- Now, we will run the `start` script to watch the TypeScript file changes.
```shell
> 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.
```HTML
<!-- 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!