TypeScript 语言基础 on ClearSec Wiki

TypeScript 的变量与变量类型

Mon, 01 Jan 0001 00:00:00 +0000

TypeScript 的变量与变量类型

TypeScript 最大的特点就是引入了类型系统，这样就可以在编译为 JavaScript 代码之前由编译器进行类型检查。在这样的条件下，TypeScript 中的变量在声明的时候就可以指定类型，编译器在将 TypeScript 代码编译为 JavaScript 代码的时候会进行类型检查，若有不符合类型声明的情况则会报错：

const foo = (name: string): void => {
 console.log("Hello, " + name);
}

foo(2); // Error!

变量类型

由于 TypeScript 是 JavaScript 的超集，所以其基础变量类型依然和 JavaScript 一致。

声明变量时可以在变量后面标注，也可以根据初始值自动推断，但如果声明变量时不赋初始值，则必须添加类型标注，否则在使用时会报错（即自动推断该变量为 undefined 的类型，因此不能赋其他值）。

常用的基础类型包括：

let isDone: boolean = false;
let clickCnt: number = 6;
let greeting: string = "Hello!";

原始值

布尔类型（boolean）：
```
let sast_yyds: boolean = true;
```
null 类型：
```
let null_value: null = null;
```

undefined 类型：

let undefined_value: undefined = undefined;

数字类型（number）：
```
let sast_rank: number = 1;
```
bigint 类型（ES 2020 新增）：
```
let a: bigint = 9007199254740991n;
```

字符串类型（string）：

let course: string = 'TypeScript introduction';

符号类型（symbol，ES 6 新增）：
```
let sym: symbol = Symbol('SAST');
```

尽管 TypeScript 会尝试阻止你这么做，但 JavaScript 是动态类型语言，你可以将一个变量赋为其他类型值。
尽管 TypeScript 更加会尝试阻止你，但 JavaScript 是弱类型语言，要小心随处可能存在的隐式类型转换，这可能会引起很难理解的行为，关于这一现象的详细解释可以参考 JavaScript 的变量与变量类型中的“JavaScript 的魔法”一节。

TypeScript 的函数

Mon, 01 Jan 0001 00:00:00 +0000

TypeScript 的函数

函数声明和调用

我们一般把 TypeScript 的函数也认为是一种变量，因为在 TypeScript 之中，函数的行为很大程度上和变量类似。

TypeScript 语言之中声明一个函数的语法为：

function sum(x: number, y: number): number {
 return x + y;
}

这里要注意的是，编译器会尝试推断函数返回值，但不会尝试从函数实现中推断参数类型，因此参数列表的类型标注是必不可少的。

也可以按照声明变量的方式：

let sum = function (x: number, y: number): number {
 return x + y;
}

这里 sum 作为一个变量，它的类型并非前文所提过的原始值，因此也是一个对象，它的构造函数是 Function，而它的类型可以标注为：

let sum: (x: number, y: number) => number = function (x, y) {
 return x + y;
}

可以看到这种写法可以使编译器推断出参数列表和返回值的类型。

函数调用的语法和大多数语言相同：

console.log(sum(1, 2)); // => 3

TypeScript 函数的参数列表

实际上 TypeScript 在运行时不会检查你函数调用是不是符合参数列表（尽管在编译器会尝试进行静态检查，但是如果你使用 any 或其他一些方法传入其他类型参数，仍然会继续运行），实际上 JavaScript 还不检查你函数调用的时候传入的参数个数（但 TypeScript 会阻止传入个数错误的参数）。

在 TypeScript 中可以通过将参数标为可选或提供默认值来允许不同长度的传入参数：

function sum(x: number, y: number = 1, z?: number): number {
 return x + y + (z ?? 0); // 这里 y 不可能为空值，但 z 可能
}

console.log(sum(1)); // => 1 + 1 + (undefined ?? 0) = 2
console.log(sum(1, 0)); // => 1 + 0 + (undefined ?? 0) = 1
console.log(sum(1, 2, 3)); // => 1 + 2 + (3 ?? 0) = 6

需要注意的是可选参数或提供默认值的参数必须位于其他参数之后，考虑到 TypeScript 实际上不会检查传入参数的类型，为了不产生混淆，这种限制是必要的。

TypeScript 的面向对象

Mon, 01 Jan 0001 00:00:00 +0000

TypeScript 的面向对象

类语法

一般而言，使用类语法足以应对常见的各种需求，这种写法在很大程度上与 C++ 是类似的。TypeScript 语言之中的类允许声明类成员和方法的访问权限。这里我们编写一个简易的复数类作为演示，内部已经包含了构造函数、定义成员方法和静态方法等：

class Complex {
 // 这部分在 JavaScript 中是不存在的，JavaScript 只要任意访问 this.propertyName 即可
 private real: number;
 private imaginary: number;

 constructor(_real: number, _imaginary: number) {
 this.real = _real;
 this.imaginary = _imaginary; // Declare members & initialize
 }

 print() {
 console.log(`${this.real} ${this.imaginary >= 0 ? "+" : "-"} ${Math.abs(this.imaginary)} i`);
 }

 static printInfo() {
 console.log("This is a complex class.");
 }
}

let com = new Complex(1, 2);
com.print(); // "1 + 2 i"
Complex.printInfo(); // "This is a complex class."

有一些细节需要注意：

类方法内使用类成员的时候必须使用 this 调用；
JavaScript 的所有类成员和类方法均是公有的，JavaScript 不具有访问权限修饰符，尽管你可以看到我们使用 TypeScript 时标注了 private 属性，但这只是在编译时检查你的代码有没有不适当的访问，编译后如果你用 JavaScript 调用，仍然可以直接访问这些属性。

类继承使用关键字 extends，需要注意的是子类的构造函数必须手动使用 super 调用父类构造函数（否则无法使用 this 变量），对于已经被重写的父类方法，也可以使用 super 关键字调用：

TypeScript 的复杂类型

Mon, 01 Jan 0001 00:00:00 +0000

TypeScript 的复杂类型

泛型

与其他一些支持泛型的语言不同，TypeScript 的泛型并不会为每一种类型生成一份代码，只是检查是否每一种可能的类型都可以兼容，在运行中仍然使用同一份代码。

可以在声明函数、类、接口和类型时声明泛型：

function identity<Type>(arg: Type): Type {
 return arg;
}

const identity = <Type>(arg: Type): Type => arg;

class GenericNumber<NumType> {
 zeroValue: NumType;
 add: (x: NumType, y: NumType) => NumType;
}

interface Request<ReqBody, ResBody> {
 request: ReqBody;
 response: ResBody;
}

type MaybeArray<Value> = Value | Value[];

可以通过以下方式使用前面定义的泛型：

identity<number>(1);

const num = new GenericNumber<number>();

const req: Request<{ action: string }, { result: string }> = {
 request: {
 action: 'update system',
 },
 response: {
 result: 'succeeded',
 },
};

let nums: MaybeArray<number> = 0;
nums = [0, 1, 2];

可以为泛型添加限制和默认值，也可以由编译器推断泛型类型：

function identity<Type = number>(arg: Type): Type {
 return arg;
}

identity(1);

function identity<Type extends { data: string }>(arg: Type): string {
 return arg.data;
}

identity({ data: '' }); // inferred Type = { data: string }

需要注意的是泛型只能使用类型作为参数，如果需要某个值的类型，可以使用 typeof。

`keyof` 和 `typeof` 关键字

typeof 除了可以作为运算符获取变量类型以外，用作类型标注时，可以获取变量的具体类型（而非作为运算符时的有限种类）：

const someObj = {
 foo: 1,
 bar: '2',
};

// inferred arg: { foo: number; bar: string }
function f(arg: typeof someObj) {
 /* do something */
}

而 keyof 可以获取类型的键的类型（作为枚举）：

TypeScript 语言基础 on ClearSec Wiki

TypeScript 的变量与变量类型

TypeScript 的变量与变量类型

变量类型

原始值

TypeScript 的函数

TypeScript 的函数

函数声明和调用

TypeScript 函数的参数列表

TypeScript 的面向对象

TypeScript 的面向对象

类语法

TypeScript 的复杂类型

TypeScript 的复杂类型

泛型

keyof 和 typeof 关键字

`keyof` 和 `typeof` 关键字