General

• check for type errors with tsc --noEmit or npx tsc --noEmit

Start a vite project

method 1. Create Expo project

This seems to be the more pro way to do it Based on this YouTube tutorial

• npx create-expo-app@latest
  • 👉 This makes a project folder with TypeScript but not sure if TypeScript is already set up ????
• recommends installing ES7+ React/Redux/React-Native snippets VS code extension
• starter project: TypeScriptReactNative01Classic

Folder Details

• app: is for screens
• Constatnt: is for constants - styles and stuff I guess
• babel.config.js: if config for devices
• expo-env.d.ts: decleration file

/src

Delete all folders and create an /src for the source code

• by default the entry point will be /src/app/index.tsx or some index.tsx file
• this could be redirected by modifying the package.json's main property i.e "main": "index.js", for classic .jsx project

method 2. https://vite.dev/guide/

• npm create vite@latest --template
  • this creates a project folder of its own
• select react, typescript
• npm install
• npm run dev

method 3. Start from the React template (the Joachim / La Capsule way)

These are found in react.dev/learn

• NextJS: npx create-next-app@latest
  • I've never tried using -- template here
• Expo: npx create-expo-app --template
  • -- template is optional but default
  • select "blank (TypeScript)"
  • this creates a project folder of its own, must give a name no caps.
  • npm start to start the app -> since TS is already set up it should be using TypeScript.

Using null, void, undefined

• void is only from funcitons
• return nothing

function doSomething(): void {
    console.log("Doing something...");
}

Functions: declare output

• implicitly declared function: is a function we let TypeScript infer the output of
• explicitly declared function: is a function we declare the output of

function add(a: number, b: number): number {
    return a + b;
}

or with arrow function

const add = (a: number, b: number): number => a + b;

Type alias

create a type with a name - I (the programmer) give it

function setLoggerTimeout(
    loggerCallback: (s1: string, s2: string) => string,
    delay: number
) {
    // do something
}

Or do this:

type LoggerCallback = (s1: string, s2: string) => string;

function setLoggerTimeout(loggerCallback: LoggerCallback, delay: number) {
    // do something
}

Importing types

import type { User, Post } from "./models";

• this reduces the size of the bundle

Optional args

• use question mark

function newCharacter(name: string, role?: string): string {
    return `${name} is a ${role}`;
}

• or default value

function newCharacter(name: string, role: string = "warrior"): string {
    return `${name} is a ${role}`;
}

• or default value without type

function newCharacter(name: string, role = "warrior"): string {
    return `${name} is a ${role}`;
}

Literal types

• assiging a value to a variable instead of a type like string, number, boolean, etc.,

Template Literal Types

type Class = "wizard" | "warrior" | "rogue";
type Race = "elf" | "human" | "dwarf";
type Hero = `Hero: ${Race} ${Class}`;
// Hero: elf wizard | Hero: elf warrior | Hero: elf rogue | Hero: human wizard | Hero: human warrior | Hero: human rogue | Hero: dwarf wizard | Hero: dwarf warrior | Hero: dwarf rogue

Heterogeneous Arrays

// TypeScript infers the type as (string | number)[]
let lightsaberStyles = [1, 2, "double", "shoto"];

function describe(style: string | number): string {
    console.log(`Wield ${style} lightsaber`);
}

lightsaberStyles.forEach(describe);
// Wield 1 lightsaber
// Wield 2 lightsaber
// Wield double lightsaber
// Wield shoto lightsaber

Object Literal Types

Type an object

type Saiyan = {
    name: string;
    power: number;
};

function logSaiyan(saiyan: Saiyan) {
    console.log(`${saiyan.name} has power level: ${saiyan.power}!`);
    // ...
}

Sets

TypeScript has a built-in type for sets, which are collections of unique values.

s = new Set([1, 2, 3, 3]);
// Set {1, 2, 3}

In TypeScript

const set = new Set<number>();
set.add(1);
set.add(2);
set.add(3);
set.add(3);
// Set {1, 2, 3}

Map

Maps are like objects but the keys can be anything - even a boolean if you want.

const map = new Map<string, number>();
map.set("one", 1);

Dynamic Keys

type UserMetrics = {
    [key: string]: number;
};

const metrics: UserMetrics = {
    wordsPerMinute: 50,
    errors: 2,
    timeOnPage: 120,
};

metrics["refreshRate"] = 60; // OK
metrics["theme"] = "dark"; // Error: Type 'string' is not assignable to type 'number'

Dynamic Default Properties

This is really good for users objects or headers where some properties are unknown until we make the request.

type FormData = {
    [field: string]: string;
    email: string;
    password: string;
};