TS学习笔记(Six Day)

348 阅读2分钟

TS学习笔记(泛型和装饰器)

TS泛型

  • 泛型语言:使用泛型来创建组件可以使一个组件支持多种类型的数据,这样用户可以用自己的数据类型来使用组件
  • 相比使用any,泛型会保留参数类型,泛型有点把数据类型抽出来,动态配置,组件复用的感觉,'< T >'就是插头
//普通的泛型语法
function identity <T, U>(value: T, message: U) : T {
  console.log(message);
  let type = typeof value;//boolean
  console.log(type)
  return value;
}

console.log(identity<booleanstring>(true"coolFish"));//coolFish  true
//编辑器自动选择类型的写法,可以省略调用处的尖括号
function identity <T, U>(value: T, message: U) : T {
  console.log(message);
  let type = typeof value;//boolean
  console.log(type)
  return value;
}

console.log(identity(true"coolFish"));//coolFish  true

小结:其中的T是代表类型,还可以使用K,V,E,分别代表键,值,元素类型

  • 泛型接口,泛型类
interface GenericIdentityFn<T> {
  (arg: T): T;
}


class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
  return x + y;
};

小结:没啥好说的

  • 泛型工具类型:
  • typeof:在TS中,typeof可以用来获取一个变量声明或对象的类型
interface Person {
  namestring;
  agenumber;
}

const computerPerson = { name'coolFish'age24 };
type coolFish= typeof computer; // -> Person

function toArray(x: number): Array<number> {
  return [x];
}

type Func = typeof toArray; // -> (x: number) => number[]
console.log()

小结:使用typeof获取定义的类,然后用类型别名接收,然后就可以用了

  • keyof:可以用于获取某种类型中的所有键,返回类型是联合类型

  • in:用来遍历枚举类型

type Keys = "a" | "b" | "c"

type Obj =  {
  [p in Keys]: string
} // -> { a: string, b: string, c: string }

小结:有点像for in

  • partial:作用就是将某个类型里的属性全部变成可选项?
type Partial<T> = {
  [P in keyof T]?: T[P];
}

小结:首先通过keyof拿到T的所有属性名,然后in遍历,然后赋值给P,然后p(属性):T[P] (值),中间的?用于将属性变得可选

装饰器

#####定义

  • 装饰器是一个表达式
  • 该表达式执行后,返回一个函数
  • 函数的入参分别为target,name和descriptor
  • 函数执行后,可能返回descriptor对象,用于配置target