TypeScript Section 1 – Getting Started


Updated Aug 26th, 2022

TS is a superset of JS, meaning it’s a language that builds up on JS, taking it to the next level.

Browsers and Node cannot execute TS.

TS is a programming language but also a tool, a powerful complier you run over your code.

TS compiler, compiles down to JS, but takes new features into more complex JS workarounds.

TS adds types that gives the developer an opportunity to catch bugs. Extra error checking. catch bugs early in dev versus at runtime.

Example of concatenation instead of adding two numbers. Logical mistake in your code.

Mitigation strategies with basic JS but developers can still write invalid code.

Installing and Using TypeScript

Example of concatenation instead of adding two numbers. Logical mistake in your code. Using “.value” always returns a string.

Could use “typeof” with “if check” to convert string to number using plus sign syntax.

Download TS from typescriptlang.org

Need to install NodeJS if not already installed.

Run the “npm install -g typescript” command to get TS installed globally on your machine. Create a new “using-ts.ts” file and if you copy in example code you will immediately see some errors.

Use an exclamation point to tell TS you are sure you will always find an element and never return null. Can also use typecasting to say an element “as HTMLInputElement.”

The additional “types” are the real advantage of TS. Tell TS what “type” a certain parameter, property, etc. is.

TypeScript Advantages – Overview

Makes writing clean code much easier. TS adds: types, Next-gen JS features (compiled down for older browsers), Non-JS features like Interfaces and Generics. Also get Meta-programming features likes Decorators. Rich configuration options for the compiler, Modern tooling that helps even in Non-TS projects, (VSCode auto-completion).

Setting Up a Code Editor

VSCODE “Dark+” theme and recommended extensions, (ESLint, Material Icon Theme, Path Intelli-sense, and Prettier)

Course Project Setup

Dummy setup to see your code in action. Create an “index.html” file with a basic html skeleton and add a script tag with a “defer” attribute. Add an “app.ts” file where you can write some TS code, (you can compile by running “tsc app.ts” in the terminal).

Run the command “npm install –save-dev lite-server” and create a new “start” script in the “package.json” that triggers “lite-server,” (this will auto-reload the browser’s output when ever a file changes).