本文最后更新于：19 小时前

TypeScript语法、类型声明文件、高级语法……

TypeScript入门

TypeScript官方文档更适合作为参考文档去查阅语法，并不适合新手去学习。想要快速有效地了解TypeScript，推荐阅读以下两个非常不错的文档！

一、TypeScript是什么

TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。
TypeScript 是一门静态类型、弱类型的语言。
TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。
TypeScript 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
TypeScript 拥有很多编译选项，类型检查的严格程度由你决定。
TypeScript 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
TypeScript 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。
TypeScript 拥有活跃的社区，大多数常用的第三方库都提供了类型声明。
TypeScript 与标准同步发展，符合最新的 ECMAScript 标准（stage 3）。

详情请看：什么是 TypeScript · TypeScript 入门教程 (xcatliu.com)

二、基本类型

这里的基本类型，指在 JavaScript 中也存在的类型

基础类型

let isDone: boolean = false;	// 布尔值
let decLiteral: number = 6;		// number
let name: string = "bob";		// string
let u: undefined = undefined;	// undefined
let n: null = null;			   // null

数组类型，有两种声明方式：

第一种，类型 []

1	`let list: number[] = [1, 2, 3];`

第二种， Array<elemType>数组泛型的形式

1	`let list: Array<number> = [1, 2, 3];`

如果数组中存在多种不同类型时，使用 any

1	`let list: any[] = [1, true, "free"];`

三、特殊类型

这里的特殊类型，指 TypeScript 特有的，在 JavaScript 中不存在的类型

1. 任意值any

如果是一个普通类型，在赋值过程中改变类型是不被允许的：但如果是 any 类型，则允许被赋值为任意类型。

1 2	`let myFavoriteNumber: any = 'seven'; myFavoriteNumber = 7;`

在任意值上可以访问任何属性、调用任何方法，而不会报错（这在其它类型上是不允许的）

1
2
3

let anyThing: any = 'Tom';
console.log(anyThing.myName);
anyThing.setName('Jerry');

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：

1
2
3

let something;
// 等价于
let something: any;

如果一个数组中，包含了不同的类型

1 2	`// 数组中包含了不同的类型 let list: any[] = [1, true, "free"];`

2. 元组Tuple

// Tuple 元组
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error

3. 枚举enum

使用枚举，可以定义一些常量。被枚举的值只能是以下两种：数字、字符串

// 枚举字符串
enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

// 枚举数字
enum Response {
    No = 0,
    Yes = 1,
}

枚举数字时，具有「自增长」的特点

enum Response {
    No = 0,
    Yes			// 此时Yes等于1
}

enum Response {
    No = 1,
    Yes 		// 此时Yes等于2
}

以下是枚举的用法

// 定义枚举
enum Response {
    No = 0,
    Yes = 1,
}

// 下面是使用
function respond(recipient: string, message: Response): void {
    // ...
}
respond("Princess Caroline", Response.Yes)	// 可以通过枚举的属性访问
respond("Princess Caroline", Response[0])		// 也可以通过枚举的索引访问

4. never

// never 常用来表示那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

四、高级类型

1. 联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。联合类型使用 | 分隔每个类型，如下

1
2
3

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

function getLength(something: string | number): number {
    return something.length;
}
// 报错

function getString(something: string | number): string {
    return something.toString();
}
// 没有问题

联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型：

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错

2. 索引类型

五、接口（对象的类型）

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。接口一般首字母大写

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom'
};
// 报错，变量的属性必须与接口一致
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
// 报错，变量的属性必须与接口一致

后面带个?，表示属性可选

interface SquareConfig {
  color?: string;
  width?: number;
}

前面加一个readonly，表示只读属性

interface Point {
    readonly x: number;
    readonly y: number;
}

额外的属性检查，如果定义对象时传入了额外的（没有定义在接口中的）属性，会报错

interface SquareConfig {
    color?: string;
    width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
}

let mySquare = createSquare({ colour: "red", width: 100 });
// 传入colour，会被检测出来，并报错。这对于发现bug很有帮助，因为在一堆代码中肉眼很难看出colour和color之间的区别

六、类型推论 & 断言 & 兼容

1. 类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型

let myFavoriteNumber = 'seven';
// 实际上等价于let myFavoriteNumber: string = 'seven';
// string是TS自动根据 值 推导出来的

myFavoriteNumber = 7;	// 报错，Type 'number' is not assignable to type 'string'.

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

1
2
3

let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

2. 类型断言

类型断言好比其它语言里的类型转换，有两种写法：“尖括号” 或者 as

1
2
3

let strLength: number = (<string>someValue).length;		// 尖括号写法

let strLength: number = (someValue as string).length	// as语法

注意：在JSX中只能使用as这种断言语法

3. 类型兼容

原始类型 和 对象类型 的类型兼容，“字段多” 赋值给 “字段少” 是正确的

interface Named {
    name: string;
}

let x: Named;
let y = { name: 'Alice', location: 'Seattle' };
x = y;		// 正确，因为 x 需要的字段 y 都有
y = x;		// 报错，因为 y 需要的一些字段 x 没有，Property 'location' is missing in type 'Named' but required in type '{ name: string; location: string; }'

函数的类型兼容，

从参数的角度，“参数少的” 赋值给 “参数多的” 是正确的

let x = (a: number) => 0;
let y = (b: number, s: string) => 0;

y = x; // 正确，因为函数x的参数在函数y中都有，想一想js允许忽略参数的例子，Array.prototype.map回调函数
x = y; // 错误

从返回值的角度，”返回值多的“ 赋值给 ”返回值少的“ 是正确的

let x = () => ({name: 'Alice'});
let y = () => ({name: 'Alice', location: 'Seattle'});

x = y; // 正确，x需要返回的东西，在y的返回值里面都有，类比于对象类型的兼容
y = x; // 错误

三、函数类型声明

声明函数类型

同时声明参数列表和返回值的类型

1
2
3

interface SearchFunc {
  (source: string, subString: string): boolean;
}

使用接口

let mySearch: SearchFunc = function(source: string, subString: string): boolean {
  let result = source.search(subString);
  return result > -1;
}

书写完整的函数类型，例子：

这里是变量和函数本身都声明了类型

let myAdd: (baseValue: number, increment: number) => number =
    function(x: number, y: number): number { return x + y; };
// myAdd 是一个变量，函数赋给了这个变量
// (baseValue: number, increment: number) => number 是声明函数类型
// 参数只需要类型匹配即可，名字可以不同
// 返回值类型必须声明，即使是void

单独的函数，声明类型是下面这样的

1
2
3

function(x: number, y: number): number { return x + y; };
// x: number, y: number 指定了参数类型
// number 指定返回值类型

上面那个例子，可以只在变量一侧声明类型

1 2	`let myAdd: (baseValue: number, increment: number) => number = function(x, y) {return x+y}`

也可以只在函数一侧声明类型

1	`let myAdd = function(x: number, y: number): number { return x + y; };`

上面这两种都是可以的！

传递给一个函数的参数个数必须与函数期望的参数个数一致，不能多、也不能少（可选参数或默认参数除外）

// 可选参数，必须放在常规参数后面
function buildName(lastName: string, firstName?: string){...}

// 如果要使用默认参数，可以传入undefined
function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}
let result1 = buildName("Bob");
let result2 = buildName("Bob", undefined);	
let result3 = buildName("Bob", "Adams", "Sr.");	// 报错，参数个数不一致

如果你并不知道会有多少参数传递进来，可以使用 剩余参数

1	`function buildName(firstName: string, ...restOfName: string[]) {...}`

四、泛型

使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据.

比如有一个需求：函数接受、返回同一种类型，但是可以是任意类型，实现如下：

function identity<T>(arg: T): T {
    return arg;
}
// 这 T 就表示泛型

上面定义了泛型函数，下面有两种方法使用

// 第一种，在<>里面传入参数
let output = identity<string>("myString")

// 第二种，利用类型推论，根据传入的参数自动确定T的类型
let output = identity("myString")

泛型接口

把泛型参数T，作为接口的一个参数

interface GenericIdentityFn<T> {
  (arg: T): T;
}
function identity<T>(arg: T): T {
  return tag;
}
let myIdentity: GenericIdentityFn<number> = indentity;

对比一下非泛型

interface GenericIdentityFn {
  （arg: number): number;
}
function identity(arg: number){
  return arg
}

let myIdentity: GenericIdentityFn = indentity;

泛型约束

假设泛型T，只能传递 string 和 number 两种类型，那么可以使用 <T extends xx>的方式进行约束，示例如下

type Params = string | number;
class Stack<T extends Params> {
  ...
}

六、tsconfig.json

如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录

何时使用

不带任何输入文件的情况下调用tsc，编译器会从当前目录开始去查找tsconfig.json文件，逐级向上搜索父目录。
当命令行上指定了输入文件时，tsconfig.json文件会被忽略

文件结构解读

{
    "compilerOptions": {		# 编译器选项
    		"declaration": true,	# 生成相应的 .d.ts文件，默认false
    		"declarationDir": "dist/type",	# 指定.d.ts文件的的存放目录，必须在declaration为true的情况下才能设置
    		"outDir": "dist",	# 指定输出目录
        "module": "commonjs",	# 指定模块系统，可以是 "CommonJS"，"AMD" 或 "System" 等
        "noImplicitAny": true,	# 在表达式和声明上有隐含的 any类型时报错，默认值false
        "preserveConstEnums": true,	# 保留 const和 enum声明，默认false
        "removeComments": true,	# 删除所有注释，除了以 /!*开头的版权信息，默认值false
        "sourceMap": true,		# 是否生成sourceMap文件，默认false
        "typeRoots": ["./typings"],	# 默认所有可见的"@types"包会在编译过程中被包含进来，如果指定，只有root下的会被包含进来
        "types": ["node", "lodash", "express"]	# 只有被列出来的包才会被包含进来，细节参考官方文档，指定为[]禁止引入@types
    },
    "files": [				# 指定tsc编译的范围，优先级最高
        "core.ts",
        ...
    ],
    "include": [			# 通过glob匹配语法来指定tsc编译范围，优先级最低
        "src/**/*"
    ],
    "exclude": [			# 通过glob匹配语法来指定tsc编译范围，优先级居中
        "node_modules",
        "**/*.spec.ts"
    ],
    "extends" : "./config/base"	# 从另一个配置文件里继承配置
}

exclude可以过滤掉include指定的范围，但是无法过滤掉files指定的范围

注意：每个配置项都具有默认值，并不是所有项目都需要手动配置

如果"files"和"include"都没有被指定，编译器默认包含当前目录和子目录下所有的TypeScript文件（.ts, .d.ts 和 .tsx）

七、.d.ts文件

d：declare，声明

.d.ts，TypeScript的类型声明文件

在*.d.ts文件中的顶级声明必须以declare或export修饰符开头

作用是什么

有时，我们不免会引入外部的 JS库，这时TS就对引入的JS文件里变量的具体类型不明确了，为了告诉TS变量的类型，因此就有了.d.ts

很多主流的库都是 JS编写的，并不支持类型系统。这个时候你不能用TS重写主流的库，这个时候我们只需要编写仅包含类型注释的 d.ts 文件，然后从您的 TS 代码中，可以在仍然使用纯 JS 库的同时，获得静态类型检查的 TS 优势。

以下是一个.ts文件

interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);

下面是tsc为上面那个文件生成的.d.ts文件

interface Person {
    firstName: string;
    lastName: string;
}
declare function greeter(person: Person): string;
declare let user: {
    firstName: string;
    lastName: string;
};

@types/*文件

npm包的声明文件

多数情况下，类型声明包的名字总是与它们在`npm`上的包的名字相同，但是有`@types/`前缀

与 tsconfig.json 文件中 compilerOptions 中的 typeRoots 和 types 搭配使用。

默认情况下所有可见的@types包，会在编译过程中包含进来，例如：./node_modules/@types/、../node_modules/@types/和../../node_modules/@types/等等。

但是，如果指定了typeRoots或者types，那么只有typeRoots目录下的包才会被引入，或者被types指定的包才会被引入。

设置"types": []会禁用自动引入@types包的功能

高级类型

索引类型

keyof，示例如下

function getValue<T extends object, U extends keyof T>(obj: T, key: U) {
  return obj[key];
}

const a = {
  name: 'timegogo',
  age: 26,
}

getValue(a, a.name);	// 如果第二个参数不是a.name或a.age回报错

JavaScript > TypeScript

TypeScript入门

http://timegogo.top/2023/06/23/JavaScript/TypeScript：TypeScript入门/

作者

丘智聪

发布于

2023年6月23日

更新于

2026年6月10日

许可协议

Git笔记（六）Git协作常用操作上一篇

Git规范化工具下一篇