TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript tutorial in Visual Studio Code

Static vs Dynamic typed language

Static Typing

Static typed programming languages are those in which variables need not be defined before they’re used. This implies that static typing has to do with the explicit declaration (or initialization) of variables before they’re employed.

Dynamic Typing

Dynamic typed programming languages are those languages in which variables must necessarily be defined before they are used. This implies that dynamic typed languages do not require the explicit declaration of the variables before they’re used.

Strong and Weak typed languages

The main difference, roughly speaking, between a strongly typed language and a weakly typed one is that a weakly typed one makes conversions between unrelated types implicitly, while a strongly typed one typically disallows implicit conversions between unrelated types.

Furthermore, a strongly typed language requires an explicit conversion (by using the cast operator) between related types, when there is a possibility of data loss, while a weakly typed one would carry out the conversion regardless.

TypeScript Commands

???? Install

npm install -g typescript

???? Compile

tsc helloworld.ts

???? tsconfig.json

tsc --init


???? Watch Mode

tsc helloworld.ts --watch

TypeScript Types

let isCool: boolean = false;

let age: number = 56;

let eyeColor: string = 'brown';
let favoriteQuote: string = `I'm not old, I'm only ${age}`;

let pets: string[] = ['cat', 'mouse', 'dragon'];
let pets2: Array<string> = ['pig', 'lion', 'dragon'];

let basket: [string, number];
basket = ['basketball', 10];

enum Size {Small = 1, Medium=2, Large=3}
let sizeName: string = Size[2];
alert(sizeName); // Displays 'Medium' as its value is 2 above
let sizeNumber: number = Size.Small // return 1

//Any ???? BE CAREFUL
let whatever: any = 'aaaaghhhhhh noooooo!';

let sing = (): void => console.log('Lalalala')

//null and undefined
let meh: undefined = undefined;
let noo: null = null;

let error = (): never => {
  throw Error('blah!');
//never: is for a function that doesn't return and doesn't have that endpoint (like console.log) usually throws an error.

// Type Assertions:
let ohhithere: any = "OH HI THERE";

let strLength: number = (ohhithere as string).length;

interface RobotArmy {
  count: number,
  type: string,
  magic?: string // ? that to say: the property is optional
// type RobotArmy = {
//   count: number,
//   type: string,
//   magic?: string
// }

let fightRobotArmy = (robots: RobotArmy) =>{
let fightRobotArmy2 = (robots: {count: number, type: string, magic: string}) =>{
//Interface vs Type alias in TypeScript:  https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c

let fightRobotArmyF = (robots: RobotArmy): void =>{
let fightRobotArmy2F = (robots: {count: number, type: string, magic?: string}): void =>{

// *** Classes
class Animal {
    private sing: string;
    constructor(sound: string) {
        this.sing = sound;
    greet() {
        return "Hello, " + this.sing;

let lion = new Animal("Lion");
// lion.sing

//In TypeScript, there are several places where type inference
//is used to provide type information when there is no explicit
//type annotation. For example, in this code
let x = 3;
// automatimally detexts x is a number.

//Union Type
let confused: string | number = 'hello'


The repository for high-quality TypeScript type definitions


Adding TypeScript to Create React App

Adding TypeScript

Leave a comment

Your email address will not be published. Required fields are marked *