dev-resources.site

for different kinds of informations.

How to Set Up a New TypeScript Project

Published at

7/5/2024

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:

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

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>