TypeScript

TypeScript

number
,
string
,
null
,
undefined
,
symbol
,
boolean
,
void

const num: number = 123; const teacherName: string = 'Dell';

{}
,
[]
,
Class
,
function

const teacher: { name: string; age: number; } = { name: 'Dell', age: 18, }; const numbers: number[] = [1, 2, 3]; class Person {} const dell: Person = new Person(); const getTotal: () => number = () => { return 123; }; const func1: (str: string) => number = (str) => { return parseInt(str, 10); }; const func2 = (str: string): number => { return parseInt(str, 10); };

//type annotation TS let count1: number; count1 = 123; //type inference TS let count2 = 123; // TS const num1 = 1; const num2 = 2; const total = num1 + num2; // TS function getTotal2(num1: number, num2: number) { return num1 + num2; } const total = getTotal2(1, 2);

void
never

// js 3 function hello() {} const hello1 = function () {} const hello2 = () => {} // number // function add(first: number, second: number): number { return first + second } // void never function sayHello(): void { console.log("hello") } //never: function errorEmitter(): never { throw new Error() //while(true) {} console.log("123") } // function add({ first, second }: { first: number; second: number }): number { return first + second } const total = add({ first: 1, second: 2 }) // function getNumber({ first }: { first: number }): number { return first }

any

// Date const data = new Date() // case: JSON.parse interface Person { name: "string" } const rawData = '{"name":"Dell"}' const newData = JSON.parse(rawData) // newDate any const newData2: Person = JSON.parse(rawData) //newDate2 Person

TypeScript TypeScript

let someValue: any = "this is a string" let strLength: number = (<string>someValue).length

as ( TypeScript JSX as )

let someValue2: any = "this is a string" let strLength2: number = (someValue as string).length

type-

type

type S = string let a: S = 'a'

S
string
string

type SA = string[] // type Handler = (x: string) => void // type I = { // name: string value: number } class C { name: string = 'a' value: number = 0 } type D = C //

interface-

interface Person { name: string; readonly age?: number; } const getPersonName = (person: Person): void => { console.log(person.name); }; const setPersonName = (person: Person, name: string): void => { person.name = name; }; const person = { name: 'Jonas', age: 22, }; getPersonName(person); setPersonName(person, 'Mike'); getPersonName(person);

person

interface Person { name: string; readonly age?: number; } const person = { name: 'Jonas', age: 22, sex: 'male' }; getPersonName(person);

getPersonName({ name: 'Jonas', age: 22, sex: 'male' // });

class-

js name

class Person { name: string; eat() { return `${this.name} is eating something` } } const jonas = new Person(); jonas.name = 'Jonas'; console.log(jonas.eat());

  • public
  • private
  • protected

-constructor

constructor

class Person { name: string; constructor(name: string) { this.name = name; //this.name name name name } eat() { return `${this.name} is eating something` } } const jonas = new Person('Jonas'); console.log(jonas.eat());

class Person { // //public name: string; //constructor(name: string) { // this.name = name; //} // constructor(public name: string) { } eat() { return `${this.name} is eating something`; } } const jonas = new Person('Jonas');

class Student extends Person { study() { return `${this.name} is studing`; } } const mike = new Student('Mike'); console.log(mike.study());

class Student extends Person { constructor(public age: number) { super('Dell'); } } const dell = new Student(29); console.log(dell.age); //29 console.log(dell.name); //Dell

super()

getter setter

class Person { constructor(private name: string) {} get getName() { return this.name + ' the boy'; // } } const jonas = new Person('Jonas'); console.log(jonas.getName); //Jonas the boy getName

class Person { constructor(private _name: string) {} get name() { return this._name + ' the boy'; } set name(name: string) { const realName = name.split(' ')[0]; this._name = realName; } } const person = new Person('Jonas'); console.log(person.name); //Jonas the boy person.name = 'Mike'; console.log(person.name); //Mike the boy

getter setter readonly

class Person { public readonly name: string; constructor(name: string) { this.name = name; } }

// class Demo { private static instance: Demo; private constructor(public name: string) {} // private new static getInstance(name: string) { //static if (!this.instance) { this.instance = new Demo(name); } return this.instance; } } const demo1 = Demo.getInstance('Jonas'); const demo2 = Demo.getInstance('Mike'); console.log(demo1.name); //Jonas console.log(demo2.name); //Jonas

let temp: number | string = 123 temp = "456"

interface IName { name: string; } type IPerson = IName & { age: number }; let person: IPerson = { name: '123', age: 123 };

const str: 'name' = 'name'; const number: 1 = 1; type Directions = 'Up' | 'Down' | 'Left' | 'Right'; let toWhere: Directions = 'Left';

T
T

function echo<T>(arg: T): T { return arg; }

const result1 = echo<string>('123'); //string const result2 = echo<number>(123); //number

T string <> ()

-- T

const result1 = echo('123'); //string const result2 = echo(123); //number

<>
myString T T

function swap<T, U>(tuple: [T, U]): [U, T] { return [tuple[1], tuple[0]]; } const result3 = swap(['string', 123]); //[number, string]

echo arg

function echo<T>(arg: T): T { console.log(arg.length); return arg; }

length T T length

function echo<T>(arg: T[]): T[] { console.log(arg.length); return arg; }

length
length

extends

interface hasLength { length: number } function echo<T extends hasLength>(arg: T): T { console.log(arg.length); return arg; }

length

const str = echo('string'); const obj = echo({ length: 100, width: 200 }); const arr = echo([1, 2, 3]); const num = echo(123); //

//global object const a: Array<number> = [1, 2, 3]; const date = new Date(); date.getTime(); const reg = /abc/; reg.test('abc'); //built-in object Math.pow(2, 2); //DOM and BOM let body = document.body; let allLis = document.querySelectorAll('li'); allLis.keys(); document.addEventListener('click', (e) => { e.preventDefault(); });

Utility Types

Pertial
Partial

interface Person { name: string; age: number; } let viking: Person = { name: 'Viking', age: 20 }; type personPartial = Partial<Person>; let viking2: personPartial = { name: 'Viking' };

Omit

type personOmit = Omit<Person, 'name'>; let viking3: personOmit = { age: 20 };


juejin.cn/post/694931 www.tslang.cn/docs/handbo