ts 类型例子

原文链接: ts 类型例子

上一篇: puppeteer csdn 登录 [失败, 跨域cookie无法解决]

下一篇: xstate 状态管理 vue3 模拟红绿灯

类型交叉合并

使用& 表示集合中并的意思, 即a和b中属性的并集

使用 | 表示两个中或的意思, 即a和b中的一个类型

const merge = <T, U>(arg1: T, arg2: U): T & U => {
  return Object.assign(arg1, arg2);
};

let a = {
  a: 1,
};

let b = {
  b: 2,
};

let c = merge(a, b);
console.log(c);

const arr = [123, "abc"];

function getRandom() {
  if (Math.random() < 0.5) return arr[0];
  return arr[1];
}

let d = getRandom();

if (typeof d === "string") {
  console.log("str", d);
} else {
  console.log("num", d);
}

类型保护

简单的类型判断用typeof比较简单 必须使用等式判断, 且只支持基础类型, 不支持object,object的类型使用instanceof判断

function isString(v: string | number): v is string {
  return typeof v === "string";
}

let s = Math.random() < 0.5 ? "abc" : 123;

if (isString(s)) {
  console.log(s.length);
}

对象使用instanceof 判断

class Dog {
  dog() {}
}

class Cat {
  cat() {}
}

let ani = Math.random() > 0.5 ? new Cat() : new Dog();
if (ani instanceof Dog) {
  console.log(ani.dog());
}

叹号和问号

1、as和!用于属性的读取，都可以缩小类型检查范围，都做判空用途时是等价的。只是!具体用于告知编译器此值不可能为空值（null和undefined），而as不限于此。

2、?可用于属性的定义和读取，读取时告诉编译器此值可能为空值（null和undefined），需要做判断。

复杂的映射, 将对象的属性长度返回, 支持自定义map函数

const obj2 = {
  name: "123",
  addr: "abcd",
};

function getLength<K extends number | string, T, U>(
  v: Record<K, T>,
  f: (arg: T) => U
): Record<K, U> {
  let res = {} as Record<K, U>;
  for (let k in v) res[k] = f(v[k]);
  return res;
}

const len = getLength(obj2, (s) => s.length);
console.log(len);