Simple types
const a: string = 'a string'
const b: number = 5
const c: boolean = true
const d: string[] = ['a', 'b', 'c']
const e: number[] = [1, 2, 3]
Simple types
const a = 'a string'
const b = 5
const c = true
const d = ['a', 'b', 'c']
const e = [1, 2, 3]
Types
type StrinOrNumber = string | number
type StringOrNumberOrBoolean = StringOrNumber | boolean
Modifiers
const a?: string // string | undefined
const obj = {
a: string,
b?: number,
}
funntion log(msg?: string) {}
class {
b!: string
}
obj!.one!.two!.three
Interfaces
interface Pizza {
slices: number
round: boolean
name: string
}
const pizza: Pizza = {
slices: 4,
round: true,
name: 'Hawaii'
}
Interfaces
interface Pizza {
slices: 4 | 8
round: boolean
name: 'Margherita' | 'Parmigiana'
}
const pizza: Pizza = {
slices: -1, // ❌
round: true,
name: 'Margherita'
}
Interfaces
interface A {
one: string
}
interface B extends A {
two: number
three?: string
}
Interfaces
interface Project {
name: string,
paymentBasis: 'fix' | 'hour'
}
interface GoodProject extends Project {
paymentBasis: 'hour'
}
Functions
function add(x: number, y: number): number {
return x + y
}
const add = (x: number, y: number): number => {
return x + y
}
function choose<T, P>(a: T, b: P): T | P {
if (something)
return a
else
return b
}
const waitForMe = async (text:string): Promise<string> => text
Overloading
function add(x: number): number
function add(x: number, y: number = 1): number {
return x + y
}
function add(a: string, b: string): string
function add(a: number, b: number): number
function add(a: string | number, b: string | number): string | number {
if (a.constructor.name === 'String') return a + b
else return a + b
}
Classes
class User {
private id: string
public readonly username: string
friends: User[] = []
constructor() {
this.id = 'abc'
this.username = 'John Doe'
}
private doSomeStuff() {}
}
Generics
function choose<T, P>(a: T, b: P): T | P {
if (something)
return a
else
return b
}
type Something<T> = {
a: string,
b: T
}
Typescript Utilities Types
- Partial & Required
- Readonly
- Pick & Omit
Partial / Required
interface Props {
a: number;
b: string;
};
const x: Props = { a: 5 }; // Error: property 'b' missing
const y: Partial<Props> = { a: 5 }; // OK
interface Props {
a?: number;
b?: string;
};
const x: Props = { a: 5 }; // OK
const y: Required<Props> = { a: 5 }; // Error: property 'b' missing
Readonly
interface Todo {
title: string;
}
const todo: Readonly<Todo> = {
title: 'Delete inactive users',
};
todo.title = 'Hello'; // Error: cannot reassign a readonly property
Pick / Omit
interface Todo {
title: string;
description: string;
completed: boolean;
}
const todo: Pick<Todo, 'title' | 'completed'> = {
title: 'Clean room',
completed: false,
};
interface Todo {
title: string;
description: string;
completed: boolean;
}
const todo: Omit<Todo, 'description'> = {
title: 'Clean room',
completed: false,
};
Also there are...
- Exclude & Extract
- Record
- NonNullable
- ReturnType
- InstanceType
- ThisType
Constructor
class Auto {
wheels: number
constructor(wheel: number) {
this.wheels = wheel
}
}
class Auto {
constructor(private wheel: number) { }
}
class Auto {
wheels!: number
constructor(init: typeof Auto) {
Object.assign(this, init)
}
}
Advanced Stuff
class Auto {
wheels?: number
doors?: number
// ...
constructor(init: Partial<Auto>) {
Object.assign(this, init)
}
}
const a = new Auto({
doors: 5,
})
Advanced Stuff
type RequireSome<T, K extends keyof T> = {
[X in Exclude<keyof T, K>]?: T[X]
} & {
[P in K]-?: T[P]
}
class Auto {
wheels!: number
doors?: number
// ...
constructor(init: RequireSome<Auto, 'wheels'>) {
Object.assign(this, init)
}
}
const a = new Auto({
wheels: 4,
doors: 5,
})
React Higher Order Components
function withLayout<P extends object>(WrappedComponent: React.ComponentType<P>) {
return (props: P) => (
<div id='app'>
<Header/>
<WrappedComponent {...props}/>
<Footer/>
</div>
);
}