DEV Community

Asim Shrestha
Asim Shrestha

Posted on

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!

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay