乐趣区

关于前端:TypeScript-官方手册翻译计划七类型操控类型操作符

jiezi
  • 阐明 ：目前网上没有 TypeScript 最新官网文档的中文翻译，所以有了这么一个翻译打算。因为我也是 TypeScript 的初学者，所以无奈保障翻译百分之百精确，若有谬误，欢送评论区指出；
  • 翻译内容 ：暂定翻译内容为 TypeScript Handbook，后续有空会补充翻译文档的其它局部；
  • 我的项目地址 ：TypeScript-Doc-Zh，如果对你有帮忙，能够点一个 star ~

本章节官网文档地址：Keyof Type Operator、Typeof Type Operator

Keyof 类型操作符

keyof 类型操作符

keyof 类型操作符承受一个对象类型作为参数，并基于它的键产生一个由字符串字面量或者数值字面量组成的联结类型。上面的类型 P 等同于类型 "x" | "y"：

type Point = {x: number; y: number};
type P = keyof Point;
    ^
   // type P = keyof Point

如果 keyof 操作的类型有 string 或者 number 类型的索引签名，那么 keyof 会返回该索引签名的类型：

type Arrayish = {[n: number]: unknown };
type A = keyof Arrayish;
     ^
   // type A = number
 
type Mapish = {[k: string]: boolean };
type M = keyof Mapish;
     ^
   // type M = string | number

留神，在这个例子中，M 示意的类型是 string | number —— 这是因为 JavaScript 对象的键总是会被强制转化为一个字符串，因而 obj[0] 等同于 obj["0"]。

keyof 类型和映射类型联合的时候会施展很大的作用，后续的章节咱们也会进行介绍。

Typeof 类型操作符

typeof 类型操作符

JavaScript 中自身就有一个可用于表达式上下文的 typeof 操作符：

// 打印 "string"
console.log(typeof "Hello world");

TypeScript 则增加了一个可用于类型上下文的 typeof 操作符，让你能够援用某个变量或者属性的类型：

let s = "hello";
let n: typeof s;
    ^
    // let n: string

像下面这样用于根本类型，作用并不是很大，但如果把 typeof 和其它类型操作符联合应用，就能够不便地示意多种模式了。举个例子，咱们先来看一下预约义类型 ReturnType<T>。它能够承受一个函数类型并将它的返回值类型返回进来：

type Predicate = (x: unknown) => boolean;
type K = ReturnType<Predicate>;
     ^
    // type K = boolean

如果间接把函数名作为参数传递给 ReturnType，那么咱们会看到一个批示性谬误：

function f() {return { x: 10, y: 3};
}
type P = ReturnType<f>;
                  ^    
// 'f' refers to a value, but is being used as a type here. Did you mean 'typeof f'?

记住，值和类型是不一样的，这里应该传入类型而不是值，因而咱们能够改用 typeof 去援用值 f 的类型：

function f(){
    return {
        x: 10,
        y: 3
    };
}
type P = ReturnType<typeof f>;
     ^
   /* type P = {
        x: number;
        y: number;
     }            */

限度

TypeScript 无意限度 typeof 能够操作的表达式类型。具体地说，tyepof 只能作用于标识符（比方变量名）或者它们的属性。这能够防止让开发者编写他们认为能够执行的但实际上不能执行的代码：

// 这里应该改用 = ReturnType<typeof msgbox>
let shouldContinue: typeof msgbox("Are you sure you want to continue?");
                            ^            
// ',' expected.
退出移动版