TypeScript Basics

Typescript is...

a superset of JS (extends JS)
the core/base JS syntax does not change, but adds more features to JS

Typescript adds this to JS

static typing

Code: Adding Type in TS

variable: type
(example: function add(a: number, b:number))

Why is adding types helpful?

catching errors before you test you code

Installing TS (locally & globally)

npm install typescript (-g installs globally)

Why do we need to compile TS to JS?

Typescript code does not run in the browserW

What happens when you invoke the TS invoker

-TS will be compiled to JS
- Errors will be notified during this process (potential code problems)

How to evoke the TS compiler (2)

-npx tsc
-npx tsc filename.ts

Event if you get an error in your code, this will still generate (TS invoker)

a JS file based on your TS file

Primitives in TS

number, string, boolean, null, undefined, symbols

these two primitives should be written in lowercase

string, number

why should string and number be written in lowercase when giving a variable a type

if you use caps you will be using the object Number and String instead of the primative

Code: Declare an array in TS

let hobbies: string[]

Code: declaring an object in TS

let person:{name: string; age:number;}

Type inference

by default TS tries to guess as many types as possible if if you dont explicitly write what type it is

Union Type

Type definition that allows more than one type. Connected together using pipes |

Features of Union Types

- You can have as many types as you want.
- can be used anywhere (arrays)
- allows more flexible values and types

Code: Union types

let course: string | number;

Type Aliases

Define your own base type and use that type alias instead of repeating the same type definitions.
The Type keyword is unique to TS (thrown out the window when compiled to JS)

Code: Type Aliases

type Person = {name:string' age: number};
let people: Person[];

Generics

Telling TS that the parameter type (and return type) is not any but the type of the parameter value. The T type is locked in.

Code: Generics Example

function functionName(p1: T[], p2: T)

Classes

Blueprints for objects you plan on installing. Supported by TS and modern JS

Class functions do not have this keyword in front of them

function

Something we can do in TS classes but not JS

define all properties & types in advance (not in the constructor)

Although it is common practice to use the constructor to define property values, you can also do this instead (TS Unique)

add accessor keywords in front of params in the constructor and instead leave the body of the function empty

Code: Using constructor to define property values

constructor(public p1: type, public p2: type, private p3:type){}

Interfaces

Object type definitions, only exists in TS and not vanilla JS (will not be compiled to JS)

When writing a method in an interface you

dont add actual code, just the type of method

Code: Interface method

methodName: (params) => type

Interfaces are an alternative to this keyword

typeB

Benefits of interfaces

- great for developing in large items
- forces us to add features to classes we define (good when developing with large teams)

Code: Configuring TS Compiler

npx tsc --init

what npx tsc --init does

-configures TS compiler
- adds ts to config.js file