Skip to content

AnshSinghSonkhia/Masters-in-TypeScript

Repository files navigation

Learning TypeScript with React.js

TypeScript is a superset of JavaScript

  • TypeScript adds additional syntax to JavaScript to support a tighter integration to the editor.
  • Helps to catch errors early.
  • TypeScript code converts to JavaScript, which runs anywhere JavaScript can run. (Browser, Node.js / Dino, and in our apps.)

Hence, TypeScript is highly trustable.

  • TypeScript understands JavaScript and uses type inference to give us great tooling without additional code.

Documentations:

Create a React with TypeScript app.

npm create vite@latest
npm install
npm run dev
- type project name or `.` for current folder.
- choose `react`
- choose `typescript` 

Converting an existing app to TypeScript

npm install --save typescript @types/node @types/react @types/react-
dom @types/jest

Types in JavaScript

let name = "Ansh Singh Sonkhia";

let name: string

Types in TypeScript

let name: string = "Ansh Singh Sonkhia";
let name2: string;

//name2 = 5;        //This will give error.

name2 = "Heyy Boss ;>"
let age: number;

let isFruit: boolean;   // It can be TRUE or FALSE

let hobbies: string[];      // Array of string
let complex: number[];      // Array of number

let role: [number, string];     // Tuple - that can contain 1 number and 1 string.

role = [5, "lamba"];

type Person = {
    name: string;
    age: number;
    sex?: string;   // This property is optional.
}          
// It's a good practice to keep the first letter of type ---> Capital

let person: Person = {
  name: "Ansh",
  age: 5,
};

// Assigning types in TypeScript

let lotsOfPersons: Person[];

Other Types in TypeScript:

  • boolean
  • string
  • number
  • Object
  • array
  • tuple
  • undefined
  • null

Assigning types in TypeScript

type Person = {
    name: string;
    age: number;
    sex?: string;   // This property is optional.
}  

// Assigning types in TypeScript
let lotsOfPersons: Person[];

Use of Union to define a variable of more then 1 type:

let contact: string | number;

contact = 3             // working
contact = "yfguyb"      // working

Function Types - 2 ways in TypeScript

// Method 1
function printName(name: string){
	console.log(name);
};

// Method 2
let printName2: Function;

// better way --->

let printName3: (name: string) => void;

// It will take a string type input & will return void (nothing).

any type variable:

It is not recommended to use in projects.

let degree: any;

unknown type variable:

When you don't know the type it is going to be, it is recommended to use:

/*	unknown type	*/

let degree1: unknown;

void return undefined

never do NOT return.

// never type

let kaka: (name: string) => never;

Alias in TypeScript:

  1. type
type Person = {
    name: string;
    age?: number;
}
  1. interface
interface Personx {
    name: string;
    age?: number;
}

Inheritance with interface in TypeScript

interface Personx {
  name: string;
  age?: number;
}

interface Guy extends Personx {
  profession: string;
}

Inheritance with types in TypeScript

type X = {
  a: string;
  b?: number;
};

type Y = X & {
  c: string;
  d: number;
};

// Usage

let useXY: Y = {
  a: "uydfgj",
  c:"efdas",
  d: 42
}

type & interface using each other for inheritance

interface Magic {
    name: string;
    value?: number;
}

type Magician = Magic & {
    power: string;
    price: number;
}

type joker = {
    from: string;
    age: number;
}

interface Jadu extends joker {
    name: string;
    value?: number;
}

About

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published