Typescript

Key differences from JS

• explicit declarations of data types
• null or undefined
• typeof to check data types

const test: number = 0;
    if(test typeof number){
        console.log("number")
    }

• keyof - gets all the keys from an object

Unique Data types:

• unknown
• `never

Access modifiers

• readonly

Other concepts

Inheritance or extension

type Person{
    name: string
}

type Employee = Person & {
    employeeNumber: number
}

optional

type Person{
    name?: string | null
}

not-null

type Point = {
  name: string;
};

const p = Point({ name: "masd" });
console.log(p!.name);

interfaces

types assertion

type Square = {
  size: number;
};
type Shape = Square | Rectangle;

function isSquare(shape: Shape): shape is Square {
  return "size" in shape;
}

function area(shape: Shape) {
  if (isSquare(shape)) {
  }
}

Function Overloading

function hello (test: string)
function hello (test: number)
function hello(test: string | number){
    if(test typeof string){
    }else if(test typeof number){
    }
}

Using types

type Add = {
    (a:number, b: number): number,
    (a:number, b:number, c: number): number,
}

const add: Add = (a: number, b: number, c?:number) {
    return a+ b + (c != null ? c :0)
}

Abstract classes

Dictionary

type Person = {
  email: string;
};

type Dictionary = {
  [email: string]: Person | undefined;
};

const people: Dictionary = {
  mel: { email: "blah" },
};

• Access modifiers
• Static properties
• Abstract classes
• Constructor
• Generics

Types versus Interface

Types:

• Unions
• Intersections
• Shorthand Functions
• Advanced Type Functions Interfaces
• Declaration Merging
• extends

Setup

• see React Testing Library#Pitfalls

Migrating from JS to TS

Steps

• Add libraries on Package.json

"@types/jest": "^27.4.1",
"@types/node": "^17.0.27",
"@types/react": "^17.0.47",
"@types/react-dom": "^17.0.17",

• remove any specialized config files like: jsconfig.json
• Add tsconfig.json

  "compilerOptions": {
    "baseUrl": "./src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

• create a TS file with reference to react-scripts

react-app-env.d.ts

/// <reference types="react-scripts" />

Jest

react-testing library typescript jest