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 thepackage.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 calledmain.js
inside thedest
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>
- Now, you can add your code and create your project!
Top comments (0)