知识篇 -- TypeScript简介：JavaScript的超集

Ray Shine 2024/5/10 TypeScript基础知识简介

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

TypeScript（简称TS）是JavaScript的一个超集，它在JavaScript的基础上添加了静态类型、类、接口等特性，旨在提高JavaScript代码的可维护性、可读性和开发效率。TypeScript最终会被编译成纯JavaScript代码，因此它可以在任何支持JavaScript的环境中运行。随着前端项目的日益复杂，TypeScript已经成为许多大型项目和团队的首选语言。

# 什么是TypeScript？

TypeScript由微软开发和维护，它扩展了JavaScript，使其能够支持更严格的类型检查。你可以把TypeScript看作是“带类型的JavaScript”。这意味着所有合法的JavaScript代码都是合法的TypeScript代码，但TypeScript会在此基础上增加额外的语法和规则，以帮助开发者在开发阶段捕获潜在的错误。

TypeScript的核心优势：

静态类型检查：在代码运行前（编译阶段）就能发现类型错误，减少运行时错误。
代码可读性与可维护性：明确的类型定义使得代码意图更清晰，易于理解和维护，尤其是在大型项目中。
增强IDE支持：提供更智能的代码提示、自动补全、重构和错误检查，显著提升开发体验。
更好的团队协作：统一的类型约定有助于团队成员之间更好地理解和协作。
面向对象特性：支持类、接口、枚举等面向对象编程的特性，使得代码结构更清晰。
兼容性：最终编译为纯JavaScript，可以运行在任何浏览器、Node.js环境或支持JavaScript的平台。

# TypeScript与JavaScript的关系

TypeScript是JavaScript的超集，这意味着：

包含JavaScript：任何JavaScript代码都是有效的TypeScript代码。你可以直接将现有的JavaScript项目重命名为 .ts 文件，然后逐步引入类型。
扩展JavaScript：TypeScript在JavaScript的基础上增加了类型注解、接口、枚举、泛型等新特性。
编译时检查：TypeScript代码需要通过TypeScript编译器（tsc）编译成JavaScript代码才能运行。在这个编译过程中，编译器会进行类型检查。

示例：

// JavaScript代码 (也是合法的TypeScript代码)
function add(a, b) {
    return a + b;
}
console.log(add(1, 2)); // 3
console.log(add(1, '2')); // "12" - 运行时错误或非预期行为

// TypeScript代码 (添加类型注解)
function addTyped(a: number, b: number): number {
    return a + b;
}
console.log(addTyped(1, 2)); // 3
// console.log(addTyped(1, '2')); // 编译时报错：Argument of type 'string' is not assignable to parameter of type 'number'.

通过类型注解，TypeScript在编译阶段就能发现 addTyped(1, '2') 这样的潜在错误，避免了在运行时才暴露问题。

# TypeScript的类型系统

TypeScript的类型系统是其最核心的部分，它允许我们为变量、函数参数、函数返回值等定义类型。

# 1. 基本类型

number：任意数字，包括整数和浮点数。
string：任意字符串。
boolean：true 或 false。
null 和 undefined：JavaScript中的原始类型。
symbol：ES6引入的原始类型。
bigint：ES2020引入的原始类型。

# 2. 数组类型

number[] 或 Array<number>：表示元素为数字的数组。
string[] 或 Array<string>：表示元素为字符串的数组。

# 3. 对象类型

object：表示非原始类型。
{ name: string; age: number; }：通过接口或类型别名定义对象的结构。

# 4. 特殊类型

any：表示任意类型，放弃类型检查。应谨慎使用。
unknown：表示未知类型，比 any 更安全，在使用前需要进行类型断言或类型收窄。
void：表示函数没有返回值。
never：表示函数永远不会返回（例如抛出错误或无限循环）。
tuple (元组)：表示一个已知元素数量和类型的数组，各元素的类型不必相同。
```
let x: [string, number];
x = ['hello', 10]; // OK
// x = [10, 'hello']; // Error
```

enum (枚举)：为一组数值赋予友好的名字。

enum Color {Red, Green, Blue}
let c: Color = Color.Green; // 1

# TypeScript的编译与配置

TypeScript代码需要通过TypeScript编译器（tsc）编译成JavaScript代码。

# 1. 安装TypeScript编译器

npm install -g typescript

# 2. 编译TypeScript文件

tsc your-file.ts

这会在同目录下生成 your-file.js。

# 3. `tsconfig.json` 配置文件

在项目根目录创建 tsconfig.json 文件，可以配置编译选项，如目标JavaScript版本、模块系统、输出目录等。

示例 tsconfig.json：

{
  "compilerOptions": {
    "target": "es2016",                 /* 指定ECMAScript目标版本: 'ES3' (默认), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', 'ESNext' */
    "module": "commonjs",               /* 指定模块代码生成: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', 'ESNext' */
    "lib": ["es2016", "dom"],           /* 指定要包含在编译中的库文件 */
    "outDir": "./dist",                 /* 指定输出目录 */
    "strict": true,                     /* 启用所有严格类型检查选项 */
    "esModuleInterop": true,            /* 通过为所有导入创建命名空间对象，在CommonJS和ES模块之间发出兼容的JavaScript */
    "skipLibCheck": true,               /* 跳过所有声明文件 (*.d.ts) 的类型检查 */
    "forceConsistentCasingInFileNames": true /* 不允许对同一个文件使用不一致的引用 */
  },
  "include": ["src/**/*.ts"],           /* 指定需要编译的文件 */
  "exclude": ["node_modules"]           /* 指定不需要编译的文件 */
}

配置完成后，只需运行 tsc 命令，编译器就会根据 tsconfig.json 的配置编译整个项目。

# 总结

TypeScript通过引入静态类型系统，极大地提升了JavaScript项目的可维护性、可读性和开发效率。它在编译阶段就能捕获大量潜在错误，并通过强大的IDE支持改善了开发体验。对于构建大型、复杂的Web应用，TypeScript已经成为不可或缺的工具。掌握TypeScript，是现代前端开发者提升自身技能和应对复杂项目挑战的关键。

← TypeScript装饰器 TypeScript基本类型 →

一ξひβθ光 i