［译］<<Effective TypeScript>> 高效TypeScript62个技巧 技巧8

本文的翻译于<<Effective TypeScript>>, 特别感谢!! ps: 本文会用简洁, 易懂的语言描述原书的所有要点. 如果能看懂这文章,将节省许多阅读时间. 如果看不懂,务必给我留言, 我回去修改.

技巧8: 分辨符号在 类型空间 还是 值空间

一. 如何分辨在类型空间还是在值空间?

---

一个符号(或者说变量)在ts中只可能属于:

• 类型空间
• 值空间 例如:

interface Cylinder {
  radius: number;
  height: number;
}

const Cylinder = (radius: number, height: number) => ({radius, height});

第一个Cylinder属于类型空间, 第二个属于值空间.

当你分不清两者空间的区别可能出现这种类型的错误:

function calculateVolume(shape: unknown) {
  if (shape instanceof Cylinder) {
    shape.radius
       // ~~~~~~ Property 'radius' does not exist on type '{}'
  }
}

因为instanceof是 js 运行时的操作, 它的作用对象是值. 所以instanceof Cylinder指的是函数, 而不是类型.

所以要根据上下文来分辨符号在哪个空间, 但是两者构造有时候很相似,这里给出几个分辨的方法:

1. 符号在type 或者在 interface 后面, 都属于类型空间. 在const, let, var 后面的属于值空间

   type T1 = 'string literal';
   type T2 = 123;
   const v1 = 'string literal';
   const v2 = 123;
   

2. 利用TypeScript Playground 来分辨. ts playground 会将ts代码转换成js代码. 转换的过程会将类型空间的符号擦除

   

3. 符号如果在类型申明符号号(:), 或者断言符号(as)后面的符号属于类型空间. 等号(=) 后面的符号属于值空间

   interface Person {
     first: string;
     last: string;
   }
   const p: Person = { first: 'Jane', last: 'Jacobs' };
   //    -           --------------------------------- Values
   //       ------ Type
   

   特别的:

   function email(p: Person, subject: string, body: string): Response {
     //     ----- -          -------          ----  Values
     //              ------           ------        ------   -------- Types
     // ...
   }
   

4. class 结构 , 和enum结构, 既属于值空间, 又属于类型空间:

   class Cylinder {
     radius=1;
   height=1;
   }
   
   function calculateVolume(shape: unknown) {
     if (shape instanceof Cylinder) {
       shape  // OK, type is Cylinder
       shape.radius  // OK, type is number
     }
   }
   

二. 不同操作符号在 类型空间 和 值空间 的差异

---

以 typeof 为例:

type T1 = typeof p;  // Type is Person
type T2 = typeof email;
    // Type is (p: Person, subject: string, body: string) => Response

const v1 = typeof p;  // Value is "object"
const v2 = typeof email;  // Value is "function"

在类型的上下文中, typeof 根据值返回一个类型, 而在值的上下文中, typeof 根据值返回一个 js类型系统的字符串. 而这字符串总共有6个:“string,” “number,” “boolean,” “undefined,” “object,” and “function.”

typeof 一般作用于值, 不作用与类型. 当typeof 作用与class 的时候又有些特别的:

const v = typeof Cylinder;  // Value is "function"
type T = typeof Cylinder;  // Type is typeof Cylinder

第一个值v好理解, 就是一个字符串: "function". 第二个类型T就有点难解释. 可以理解为构造函数:

declare let fn: T;
const c = new fn();  // Type is Cylinder

你可以用InstanceType在类型构造函数和类型实例中进行切换

type C = InstanceType<typeof Cylinder>;  // Type is Cylinder

属性访问器( [ ] )也可以用在类型的操作上. 但是在值空间obj['field']和obj.field是相等的. 但是这个等式在类型系统中不成立

const first: Person['first'] = p['first'];  // Or p.first
   // -----                    ----------
Values
   //        ------ ------- Types

Person['first'] 是一个类型, p['first']则是值

当然在类型的[]中也可以使用各种操作符:

type PersonEl = Person['first' | 'last'];  // Type is string
type Tuple = [string, number, Date];
type TupleEl = Tuple[number];  // Type is string | number | Date

还有其他的操作符, 在类型空间和值空间有差异:

• this在值空间是 this 关键字. 在类型空间是类本身, 能够帮助子类实现方法链
• & 和 | 在值空间是位运算符, 在类空间表示交, 并的操作符
• const在值空间用于引入一个新变量, 但是在类型空间用于改变,文本类型的引用类型(see item21)
• extends 在值空间表示 子class, 在类型空间表示 子类型, 或者在泛型中表示约束

三. 在构造函数参数上分清值空间,类型空间

例如当你要实现这个函数:

function email(options: {person: Person, subject: string, body: string}) {
  // ...
}

在js中, 你可以直接这样实现:

function email({person, subject, body}) {
  // ...
}

如果你在ts中要这样实现, 就会报错:

function email({
  person: Person,
       // ~~~~~~ Binding element 'Person' implicitly has an 'any' type
  subject: string,
        // ~~~~~~ Duplicate identifier 'string'
        //        Binding element 'string' implicitly has an 'any' type
  body: string}
     // ~~~~~~ Duplicate identifier 'string'
     //        Binding element 'string' implicitly has an 'any' type
) { /* ... */ }

因为ts把 person理解成对象的键, Person理解为对象的值. 正确的方法应该这样写:

function email(
  {person, subject, body}: {person: Person, subject: string, body: string}
) {
  // ...
}