Darwin Nacionales

TypeScript: Installation & Basic Usage

Darwin Nacionales -

Installation

Prerequisites

TypeScript is usually installed using npm. Therefore, install NodeJS using this link.

Installing TypeScript

Follow the steps on this link or simply run:

npm install -g typescript

To verify installation, run the following command:

tsc -v

This should print the current TypeScript version. For my case, it displays the following:

% tsc -v
Version 4.9.5

Compiling TypeScript

Assuming that you have a TypeScript file named app.ts and you want to compile this, execute the following command on the command line:

tsc app.ts

With the default configuration, this should generate the compiled code in JavaScript named app.js.

Optional Section:

Installing lite-server

lite-server refreshes the page whenever an HTML or JavaScript file has changes.

1. Initialize npm (if the project is not yet initialized) by executing the command below:

npm init -y

2. Install lite-server as a development dependency using the following command:

npm install --save-dev lite-server

3. To run lite-server, run the command lite-server or configure package.json like below:

{
  "name": "typescript-test",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.6.1"
  }
}

By updating the package.json, we only now need to run npm start whenever we want lite-server to keep track of any changes on our files.

Once the server is up, visit localhost:3000 in order to see our web page.

Suggested VS Code Extensions

  • ESLint (Note: TSLint is already deprecated. ESLint supports both TypeScript and JavaScript)
  • Path Intellisense
  • Prettier - Code formatter

View Parent Post: TypeScript: Everything You Need to Know