欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

理解 TypeScript 的静态类型

程序员文章站 2022-07-12 15:51:17
...

这篇博文快速介绍 TypeScript 静态类型的标注。

你将学习什么

阅读本文后,您应该能够理解以下代码的含义。

interface Array<T> {
  concat(...items: Array<T[] | T>): T[];
  reduce<U>(
    callback: (state: U, element: T, index: number, array: T[]) => U,
    firstState?: U): U;
  ···
}
复制代码

如果你认为这很神秘,那么我同意你的看法。 但是(正如我希望证明的),这个标注相对来说容易学习。 一旦你理解了它,它会告诉你,一个直接,精确和全面的总结这些代码行为。 无需阅读英文长篇描述。

尝试一下代码示例

TypeScript 有一个在线编译。 为了获得最全面的检查,应该打开 “option” 菜单中的所有内容。 这相当于在 --strict 模式下运行TypeScript编译器。

设置全部的类型检查

我总是使用 TypeScript 以最全面的设置 --strict。 没有它,程序的编写会变得相对容易些,但是你也会失去静态类型检查的许多好处。 目前,此设置启用以下子设置:

  • --noImplicitAny: 如果 TypeScript 无法推断出某种类型,说明你没有启用这个选项。 这主要适用于函数和方法的参数:使用此设置,你就必须标注它们的类型。
  • --noImplicitThis: 如果这个类型不明确,提示警告。
  • --alwaysStrict: 尽可能使用 JavaScript 严格模式。
  • --strictNullChecks: null 不是任何类型的一部分(除了它自己的类型,null),并且如果它是可接受的值,则必须明确给值。
  • --strictFunctionTypes: 强化函数类型检查。
  • --strictPropertyInitialization: 如果某个属性的值未定义,那么它必须在构造函数中初始化。

更多信息:TypeScript手册中的“编译器选项”一章。

类型

在这篇博文中,类型是一组值。 JavaScript 语言(不是TypeScript!)有7种类型:

  • Undefined: 元素为未定义的集合。
  • Null: 元素为 null 的集合。
  • Boolean: 元素为 false 或 true 的集合。
  • Number: 元素为数字的集合。
  • String: 元素为字符串的集合。
  • Symbol: 元素为 symbols 的集合。
  • Object: 元素为对象(包括函数和数组)的集合.

所有这些类型都是动态的:您可以在运行时使用它们。

TypeScript 在 JavaScript 基础上增加了一层:静态类型。它只存在于编译的时候或者源代码类型检查的时候。每一个有静态类型的储存(变量或者属性)地方都可以预知它的值。类型检查确保实现类型推断,不用运行代码就能进行静态类型检查。举个例子,如果函数f(x)的参数x具有静态数字类型,则函数调用f('abc')是非法的,因为参数'abc'是错误的静态类型参数。

类型标注

类型标注在变量的冒号后面。冒号后面的静态类型标注描述了这个变量可以有什么值。下面一个例子表示这个变量只能储存数字类型。

let x: number;
复制代码

你可能想知道如果 x 没有被初始化的时候是不是可以通过静态类型检查。对于这个问题, TypeScript 在给它赋值之前不会让你读取 x 。

类型推断

在 TypeScript 中,即使所有变量你都写静态类型,但你不需要全部明确写它的静态类型。 TypeScript 经常可以推断出它。 例如,如果你写

let x = 123;
复制代码

然后TypeScript推断x具有数字静态类型。

描述类型

类型表达式在类型标注的冒号之后出现。 这些范围从简单到复杂,创建如下

合法的类型表达式有基本类型:

  • JavaScript 动态类型的静态类型:undefined,null,boolean,number,string,symbol,object
  • TypeScript 特定类型:any(所有值的类型)等

注意,“未定义为值”和“未定义为类型”都被定义为未定义。 根据你使用它的地方,它作为一个值或者一个类型。 null也是一样。

可以通过类型运算符组合基本类型来创建更多类型表达式,类型运算符与运算符 union(∪) 和 intersection(∩) 组合类似。

接下来解释 TypeScript 提供的一些类型运算符。

数组作为列表

有两种方法可以表示 Array arr 其元素都是数字的列表:

let arr: number[] = [];
let arr: Array<number> = [];
复制代码

通常情况下,如果有给值,TypeScript可以推断变量的类型。 在这种情况下,你实际上必须明确标注类型,因为对于空数组,它无法确定元素的类型。

稍后,讲解尖括号表示法(Array)。

数组作为元组

如果您在数组中存储两个点,那么你将该数组用作元组。 这看起来如下:

let point: [number, number] = [7, 5];
复制代码

在这种情况下,不需要类型注释。 元组的另一个例子是 Object.entries(obj) 的结果:对于 obj 的每个属性都有一个 [key,value] 对的数组。

> Object.entries({a:1, b:2})
[ [ 'a', 1 ], [ 'b', 2 ] ]
复制代码

Object.entries() 的类型是:

Array<[string, any]>
复制代码

函数类型

这是一个函数类型的例子:

(num: number) => string
复制代码

该类型接受单个数字类型参数,和返回字符串类型的值。 让我们在类型注释中使用这个类型(字符串在这里用作函数):

const func: (num: number) => string = String;
复制代码

同样,我们通常不会在这里使用类型注释,因为 TypeScript 知道 String 的类型,因此可以推断出 func 的类型。 下面的代码是一个更实用的例子:

function stringify123(callback: (num: number) => string) {
  return callback(123);
}
复制代码

我们使用函数类型来描述 stringify123() 的回调函数。 由于此类型注释,TypeScript 拒绝以下函数调用。

f(String);
复制代码

但它接受以下函数调用:

f(Number);
复制代码

(原文在这可能顺序写反了)

函数结果类型声明

标注函数的所有参数类型是一种很好的实践。 你也可以指定结果类型(但 TypeScript 很适合推断它):

function stringify123(callback: (num: number) => string): string {
  const num = 123;
  return callback(num);
}
复制代码

特殊结果类型 void

void 是函数结果的特殊类型:它告诉 TypeScript 函数总是返回 undefined (显式或隐式):

function f1(): void { return undefined } // OK
function f2(): void { } // OK
function f3(): void { return 'abc' } // error
复制代码

可选参数

标识符后面的问号表示该参数是可选的。 例如:

function stringify123(callback?: (num: number) => string) {
  const num = 123;
  if (callback) {
    return callback(num); // (A)
  }
  return String(num);
}
复制代码

如果您在 --strict 模式下运行 TypeScript ,则会在检查回调没有被省略的情况下让你在 A 行中进行函数调用。

参数默认值

TypeScript 支持 ES6参数默认值

function createPoint(x=0, y=0) {
  return [x, y];
}
复制代码

默认值使参数可选。 通常可以省略类型注释,因为 TypeScript 可以推断类型。 例如,它可以推断x和y都具有数字类型。

如果你想添加类型注释,那看起来如下。

function createPoint(x:number = 0, y:number = 0) {
  return [x, y];
}
复制代码

剩余类型

您还可以使用 ES6 rest 运算符来处理 TypeScript 参数定义。 相应参数的类型必须是Array:

function joinNumbers(...nums: number[]): string {
    return nums.join('-');
}
joinNumbers(1, 2, 3); // '1-2-3'
复制代码

联合类型

在JavaScript中,变量常常是几种类型之一。 要描述这些变量,你可以使用联合类型。 例如,在以下代码中,x 的类型为 null 或类型 number :

let x = null;
x = 123;
复制代码

x 的类型可以被描述为 null | number :

let x: null|number = null;
x = 123;
复制代码

类型表达式 s | t 的结果是 类型s 和 t 的集合论联合(正如我们前面所看到的那样,这两个集合)。

让我们重写函数 stringify123() :这一次,我们不希望参数回调是可选的。 应该总是传递该参数。 如果调用者不想提供函数,他们必须显式传递null。 这是实现如下:

function stringify123(
  callback: null | ((num: number) => string)) {
  const num = 123;
  if (callback) { // (A)
    return callback(123); // (B)
  }
  return String(num);
}
复制代码

注意,实际上我们必须检查回调是否是一个函数(A行),然后才能在B行进行函数调用。如果没有检查,TypeScript将报告错误。

? 与 undefined| T

类型T的可选参数? 和类型为 undefined | T 的参数非常相似。 (顺便说一句,对于可选属性也是如此。)

主要区别是可以省略可选参数:

function f1(x?: number) { }
f1(); // OK
f1(undefined); // OK
f1(123); // OK
复制代码

但是你不能省略类型为 undefined| T 的参数:

function f1(x?: number) { }
f1(); // OK
f1(undefined); // OK
f1(123); // OK
复制代码

在类型中,通常不包含 null 和 undefined 值

在许多编程语言中, null 是所有类型的一部分。 例如,在 java 中,只要参数的类型是 String ,就可以传递 null 并且 Java 不会报错

相比之下,在 TypeScript 中,undefined 和 null 由不同的类型处理。 如果你想跟上述一样,你需要一个类型联合,比如 undefined | number 和 null | number 。

对象类型

与数组类似,对象在 JavaScript 中扮演两个角色( 偶尔混合 和 或更动态 ):

  • 记录:开发时已知的固定数量的属性。 每个属性可以有不同的类型。
  • 字典:在开发时不知道名称的任意数量的属性。 所有属性键(字符串和/或符号)具有相同的类型,属性值也是如此。

我们将在此文中忽略对象作为词典。 另外,无论如何,Maps 对于字典来说通常是更好的选择。

通过 interfaces 描述对象类型作为记录

interfaces 描述对象类型。 例如:

interface Point {
  x: number;
  y: number;
}
复制代码

TypeScript的类型系统的一大优点是它是结构化的,而不是字面化。 也就是说, interface 匹配具有适当结构的所有对象:

function pointToString(p: Point) {
  return `(${p.x}, ${p.y})`;
}
pointToString({x: 5, y: 7}); // '(5, 7)'
复制代码

相比之下,Java的类型系统需要类来实现接口。

可选属性

如果一个属性可以被省略,你在变量后面加一个问号:

interface Person {
  name: string;
  company?: string;
}
复制代码

函数

Interfaces 也可包含函数:

interface Point {
  x: number;
  y: number;
  distance(other: Point): number;
}
复制代码

类型变量和泛型类型

使用静态类型,有两个级别:

  • 对象级别
  • 元类型级别

相似于

  • 对象储存正常变量
  • 描述类型的变量,也是值类型的变量

正常变量通过 const,let 等引入。 类型变量通过尖括号(<>)引入。 例如,以下代码包含通过引入的类型变量T.

interface Stack<T> {
  push(x: T): void;
  pop(): T;
}
复制代码

你可以看到类型 参数T 在 Stack中 出现两次。 所以这个界面可以直观地理解如下:

  • Stack 是一堆所有具有给定 类型T 的值。每当提到 Stack 时,您必须填写T. 接下来我们将看到如何。
  • push 函数 接受 T类型参数
  • pop 函数 返回 T类型值

如果你使用 Stack ,你就需要给定 T的值。 以下代码显示了一个虚接口 Stack ,其唯一目的是匹配接口。

const dummyStack: Stack<number> = {
  push(x: number) {},
  pop() { return 123 },
};
复制代码

示例:Maps

TypeScript 定义 Map 类型。例如:

const myMap: Map<boolean,string> = new Map([
  [false, 'no'],
  [true, 'yes'],
]);
复制代码

泛型函数

函数(和方法)也可以引入类型变量:

function id<T>(x: T): T {
  return x;
}
复制代码

使用如下

id<number>(123);
复制代码

由于类型推理,可以省略类型参数

id(123);
复制代码

类型参数的传递

function fillArray<T>(len: number, elem: T) {
  return new Array<T>(len).fill(elem);
}
复制代码

不必显式指定 Array 的类型T - 它是从参数 elem 推断出来的:

const arr = fillArray(3, '*');
  // Inferred type: string[]
复制代码

结论

让我们用我们所学的知识来理解我们之前看到的那段代码:

interface Array<T> {
  concat(...items: Array<T[] | T>): T[];
  reduce<U>(
    callback: (state: U, element: T, index: number, array: T[]) => U,
    firstState?: U): U;
  ···
}
复制代码

这是一个数组的 interface ,其元素的类型为 T ,我们必须在使用此 interface 时填写它们:

方法 .concat() 有零个或更多参数(通过剩余参数操作符)。他们中的每个函数有类型 T[] 或 T 。因此,它可能是类型T 的数组或者是单个 T 的值。

方法 .reduce() 引进了它自己的类型变量,U 。 U 表示以下实体全都具有相同类型(不需要指定,它会自动推断):

  • 回调函数里的 state 参数
  • 回调函数里的结果
  • 方法 .reduce() 的可选参数 firstState
  • .reduce() 的结果

回调函数也获取一个参数 element ,其类型与数组元素的 类型T 相同,参数 index 是数字,参数 array 是 T值 。

进一步阅读

  • 书 (在线免费阅读): “Exploring ES6
  • ECMAScript Language Types” 在 ECMAScript 规范.
  • TypeScript Handbook”: 一本写的很好解释了 TypeScript 支持的多种类型及类型操作。
  • TypeScript 仓库里有完整 ECMAScript 标准库的类型定义。练习类型标注的简单方法是阅读它们。

本文翻译自原文 - Understanding TypeScript’s type notation -> star

由于本人水平有限,错误之处在所难免,敬请指正!

转载请注明出处,保留原文链接以及作者信息。

上一篇: Json理解

下一篇: json遍历