DEV Community

Asim Shrestha
Asim Shrestha

Posted on

How to Set Up a New TypeScript Project

#typescript #setup #javascript #webdev

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
Enter fullscreen mode Exit fullscreen mode
  • Example:

Node.js version check

  • Create a new directory and go inside it. 
> mkdir code && cd code
Enter fullscreen mode Exit fullscreen mode
  • Initialize package.json file. Its a file which contains all the packages or dependencies install for the application. 
> npm init -y
Enter fullscreen mode Exit fullscreen mode
  • Install TypeScript 
> npm install typescript --save-dev
Enter fullscreen mode Exit fullscreen mode
  • --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
Enter fullscreen mode Exit fullscreen mode

2. Set Up Project

  • Create new files and folders inside the code folder. 
> touch index.html
> mkdir src dest
> touch src/main.ts
Enter fullscreen mode Exit fullscreen mode
  • 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. */
...
Enter fullscreen mode Exit fullscreen mode
  • 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"
  }
}
Enter fullscreen mode Exit fullscreen mode
  • We will add some code inside our TypeScript file src/main.ts 
const username: string = "Jane Doe";
console.log(`Hello, ${username}!`)
Enter fullscreen mode Exit fullscreen mode
  • Now, we will run the start script to watch the TypeScript file changes. 
> npm run start
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • Now, you can add your code and create your project!

Top comments (0)

Read next

danwalsh profile image

[SOLVED] Vue 3 + TypeScript + Inlay Hint support in NeoVim

Dan Walsh -

garciadiazjaime profile image

React: LinkedIn Access Token in 10 Steps

Jaime -

probir-sarkar profile image

Next.js Interview Mastery: Essential Questions 71-80 (Part 8)

Probir Sarkar -

gleamso profile image

The No-Fluff Guide to OpenGraph Images That Actually Work 🎯

gleamso -