TypeScript 官方手册翻译计划【二】:普通类型

2021年11月22日 阅读数:3
这篇文章主要向大家介绍TypeScript 官方手册翻译计划【二】:普通类型,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。
  • 说明:目前网上没有 TypeScript 最新官方文档的中文翻译,因此有了这么一个翻译计划。由于我也是 TypeScript 的初学者,因此没法保证翻译百分之百准确,如有错误,欢迎评论区指出;
  • 翻译内容:暂定翻译内容为 TypeScript Handbook,后续有空会补充翻译文档的其它部分;
  • 项目地址TypeScript-Doc-Zh,若是对你有帮助,能够点一个 star ~

本章节官方文档地址:Everyday Typescanvas

普通类型

在这一章中,咱们的内容会涉及到 JavaScript 代码中最多见的一些数据类型,同时也会解释这些类型在 TypeScript 中的对应描述方式。本章节并不会详尽介绍全部类型,在后续章节中咱们还会介绍更多命名和使用其它类型的方法。segmentfault

类型不只能够出如今类型注解中,还能够出如今许多其它地方。在学习类型自己的同时,咱们也会学习如何在某些地方使用这些类型去组成新的结构。数组

首先,咱们先来回顾一下编写 JavaScript 或者 TypeScript 代码时最基础和最经常使用的类型。它们稍后将成为更复杂类型的核心组成部分。安全

原始类型:stringnumberboolean

JavaScript 有三种很经常使用的原始类型stringnumberboolean。每一种类型在 TypeScript 中都有相对应的类型。正如你所料,它们的名字就和使用 JavaScript 的 typeof 运算符获得的字符串同样:jvm

  • string 表示相似 "Hello, world!" 这样的字符串值
  • number 表示相似 42 这样的数值。对于整数,JavaScript 没有特殊的运行时值,因此也就没有 int 或者 float 类型 —— 全部的数字都是 number 类型
  • boolean 表示布尔值 truefalse
类型名 StringNumberBoolean(大写字母开头)也是合法的,但它们指的是在代码中不多出现的内建类型。请始终使用 stringnumberboolean

数组

为了表示相似 [1,2,3] 这样的数组类型,你可使用语法 number[]。这种语法也能够用于任意类型(好比 string[] 表示数组元素都是字符串类型)。它还有另外一种写法是 Array<number>,二者效果是同样的。在后续讲解泛型的时候,咱们会再详细介绍 T<U> 语法。ide

注意 [number]和普通数组不一样,它表示的是 元组

any

TypeScript 还有一种特殊的 any 类型。当你不想要让某个值引发类型检查错误的时候,可使用 any函数

当某个值是 any 类型的时候,你能够访问它的任意属性(这些属性也会是 any 类型),能够将它做为函数调用,能够将它赋值给任意类型的值(或者把任意类型的值赋值给它),或者是任何语法上合规的操做:学习

let obj: any = { x: 0 };
// 下面全部代码都不会引发编译错误。使用 any 将会忽略类型检查,而且假定了
// 你比 TypeScript 更了解当前环境
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;

当你不想要写一长串类型让 TypeScript 确信某行代码没问题的时候,any 类型很管用。url

noImplicitAny

当你没有显式指定一个类型,同时 TypeScript 也没法从上下文中进行类型推断的时候,编译器会默认将其做为 any 类型处理。翻译

不过,一般你会避免这种状况的发生,由于 any 是会绕过类型检查的。启用 noImplicitAny 配置项能够将任意隐式推断获得的 any 标记为一个错误。

变量的类型注解

当你使用 constvar 或者 let 声明变量的时候,你能够选择性地添加一个类型注解以显式指定变量的类型:

let myName: string = 'Alice';
TypeScript 没有采用相似 int x = 0 这样“在表达式左边声明类型”的风格。类型注解老是跟在要声明类型的东西后面。

不过,在大多数状况下,注解并非必需的。TypeScript 会尽量地在你的代码中自动进行类型推断。举个例子,变量的类型是基于它的初始值推断出来的:

// 不须要添加类型注解 —— myName 会被自动推断为 string 类型
let myName = 'Alice';

多数状况下,你不须要刻意去学习类型推断的规则。若是你仍是初学者,请尝试尽量少地使用类型注解 —— 你可能会惊讶地发现,TypeScript 彻底理解所发生的事情所须要的注解是如此之少。

函数

函数是 JavaScript 中传递数据的主要方式。TypeScript 容许你指定函数的输入和输出的类型。

参数类型注解

当你声明一个函数的时候,你能够在每一个参数后面添加类型注解,从而声明函数能够接受什么类型的参数。参数的类型注解跟在每一个参数名字的后面:

// 参数类型注解
function greet(name: string){
    console.log('Hello, ' + name.toUpperCase() + '!!');
}

当函数的某个参数有类型注解的时候,TypeScript 会对传递给函数的实参进行类型检查:

// 若是执行,会有一个运行时错误!
greet(42);
// Argument of type 'number' is not assignable to parameter of type 'string'.
即便没有给参数添加类型注解,TypeScript 也会检查你传递的参数的个数是否正确

返回值类型注解

你也能够给返回值添加类型注解。返回值类型注解出如今参数列表后面:

function getFavourNumber(): number {
    return 26;
}

和变量的类型注解同样,一般状况下咱们不须要给返回值添加一个类型注解,由于 TypeScript 会基于 return 语句推断出函数返回值的类型。上述例子中的类型注解不会改变任何事情。一些代码库会显式指定返回值的类型,这多是出于文档编写的须要,或者是为了防止意外的修改,或者只是我的喜爱。

匿名函数

匿名函数和函数声明有点不一样。当一个函数出如今某个地方,且 TypeScript 能够推断它是如何被调用的时候,该函数的参数会被自动分配类型。

好比:

// 这里没有类型注解,但 TypeScript 仍能在后续代码找出 bug
const names = ["Alice", "Bob", "Eve"];
 
// 基于上下文推断匿名函数参数的类型
names.forEach(function (s) {
  console.log(s.toUppercase());
                 ^^^^^^^^^^^^  
// Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
});
 
// 对于箭头函数,也能够正确推断
names.forEach((s) => {
  console.log(s.toUppercase());
               ^^^^^^^^^^^^^
//Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
});

即便这里没有给参数 s 添加类型注解,TypeScript 也能够基于 forEach 函数的类型,以及对于 name 数组类型的推断,来决定 s 的类型。

这个过程叫作上下文类型推断,由于函数调用时所处的上下文决定了它的参数的类型。

和推断规则相似,你不须要刻意学习这个过程是怎么发生的,但明确这个过程确实会发生以后,你天然就清楚何时不须要添加类型注解了。稍后咱们会看到更多的例子,了解到一个值所处的上下文是如何影响它的类型的。

对象类型

除了原始类型以外,最多见的类型就是对象类型了。它指的是任意包含属性的 JavaScript 值。要定义一个对象类型,只须要简单地列举它的属性和类型便可。

举个例子,下面是一个接受对象类型做为参数的函数:

// 参数的类型注解是一个对象类型
function printCoord(pt: { x: number; y: number }) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

这里,咱们为参数添加的类型注解是一个包含 xy 两个属性(类型都是 number)的对象。你可使用 , 或者 ; 分隔每一个属性,最后一个属性的分隔符可加可不加。

每一个属性的类型部分一样也是可选的,若是你没有指定类型,那么它会采用 any 类型。

可选属性

对象类型也能够指定某些或者所有属性是可选的。你只须要在对应的属性名后面添加一个 ? 便可:

function printName(obj: { first: string; last?: string }) {
  // ...
}
// 下面两种写法都行
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

在 JavaScript 中,若是你访问了一个不存在的属性,你将会获得 undefined 而不是一个运行时错误。所以,在你读取一个可选属性的时候,你须要在使用它以前检查它是否为 undefined

function printName(obj: { first: string; last?: string }) {
  // 若是 obj.last 没有对应的值,可能会报错!
  console.log(obj.last.toUpperCase());
// Object is possibly 'undefined'.
  if (obj.last !== undefined) {
    // OK
    console.log(obj.last.toUpperCase());
  }
 
  // 下面是使用现代 JavaScript 语法的另外一种安全写法:
  console.log(obj.last?.toUpperCase());
}

联合类型

TypeScript 的类型系统容许你基于既有的类型使用大量的运算符建立新的类型。既然咱们已经知道了如何编写基本的类型,是时候开始用一种有趣的方式将它们结合起来了。

定义一个联合类型

第一种结合类型的方式就是使用联合类型。联合类型由两个或者两个以上的类型组成,它表明的是能够取这些类型中任意一种类型的值。每一种类型称为联合类型的成员。

咱们来编写一个能够处理字符串或者数字的函数:

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}
// OK
printId(101);
// OK
printId("202");
// 报错
printId({ myID: 22342 });
// Argument of type '{ myID: number; }' is not assignable to parameter of type 'string | number'.
//  Type '{ myID: number; }' is not assignable to type 'number'.

使用联合类型

提供一个匹配联合类型的值很是简单 —— 只须要提供一个与联合类型某个成员相匹配的类型便可。若是有一个值是联合类型,你要怎么使用它呢?

TypeScript 会限制你对联合类型能够采起的操做,仅当该操做对于联合类型的每一个成员都生效的时候,操做才会生效。举个例子,若是你有联合类型 string | number,那么你将没法使用只能由 string 调用的方法:

function printId(id: number | string) {
  console.log(id.toUpperCase());
// Property 'toUpperCase' does not exist on type 'string | number'.
//  Property 'toUpperCase' does not exist on type 'number'.
}

解决方案就是在代码中去收窄联合类型,这和没有使用类型注解的 JavaScript 的作法同样。当 TypeScript 可以基于代码结构推断出一个更具体的类型时,就会发生收窄。

举个例子,TypeScript 知道只有 string 类型的值使用 typeof 以后会返回 "string"

function printId(id: number | string) {
  if (typeof id === "string") {
    // 在这个分支中,id 的类型是 string
    console.log(id.toUpperCase());
  } else {
    // 这里,id 的类型是 number
    console.log(id);
  }
}

另外一个例子是使用相似 Array.isArray 这样的函数:

function welcomePeople(x: string[] | string) {
  if (Array.isArray(x)) {
    // 这里,x 是 string[]
    console.log("Hello, " + x.join(" and "));
  } else {
    // 这里,x 是 string
    console.log("Welcome lone traveler " + x);
  }
}

注意,在 else 分支中,咱们不须要作额外的判断 —— 若是 x 不是 string[],那它就必定是 string

有时候,联合类型的全部成员可能存在共性。举个例子,数组和字符串都有 slice 方法。若是一个联合类型的每一个成员都有一个公共的属性,那么你能够不须要进行收窄,直接使用该属性:

// 返回值会被推断为 number[] | string
function getFirstThree(x: number[] | string) {
  return x.slice(0, 3);
}
联合类型的各个类型的属性存在交集,你可能会以为有点困惑。实际上这并不让人意外,“联合”这个名词来自于类型理论。联合类型 number | string 是由每一个类型的值的联合组成的。假设给定两个集合以及各自对应的事实,那么只有事实的交集能够应用于集合的交集自己。举个例子,有一个屋子的人都很高,并且戴帽子,另外一个屋子的人都是西班牙人,并且也戴帽子,那么两个屋子的人放到一块儿,咱们能够获得的惟一事实就是:每一个人确定都戴着帽子。

类型别名

目前为止,咱们都是在类型注解中直接使用对象类型或者联合类型的。这很方便,但一般状况下,咱们更但愿经过一个单独的名字屡次引用某个类型。

类型别名就是用来作这个的 —— 它能够做为指代任意一种类型的名字。类型别名的语法以下:

type Point = {
  x: number;
  y: number;
};
 
// 效果和以前的例子彻底同样
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

不止是对象类型,你能够给任意一种类型使用类型别名。举个例子,你能够命名联合类型:

type ID = number | string;

注意,别名就只是别名而已 —— 你不能使用类型别名去建立同一类型的不一样“版本”。当你使用别名的时候,效果就和你直接编写实际的类型同样。换句话说,代码看起来是不合法的,但在 TypeScript 里这是没问题的,无论是别名仍是实际类型,都指向同一个类型:

type UserInputSanitizedString = string;
 
function sanitizeInput(str: string): UserInputSanitizedString {
  return sanitize(str);
}
 
// 建立一个输入
let userInput = sanitizeInput(getInput());
 
// 能够从新给它赋值一个字符串
userInput = "new input";

接口

接口声明是另外一种命名对象类型的方式:

interface Point {
  x: number;
  y: number;
}
 
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

就和上面使用类型别名同样,这个例子也能够正常运行,它的效果和直接使用一个匿名对象类型同样。TypeScript 只关心咱们传递给 printCoord 的值的结构 —— 它只关心这个值是否有指望的属性。正是由于这种只关注类型的结构和能力的特色,因此咱们说 TypeScript 是一个结构性的、类型性的类型系统。

类型别名和接口的区别

类型别名和接口很类似,多数状况下你能够任意选择其中一个去使用。接口的全部特性几乎均可以在类型别名中使用。二者关键的区别在于类型别名没法再次“打开”并添加新的属性,而接口老是能够拓展的。

// 接口能够自由拓展
interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear = getBear() 
bear.name
bear.honey

// 类型别名须要经过交集进行拓展
type Animal = {
  name: string
}

type Bear = Animal & { 
  honey: boolean 
}

const bear = getBear();
bear.name;
bear.honey;

// 向既有的接口添加新的属性
interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

// 类型别名一旦建立,就不能再修改了
type Window = {
  title: string
}

type Window = {
  ts: TypeScriptAPI
}

 // Error: Duplicate identifier 'Window'

在稍后的章节中,你会学到更多关于这方面的知识,因此如今还不太理解也不要紧。

  • 在 TypeScript 4.2 版本以前,类型别名的名字可能会出如今报错信息中,有时会代替等效的匿名类型(可能须要,也可能不须要)。而接口的名字则始终出如今报错信息中
  • 类型别名没法进行声明合并,但接口能够
  • 接口只能用于声明对象的形状,没法为原始类型命名
  • 在报错信息中,接口的名字将始终以原始形式出现,但只限于它们做为名字被使用的时候

大多数状况下,你能够根据我的喜爱选择其中一种使用,TypeScript 也会告诉你它是否须要使用另外一种声明方式。若是你喜欢启发式,那你可使用接口,等到须要使用其余特性的时候,再使用类型别名。

类型断言

有时候,你会比 TypeScript 更了解某个值的类型。

举个例子,若是你使用 document.getElementById,那么 TypeScript 只知道这个调用会返回某个 HTMLElement,但你却知道你的页面始终存在一个给定 ID 的 HTMLCanvasElement

在这种状况下,你可使用类型断言去指定一个更具体的类型:

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

就像类型注解同样,编译器最终会移除类型断言,保证它不会影响到代码的运行时行为。

你也可使用等效的尖括号语法(前提是代码不是在一个 .tsx 文件中):

const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");
记住:由于编译期间会移除类型断言,因此不存在和类型断言相关的运行时检查。即便类型断言是错误的,也不会抛出异常或者产生 null

TypeScript 只容许断言以后的类型比以前的类型更具体或者更不具体。这个规则能够防止出现下面这样“不可能存在的”强制类型转换:

const x = "hello" as number;
// 类型 "string" 到类型 "number" 的转换多是错误的,由于两种类型不能充分重叠。若是这是有意的,请先将表达式转换为 "unknown"

有时候,这个规则可能过于保守了,会阻碍咱们进行更复杂的有效转换操做。若是是这样,那么可使用两步断言,先断言为 any(或者 unknown,稍后再介绍),再断言为指望的类型:

const a = (expr as any) as T;

字面量类型

除了通用的 stringnumber 类型以外,咱们也能够将具体的字符串或者数字看做一种类型。

怎么理解呢?其实咱们只须要考虑 JavaScript 声明变量的不一样方式便可。varlet 声明的变量均可以修改,但 const 不行。这种特色反映在 TypeScript 是如何为字面量建立类型的。

let changingString = "Hello World";
changingString = "Olá Mundo";
// 由于 changingString 能够表示任意可能的字符串,这是 TypeScript 
// 在类型系统中描述它的方式
changingString;
^^^^^^^^^^^^^^
    // let changingString: string
      
let changingString: string
 
const constantString = "Hello World";
// 由于 constantString 只能表示一种可能的字符串,因此它有一个
// 字面量类型的表示形式
constantString;
^^^^^^^^^^^^^^^
    // const constantString: "Hello World"
      

只是单独使用的话,字面量类型的用处并不大:

let x: "hello" = "hello";
// OK
x = "hello";
// ...
x = "howdy";
// Type '"howdy"' is not assignable to type '"hello"'.

上面的例子中,变量只有一个可能的值,这是没有意义的!

可是经过将字面量类型结合为联合类型,你能够表示一个更有实用价值的概念 —— 举个例子,声明一个只接受某些固定值的函数:

function printText(s: string, alignment: "left" | "right" | "center") {
  // ...
}
printText("Hello, world", "left");
printText("G'day, mate", "centre");
                        ^^^^^^        
// Argument of type '"centre"' is not assignable to parameter of type '"left" | "right" | "center"'.

数值型字面量类型也同理:

function compare(a: string, b: string): -1 | 0 | 1 {
  return a === b ? 0 : a > b ? 1 : -1;
}

固然,联合类型中也能够包含非字面量类型:

interface Options {
  width: number;
}
function configure(x: Options | "auto") {
  // ...
}
configure({ width: 100 });
configure("auto");
configure("automatic");
          ^^^^^^^^^^    
// Argument of type '"automatic"' is not assignable to parameter of type 'Options | "auto"'.

还有一种字面量类型:布尔值字面量。只有两种布尔值字面量类型,也就是 truefalseboolean 类型自己其实就是联合类型 true | false 的一个别名。

字面量推断

当你初始化一个变量为某个对象的时候,TypeScript 会假定该对象的属性稍后可能会发生变化。好比下面的代码:

const obj = { counter: 0 };
if (someCondition) {
  obj.counter = 1;
}

TypeScript 不以为将以前值为 0 的属性赋值为 1 是一个错误。另外一种理解角度是,obj.counter 必须是 number 类型,而不是 0,由于类型能够用来决定读写行为。

对于字符串也同理:

const req = { url: "https://example.com", method: "GET" };
handleRequest(req.url, req.method);
// Argument of type 'string' is not assignable to parameter of type '"GET" | "POST"'.

(译者注:这里的 handleRequest 签名为 (url: string, method: "GET" | "POST") => void)

在上面的例子中,req.method 被推断为 string,而不是 "GET"。由于在建立 req 和调用 handleRequest 之间可能会执行其它代码,req.method 也许会被赋值为相似 "GUESS" 这样的字符串,所以 TypeScript 会认为这样的代码是存在错误的。

有两种方式能够解决这个问题:

  1. 经过添加类型断言改变类型的推断结果:

    // 方法一:
    const req = { url: "https://example.com", method: "GET" as "GET" };
    // 方法二:
    handleRequest(req.url, req.method as "GET");

​ 方法一表示“我有意让 req.method 一直采用字面量类型 "GET"”,从而阻止后续将其赋值为其它字符串;方法二表示“出于某种理由,我确信 req.method 的值必定是“GET””。

  1. 你还可使用 as const 将整个对象转化为字面量类型:

    const req = { url: "https://example.com", method: "GET" } as const;
    handleRequest(req.url, req.method);

    as const 后缀和 const 的效果很像,但用于类型系统中。它能够确保对象的全部属性都被赋予了一个字面量类型,而不是采用相似 string 或者 number 这样较为通用的类型。

nullundefined

JavaScript 中有两个原始值用于表示缺乏的或者没有初始化的值:nullundefined

TypeScript 对应地也有两个名字和它们同样的类型。它们的行为取决于你是否启用了 strictNullChecks 选项。

禁用 strictNullChecks

禁用 strictNullChecks 选项以后,你仍然能够正常访问可能为 nullundefined 的值,这两个值也能够被赋值给任何一种类型。这种行为表现和缺乏空值检查的语言(好比 C#、Java)很像。缺乏对这些值的检查多是大量 bug 的来源,在可行的前提下,咱们推荐开发者始终启用 strictNullChecks 选项。

启用 strictNullChecks

启用 strictNullChecks 选项以后,当一个值是 null 或者 undefined 的时候,你须要在使用该值的方法或者属性以前首先对其进行检查。就和使用可选属性以前先检查它是否为 undefined 同样,咱们可使用类型收窄去检查某个值是否可能为 null

function doSomething(x: string | null) {
  if (x === null) {
    // do nothing
  } else {
    console.log("Hello, " + x.toUpperCase());
  }
}

非空值断言操做符(! 后缀)

TypeScript 也提供了一种特殊的语法,能够在不显式进行检查的状况下,将 nullundefined 从类型中排除。在任意表达式后面添加后缀 !,能够有效地断言某个值不可能为 null 或者 undefined

function liveDangerously(x?: number | null) {
  // 不会报错
  console.log(x!.toFixed());
}

和其它的类型断言同样,非空值断言也不会改变代码的运行时行为,因此切记:仅在你肯定某个值不可能为 null 或者 undefined 的时候,才去使用 !

枚举

枚举是 TypeScript 添加到 JavaScript 中的一项特性。它容许描述一个值,该值能够是一组可能的命名常量中的一个。与大多数的 TypeScript 特性不一样,枚举不是在类型层面添加到 JavaScript 中的,而是添加到语言自己和它的运行时中。正因如此,你应该了解这个特性的存在,但除非你肯定,不然你可能须要推迟使用它。你能够在枚举引用页面中了解到有关枚举的更多信息。

其它不常见的原始类型

值得一提的是,JavaScript 的其它原始类型在类型系统中也有对应的表示形式。不过在这里咱们不会深刻进行探讨。

BigInt

ES2020 引入了 BigInt,用于表示 JavaScript 中很是大的整数:

// 经过 BigInt 函数建立大整数
const oneHundred: bigint = BigInt(100);
 
// 经过字面量语法建立大整数
const anotherHundred: bigint = 100n;

你能够在 TypeScript 3.2 发布日志 中了解到关于 BigInt 的更多信息。

symbol

在 JavaScript 中,咱们能够经过函数 Symbol() 建立一个全局惟一的引用:

const firstName = Symbol("name");
const secondName = Symbol("name");
 
if (firstName === secondName) {
// 此条件将始终返回 "false",由于类型 "typeof firstName" 和 "typeof secondName" 没有重叠。    
}

你能够在 Symbol 引用页面 了解到更多相关信息。