ts-简单知识点汇总

1.基本类型：boolean、number、string、数组、元组、枚举、any、void、null、undefined、never、object

let numberOrString: number | string = 123
let union: number | string | boolean | string[]

let arrOfNumber: number[] = [1, 2, 3]
let arrOfNumber1: Array<number> = [1, 2, 3]
let arrOfNumber2: any[] = [1, '22']

//元组
let user: [string, number] = ['12', 88] //固定长度固定类型的数组

//字面量
let literal: 1 | '2' | true | [1, 23]

//枚举类型 Enum
enum Color { red, blue, yello, green }

let color = Color.blue
console.log(color) // 1

enum Color1 { red = 5, blue = 10, yello = 20, green = 1 }
enum Color2 { red = 'red', blue = 'blue', yello = 20, green = 1 }

// any 和unknown

let randVule: any = 1
randVule = '2'
randVule()

let randVule1: unknown = 1
randVule1 = '2'
if (typeof randVule1 === 'function') {
    randVule1()
}

//void 、undefined 、never

function printResult(): void {
    console.log('1111')
}

function printResult1(): undefined {
    console.log('1111')
    return
}
// never 一个函数永远执行不完
function throwResult(message: string, erroCode: number): never {
    throw { message, erroCode }
}

throwResult('11', 200)

//类型适配（类型语言）Type Asserttions
let message: any
message = 'abc'
message.endsWith('c')  //message不会变成string类型

let ddd = (<string>message).endsWith('c') // message 转变成string类型
let dddd = (message as string).endsWith('c')

interface Person {
    readonly id: string;
    name: string;
    age?: number;
}

let yely: Person = {
    id: '1',
    name: 'yely'
}

type Xtype = 'a' | 'b' | 'c';
const x: Xtype = 'a'

interface Person2 {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person2 = {
    name: 'Tom',
    gender: 'male'
};

interface Fish {
    fish: string
}
interface Water {
    water: string
}
interface Bird {
    bird: string
}
interface Sky {
    sky: string
}

type Condition<T> = T extends Fish ? Water : Sky;

let condition1: Condition<Fish | Bird> = { water: '水' };
let condition2: Condition<Fish | Bird> = { sky: '天空' };

type returnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;

type MethodName<T> = { [F in keyof T]: T[F] extends Function ? F : never }[keyof T]

2.class类

//创建动物类

class Animal {
    name: string;
    constructor(name: string) { //构造函数
        this.name = name
    }
    run() {
        return `${this.name}is running`
    }
}

const snake = new Animal('lily')
console.log(snake.run())

class Dog extends Animal {
    bark() {
        return `${this.name} is braking`
    }
}

const xiaobao = new Dog('xiaobao')
console.log(xiaobao.bark())

//重新父类方法
class Cat extends Animal {
    constructor(name) {
        super(name)
        console.log(this.name)
    }
    run() {
        return `Meow,` + super.run() //调用父类方法 super
    }

}

const maomao = new Cat('maomao')
console.log(maomao.run())

3. 函数

//定义返回类型 可选参数和默认参数需定义在最后
function add(x: number, y: number, z?: number): number {
    return x + y
}

// =>表示定义返回类型
const add2: (x: number, y: number, z?: number) => number = add



function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}
//默认参数
function log(x: number = 3) {
    console.log(x)
}

4. 泛型

//泛型 ：可理解为占位符或一个变量，使用时把定义好的类型像参数一样传入，可以原封返回
function acho<T>(arg: T): T {
    return arg
}

const result = acho(123)

//多个泛型类型
function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]]
}

function swap2<T, U>(x: T, y: U) {
    return [x, y]
}

const result2 = swap(['string', 123])
const result3 = swap2(1, '2') //result3类型：(string|number)[]
const result4 = swap2<boolean, number>(true, 1)

//约束泛型

// 包含length属性

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

const l2 = echowithArr(['1', '2']) // l2类型：string[]

//使用 interface  传入包含length属性对象

interface IWithLength {
    length: number
}

function echoWithLength<T extends IWithLength>(arg: T): T {
    console.log(arg.length)
    return arg
}

const str = echoWithLength('str')
const arr = echoWithLength([1, 2, 3])
const obj2 = echoWithLength({ length: 10, wigth: 10 })
//echoWithLength(12)

class Queue<T>{
    private data = []
    push(item: T) {
        return this.data.push(item)
    }
    prop(): T {
        return this.data.shift()
    }
}

const queue1 = new Queue<number>()
queue1.push(1)
console.log(queue1.prop().toFixed())

const queue2 = new Queue<string>()

queue2.push('str')
console.log(queue2.prop().length)

interface KeyPair<T, U> {
    key: T,
    value: U
}
let kp1: KeyPair<string, number> = { key: 'str', value: 2 }
let kp2: KeyPair<number, string> = { key: 1, value: 'str' }
let arr1: number[] = [1, 2, 3]
let arr2: Array<number> = [1, 2, 3]


//函数 interface
interface IPlus {
    (a: number, b: number): number
}
function plus(a: number, b: number): number {
    return a + b
}
const a: IPlus = plus


// 函数 interface 泛型
interface IPlusT<T> {
    (a: T, b: T): T
}
function connect(a: string, b: string): string {
    return a + b
}
const b: IPlusT<string> = connect

// 类型别名、类型断言

// type aliases 类型别名
function sum(x: number, y: number): number {
    return x + y
}
const sum2: (x: number, y: number) => number = sum

//使用类型别名
type PlusType = (x: number, y: number) => number
const sum3: PlusType = sum

//联合类型
type NameResolver = () => string
type NameOrResolver = string | NameResolver
function getName(n: NameOrResolver): string {
    if (typeof n === 'string') {
        return n
    } else {
        return n()
    }
}


//type assertion 类型断言
function getLength(input: string | number): number {
    // const str = input as String
    // if (str.length) {
    //     return str.length
    // } else {
    //     const num = input as Number
    //     return num.toString().length
    // }

    if ((<string>input).length) {
        return (<string>input).length
    } else {
        return input.toString().length
    }
}