你可能所不知道的 TypeScript 用法

1. 巧用 typeof

一般我们情况下，我们都是先写类型接口，再去使用。

interface initA {
  inita: number,
}
const initA: initA = { inita: 123 } 

如何巧用 typeof,如下。typeof 可以自动识别类型，如果只有一个属性，可以减少代码量。也可以通过 typeof 去进行一些校验判断。

const initA = {
  inita: 123,
  initb: 'aaa'
}

type initA = typeof initA;

if (typeof initA.inita === 'number') {
  console.log('inita 是一个number')
}

控制台输出的值为：

image1.png

问题：TypeScript 是静态类型，所以在进行项目联调的时候，无法在运行时检验后端返回的值是否正确。
思路：当拿到后端值，进行 typeof 的检验看是否与我们约定好的值是否匹配。匹配才进行后续的 setState 的操作。如果，后端返回的值为 复杂类型（对象数组，对象+字符串等） 则可以考虑是否封装一组循环遍历值，进行比较。

type resultConst = {
 id: number,
 name: string,
}
const result: resultConst = await Request({ url: '/getopportunityconst' });  // 请求获得的值
console.log(typeof result.id === 'number');  // 返回true

2. 巧用联合类型

如何写一个，Color 要么是 red 颜色，要么是 yellow 颜色。

不推荐 -->
interface Color {
  red?: string,
  yellow?: string,
}

推荐 -->
type Color = { red: string, } | { yellow: string, }

原因：interface Color 可以理解为在 Color 中既有 red 也有 yellow 两个非必须存在的属性。而 type Color 才是如题意。

3. 巧用查找类型

Person 为如下：

interface Person {
  addr: {
    city: string,
    street: string,
    num: number,
  }
}

** 此时需要 addr 的类型时，你有什么写法？**

interface Address {
  city: string,
  street: string,
  num: number,
}
interface Person {
  addr: Address
}

但是这样把 Address 单独拎出来赋值，可行但是代码并不是最简洁的。

// Person["addr"] // This is Address.
interface Person1 {
  addr1: Person["addr"],
}

有些场景如果后者会让代码更整洁、易读。

4. 巧用 keyof

官网解释，什么是 keyof。

image2.png

interface Itest {
  name: string,
  age: number,
  address: string,
}

type ant = keyof Itest;

查看 ant 会出来什么？type ant = "name" | "age" | "address"
keyof 与 Object.keys 略有相似，只不过 keyof 取 interface 的键。

image3.png

假设有一个 object 如下所示，我们需要使用 typescript 实现一个 get 函数来获取它的属性值

const data = {
  a: 3,
  hello: 'world'
}

function get(o: object, name: string) {
  return o[name]
}

如上这么写会有什么缺点呢？（这也是很多小伙伴问，ts 的优点是什么）
1、函数无法确认返回类型: ts 最大的优点是类型校验。
2、无法对 key 做约束： 可能会犯拼写的错误。

我们使用 keyof 来增强一下 get 函数的类型功能

function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
  console.log(o[name])  // 3 
  return o[name]
}

get(data, 'a')

更升级版，突然让我想到 form表单传值是否也可以借鉴此方法

function get<T extends object, K extends keyof T>(o: T, name: K[]): T[K][] {
  console.log(name.map(item => o[item]));   // [3, "world"]
  return name.map(item => o[item]);
}

get(data, [ 'a', 'hello'])

刚刚以上说的无法确认返回类型，很容易理解。那无法对 key 进行约束，让我们来看一下会出现怎样的情况。

image3.png

更多 keyof 小技巧用法，官网给得很详细
https://www.tslang.cn/docs/handbook/advanced-types.html