TypeScript 中高级应用与完美实践

typeof 用于获取一个 “常量” 的类型，这里的 “常量” 是指任何可以在编译期确定的东西，例如 const、function、class 等。它是从 实际运行代码 通向 类型系统 的单行道。理论上，任何运行时的符号名想要为类型系统所用，都要加上 typeof。但是 class 比较特殊不需要加，因为 ts 的 class 出现得比 js 早，现有的为兼容性解决方案。

在使用 class 时， class 名 表示实例类型， typeof class 表示 class 本身类型。没错，这个关键字和 js 的 typeof 关键字重名了 :)。

const config = { width: 2, height: 2 }; 
function getLength(str: string) { return str.length; } 
  
type TConfig = typeof config;    // { width: number, height: number } 
type TGetLength = typeof getLength;    // (str: string) => number 

实战演练

我在项目中遇到这样一种场景，需要获取一个类型中所有 value 为指定类型的 key。例如，已知某个 React 组件的 props 类型，我需要 “知道”（编程意义上）哪些参数是 function 类型。

interface SomeProps { 
    a: string 
    b: number 
    c: (e: MouseEvent) => void 
    d: (e: TouchEvent) => void 
} 
// 如何得到 'c' | 'd' ？  

分析一下这里的思路，我们需要从一个 map 得到一个 set，而这个 set 是 map 的 key 的 子集，筛选子集的 条件 是 value 的类型。要构造 set 的子集，需要用到 never ；要实现条件判断，需要用到 extends ；而要实现 key 到 value 的访问，则需要索引取值。经过一些尝试后，解决方案如下。

type GetKeyByValueType<T, Condition> = { 
    [K in keyof T]: T[K] extends Condition ? K : never 
} [keyof T]; 
  
type FunctionPropNames =  GetKeyByValueType<SomeProps, Function>;    // 'c' | 'd' 

这里的运算过程如下：

// 开始 
{ 
    a: string 
    b: number 
    c: (e: MouseEvent) => void 
    d: (e: TouchEvent) => void 
} 
// 第一步，条件映射 
{ 
    a: never 
    b: never 
    c: 'c' 
    d: 'd' 
} 
// 第二步，索引取值 
never | never | 'c' | 'd' 
// never的性质 
'c' | 'd' 

TypeScript 只发生在编译期，因此我们可以在代码中加入一些符号，来给予编译器一些提示，使其按我们要求的方式运行。

类型转换

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!