TheLazy.Dev
Portfolio GitHub

Blog

typescript |setup |javascript |webdev

How to Set Up a New TypeScript Project

asimnp

Asim Shrestha

Posted on July 5, 2024

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 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!
💖 💪 🙅 🚩
asimnp
Asim Shrestha

Posted on July 5, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to Set Up a New TypeScript Project
typescript How to Set Up a New TypeScript Project

July 5, 2024