typescript的使用

1、联合类型

// 联合类型
const a: number | string | undefined | null = null;
const b: 'a' | 'b' | 'c' = 'a'

2、数组

// 数组类型
const arr: string[] = ['1'];
const arr2: Array<string> = ['1']
const arr3: Array<string | number> = ['1', 2]

3、元组

// 元组类型
const arr4: [string, number, number] = ['1', 2, 3]
const arr5: [] = []

// 具名元组
type Arr = [x: number, y: number, z:string] = [1,1,'1']

4、泛型

// 泛型可以理解为类型变量 使用该类型地方必须保持类型一致
// type声明写法
type IData<T> = {
	id: string;
	data: T
}
// 接口写法 泛型默认值
interface IData2<T = number> {
	id: string;
	data: T
}
type IString = IData<string>
const data: IString = { id: '1', data: '1' }

type User = {
	name: string;
	age: number
}
type IResult = IData<User> 
const user: IResult = { 
  id: '1',
  data: { name: "张三", age: 18 }
}

// 函数写法 多泛型
type IFn<T, K> = (a: T, b: K) => [T,K]
interface IFn<T, K> {
    (a: T, b: K): T
}
// 函数泛型声明
function fn<T, K = number>(a: T, b: K): [T, K] {
    return [a, b]
}
// 调用 函数调用可以省略泛型传入，因为函数可以推导出泛型的类型
// fn<string, string>('1', '2')
fn('1', '2')

// 受限泛型 约束泛型T的类型范围
type IResult<T extends object> = {
	id:string;
	data:T
}

// 更小约束，必须含有length属性的对象
type IData = { length:number }
type IResult<T extends IData> = {
	id:string;
	data:T
}

5、函数

type IFn = (a: number, b?: number, c = '1', callback?: () => void)=> number 
interface IFn2 {
	(a: number, b?: number, c = '1', callback?: () => void)=> number
}
function add(a: number, b?: number, c = '1', callback?: () => void): number {
    callback && callback()
    return 1
}

6、对象

// 字面量声明类型
const obj: {
    a: string,
    b: number,
    c: [string, number],
    [key:string]:string  // 对象索引签名 约束键名和键值都是string类型
} = {
    a: '1',
    b: 1,
    c: ['1', 2]
}

// Record 用法 约束对象 类似于对象索引签名的用法
const obj:Record<string, number> = {
 a:1,
 b:2
}

// 类型别名
type IState = {
    a: number,
    b: string,
}

const obj2: IState = {
    a: 1,
    b: '1'
}

type IFn = (a: number, b: string) => void
const fn: IFn = (a, b) => {}

// 接口声明
interface IState2 {
    a: number
}
const obj3: IState2 = { a: 1 }

7、交叉类型

type A = {
    a: string
    b: number
}

type B = {
    d: number
    c: string
}

// & 约束必须A和B类型都包含
const s: A & B = { a: 's', b: 1, c: 's', d: 1 }

// | 约束A或者B满足一个即可
const m: A | B = { a: '1', b: 1 }

8、as类型断言

let o: any = 1;
const n = (o as string).length
const p = (<string>o).length

// 非空断言
let sd: undefined | string = '1'
sd!.length

9、typeof

// typeof 用于推导出数据的类型
type A = {
	a:string
}
const a: A = { a:'1' }
type B = typeof a
const b: B = { a:'1' }

// 获取数组值的类型
const arr = ['1','2']
type IValue = typeof arr[number]

10、satisfies类型检查

// satisfies 和as断言比较类似，但更加安全智能（会自动做类型推导）

type ICurrent = {
    a: string
}
// 如果类型不安全，通过as也不会有任何提示
const o = {} as ICurrent
console.log(o.a);

// 如果类型不安全，通过satisfies会提示错误
const m = {} satisfies ICurrent
console.log(m.a);

11、枚举

// 枚举会参与js逻辑处理

// 默认数字枚举
enum Color {
    RED,   	// 0
    BLUE,		// 1
    GREEN		// 2
}

// 赋值枚举
enum IColor {
    RED = 2,   	
    BLUE = 3,	
    GREEN	= 4
}
const color = IColor.RED // 赋值使用

// 常量枚举 常量枚举使用时，js不会产生大量的执行代码，会直接使用枚举常量值
const enum IState {
    TOP,
    BOTTOM,
    LEFT,
    RIGHT
}

12、装饰器

装饰器的作用：为某些属性、方法（方法参数），类提供元数据信息；装饰器的本质是一个函数；装饰器是js的内容，是需要参与运行的。

A、类装饰器

// 装饰器函数会提前运行 @ClassDecoration这种写法可以理解为调用 参数即是class A
function ClassDecoration(target: A) {
}
@ClassDecoration
class A {

}

// 泛型写法
type User = {
    id: string;
    name: string
}
type Target<T> = new (...args: any[]) => T
function ClassDecoration<T extends Target<User>>(target: T) {
}
@ClassDecoration
class A {
    constructor(public id: string, public name: string) { }
}

new A('1', 'a')

// 装饰器工厂模式 带参数
type User = {
    id: string;
    name: string
}
type Target<T> = new (...args: any[]) => T
function ClassDecoration<T extends Target<User>>(str: string) {
    if (str) {
    }
    // return出去的函数才是装饰器的实际功能函数
    return function (target: T) {
    }
}
@ClassDecoration('1')
class A {
    constructor(public id: string, public name: string) { }
}
new A('1', 'a')

B、属性装饰器

// 当被装饰属性是实例属性时，装饰器函数参数target表示类原型
// 当被装饰属性是静态属性时，装饰器函数参数target表示类本身
// 装饰器函数参数key表示属性名
function AttrDecoration(target:any, key:string) {
}
class A {
    @AttrDecoration
    attr1: string;
    @AttrDecoration
    static attr2: string
}

new A()

// 工厂模式 传入参数 用法与类装饰器类似
function d(str: string) {
    if (str) {
    }
    return function (target: any, key: string) {
    }
}
class A {
    @d('1')
    attr1: string;
    @d('2')
    static attr2: string
}
new A()

C、方法装饰器

// 当被装饰属性是实例方法时，装饰器函数参数target表示类原型
// 当被装饰属性是静态方法时，装饰器函数参数target表示类本身
// 装饰器函数参数key表示方法名
// 装饰器函数参数config表示属性描述对象 就是defineProperty
function AttrDecoration(target:any, key:string,config: PropertyDescriptor) {
}
class A {
    @AttrDecoration
    fn1(){};
    @AttrDecoration
    static fn2(){}
}

new A()

// 工厂模式 传入参数 用法与类装饰器类似
function d(str: string) {
    if (str) {
    }
    return function (target: any, key: string,config: PropertyDescriptor) {
    }
}
class A {
    @d('1')
    attr1: string;
    @d('2')
    static attr2: string
}
new A()