在当今快节奏的数字时代，JavaScript 已成为构建动态网络应用程序的首选语言。然而，JavaScript 的动态类型有时会导致一些细微的错误，因此在开发过程中很难及早发现这些错误。
这就是 TypeScript 的用武之地–它彻底改变了我们编写 JavaScript 代码的方式。
在本文中，我们将深入了解 TypeScript 的世界，探索其特性、优势和最佳实践。您还将了解 TypeScript 如何解决 JavaScript 的局限性，并释放静态类型在构建健壮、可扩展的 Web 应用程序中的威力。
什么是 TypeScript？
TypeScript 是 JavaScript 的超集，为 JavaScript 添加了可选的静态类型和高级功能。它由微软开发，最初于 2012 年 10 月发布。自 2012 年发布以来，它已迅速在网络开发社区获得广泛采用。
根据 2022 年 Stack Overflow 开发人员调查，TypeScript 以 73.46% 的比例成为第四大最受喜爱的技术。创建 TypeScript 的目的是为了解决 JavaScript 的一些局限性，例如它缺乏强类型，这可能导致在开发过程中难以捕捉的细微错误。
例如，请看下面的 JavaScript 代码：
function add(a, b) {
return a + b;
}
let result = add(10, "20"); // No error, but result is "1020" instead of 30
上面的代码创建了一个函数 add ，它是动态类型的。参数 a 和 b 的类型没有强制规定。因此，传递字符串而不是数字作为参数并不会产生错误，反而会将值连接为字符串，导致意外行为。
TypeScript 引入了可选的静态类型，允许开发人员指定变量、函数参数和返回值的类型，从而在开发过程中捕捉与类型相关的错误。
function add(a: number, b: number): number {
return a + b;
}
let result = add(10, "20"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'
在上面的 TypeScript 代码中，参数 a 和 b 的类型被明确定义为数字。如果参数传递的是字符串，TypeScript 会在编译时引发错误，从而提供早期反馈以捕捉潜在问题。
注：微软一直积极参与 TypeScript 的维护和改进工作，定期发布功能增强、性能提高的新版本，如最新发布的 TypeScript 5.0。
TypeScript 的特性
TypeScript 为现代网络开发提供了一些强大的功能，解决了 JavaScript 的一些局限性。这些功能增强了开发人员的体验和代码组织。它们包括
1. 静态类型
TypeScript 拥有强大的类型系统，允许在编译时指定变量和函数参数的类型。这样就能及早发现与类型相关的错误，使代码更加可靠，不易出现错误。
而在 JavaScript 中，变量是动态类型的，这意味着它们的类型可以在运行时发生变化。
例如，下面的 JavaScript 代码显示了两个动态类型为 number 和 string 的变量的声明：
let num1 = 10; // num1 is dynamically typed as a number let num2 = "20"; // num2 is dynamically typed as a string let result = num1 + num2; // No error at compile-time console.log(result); // Output: "1020"
上述代码将输出 “1020”，即数字和字符串的连接。这并不是预期的输出结果，也就是说，这会影响你的代码。JavaScript 的缺点是不会产生错误。而使用 TypeScript 时，您可以通过指定每个变量的类型来解决这个问题：
let num1: number = 10; // num1 is statically typed as a number let num2: string = "20"; // num2 is statically typed as a string let result = num1 + num2; // Error: Type 'string' is not assignable to type 'number'
在上面的代码中，由于 TypeScript 执行严格的类型检查，因此尝试使用 + 运算符连接数字和字符串会导致编译时错误。
这有助于在执行代码前捕获潜在的类型相关错误，从而使代码更健壮、更无错误。
2. 可选类型
TypeScript 提供了选择是否使用静态类型的灵活性。这意味着您可以选择为变量和函数参数指定类型，或者让 TypeScript 根据分配的值自动推断类型。
例如：
let num1: number = 10; // num1 is statically typed as a number let num2 = "20"; // num2 is dynamically typed as a string let result = num1 + num2; // Error: Operator '+' cannot be applied to types 'number' and 'string'
在这段代码中，num2 的类型根据分配的值推断为 string，但如果需要，您可以选择指定类型。
您也可以将类型设置为 any，这意味着它可以接受任何类型的值：
let num1: number = 10; let num2: any = "20"; let result = num1 + num2; // Error: Operator '+' cannot be applied to types 'number' and 'string'
3. ES6+ 功能
TypeScript 支持现代 JavaScript 功能，包括 ECMAScript 6 (ES6) 及其后续版本中引入的功能。
这使得开发人员可以使用箭头函数、重构、模板字符串等功能编写更简洁、更具表现力的代码，并增加了类型检查功能。
例如：
const greeting = (name: string): string => {
return `Hello, ${name}!`; // Use of arrow function and template literal
};
console.log(greeting("John")); // Output: Hello, John!
在这段代码中，我们完美地使用了箭头函数和模板文字。这同样适用于所有 JavaScript 语法。
4. 代码组织
在 JavaScript 中，将代码组织到单独的文件中并管理依赖关系会随着代码库的增长而变得具有挑战性。然而，TypeScript 提供了对模块和命名空间的内置支持，可以更好地组织代码。
模块允许将代码封装在单独的文件中，从而更容易管理和维护大型代码库。
下面是一个例子：
// greeting.ts:
export function greet(name: string): string { // Export a function from a module
return `Hello, ${name}!`;
}
// app.ts:
import { greet } from "./greeting"; // Import from a module
console.log(greet("John")); // Output: Hello, John!
在上例中，我们有两个独立的文件 greeting.ts 和 app.ts。app.ts 文件使用 import 语句从 greeting.ts 文件导入 greet 函数。greeting.ts文件使用 export 关键字导出 greet 函数，使其他文件也能导入该函数。
这样就能更好地组织代码和分离关注点，从而更轻松地管理和维护大型代码库。
TypeScript 中的命名空间提供了一种将相关代码分组并避免全局命名空间污染的方法。命名空间可用于定义一组相关类、接口、函数或变量的容器。
例子：
namespace Utilities {
export function greet(name: string): string {
return `Hello, ${name}!`;
}
export function capitalize(str: string): string {
return str.toUpperCase();
}
}
console.log(Utilities.greet("John")); // Output: Hello, John!
console.log(Utilities.capitalize("hello")); // Output: HELLO
在这段代码中，我们定义了一个包含两个函数 greet 和 capitalize 的 namespace Utilities 。我们可以使用命名空间名称和函数名称来访问这些函数，从而为相关代码提供了一个逻辑分组。
5. 面向对象编程 (OOP) 功能
TypeScript 支持类、接口和继承等 OOP 概念，允许编写结构化和有组织的代码。
例如：
class Person {
constructor(public name: string) {} // Define a class with a constructor
greet(): string { // Define a method in a class
return `Hello, my name is ${this.name}!`;
}
}
const john = new Person("John"); // Create an instance of the class
console.log(john.greet()); // Output: Hello, my name is John!
6. 高级类型系统
TypeScript 提供了支持泛型、联合、交叉等功能的高级类型系统。这些功能增强了 TypeScript 的静态类型检查能力，使开发人员可以编写更健壮、更具表现力的代码。
泛型：泛型允许编写可与不同类型协同工作的可重用代码。泛型就像类型的占位符，在运行时根据传递给函数或类的值确定类型。
例如，让我们定义一个泛型函数 identity，它接收 T 类型的参数值并返回相同类型的 T 值：
function identity(value: T): T {
return value;
}
let num: number = identity(10); // T is inferred as number
let str: string = identity("hello"); // T is inferred as string
在上例中，T 的类型是根据传递给函数的值的类型推断出来的。在标识符函数的第一次使用中，T 被推断为数字，因为我们传入的参数是 10，而在第二次使用中，T 被推断为字符串，因为我们传入的参数是 "hello"。
联合和交叉：联合和交叉用于组成类型，并创建更复杂的类型关系。
联合可以将两个或多个类型组合成一个单一类型，该单一类型可以拥有任何组合类型。通过交叉可以将两个或多个类型组合成一个单一类型，该类型必须满足所有组合类型的要求。
例如，我们可以定义两个类型 Employee （雇员）和 Manager （经理），分别代表雇员和经理。
type Employee = { name: string, role: string };
type Manager = { name: string, department: string };
使用 Employee 和 Manager 类型，我们可以定义一个 Union 类型 EmployeeOrManager ，它既可以是 Employee ，也可以是 Manager。
type EmployeeOrManager = Employee | Manager; // Union type
let person1: EmployeeOrManager = { name: "John", role: "Developer" }; // Can be either Employee or Manager
在上面的代码中， person1 变量的类型是 EmployeeOrManager ，这意味着它可以分配给满足 Employee 或 Manager 类型的对象。
我们还可以定义一个必须同时满足 Employee 和 Manager 类型的交集类型 EmployeeOrManager 。
type EmployeeAndManager = Employee & Manager; // Intersection type
let person2: EmployeeAndManager = { name: "Jane", role: "Manager", department: "HR" }; // Must be both Employee and Manager
在上述代码中， person2 变量的类型是 EmployeeAndManager ，这意味着它必须是一个同时满足 Employee 和 Manager 类型的对象。
7. 与 JavaScript 兼容
TypeScript 被设计为 JavaScript 的超集，这意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。这使得将 TypeScript 集成到现有 JavaScript 项目中变得容易，而无需重写所有代码。
TypeScript 构建在 JavaScript 的基础之上，添加了可选的静态类型和其他功能，但仍允许您使用纯 JavaScript 代码。
例如，如果您有一个现有的 JavaScript 文件 app.js，您可以将其重命名为 app.ts，然后开始逐步使用 TypeScript 功能，而无需更改现有的 JavaScript 代码。TypeScript 仍能理解 JavaScript 代码并将其编译为有效的 TypeScript。
下面的示例说明了 TypeScript 如何与 JavaScript 无缝集成：
// app.js - Existing JavaScript code
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("John")); // Output: Hello, John!
您可以将上述 JavaScript 文件重命名为 app.ts，然后开始使用 TypeScript 功能：
// app.ts - Same JavaScript code as TypeScript
function greet(name: string): string {
return "Hello, " + name + "!";
}
console.log(greet("John")); // Output: Hello, John!
在上例中，我们为 name 参数添加了一个类型注解，将其指定为 string，这在 TypeScript 中是可选的。代码的其余部分与 JavaScript 相同。TypeScript 能够理解 JavaScript 代码，并为添加的类型注解提供类型检查，因此可以轻松地在现有 JavaScript 项目中逐步采用 TypeScript。
开始使用 TypeScript
TypeScript 是一款官方编译器，你可以使用 npm 将其安装到你的项目中。如果你想在项目中开始使用 TypeScript 5.0，可以在项目目录中运行以下命令：
npm install -D typescript
这将在 node_modules 目录中安装编译器，现在可以使用 npx tsc 命令运行编译器。
对于 JavaScript 项目，首先需要使用以下命令初始化一个 node 项目，创建 package.json 文件：
npm init -y
然后，你就可以安装 TypeScript 依赖项，使用 .ts 扩展名创建 TypeScript 文件，并编写 TypeScript 代码。
编写完 TypeScript 代码后，需要使用 TypeScript 编译器 ( tsc ) 将其编译为 JavaScript。您可以在项目目录中运行以下命令：
npx tsc .ts
这会将指定文件中的 TypeScript 代码编译为 JavaScript，并生成一个同名的 .js 文件。
然后，您就可以在项目中运行编译后的 JavaScript 代码，就像运行普通 JavaScript 代码一样。您可以使用 Node.js 在 Node.js 环境中执行 JavaScript 代码，也可以将编译后的 JavaScript 文件包含在 HTML 文件中，然后在浏览器中运行。
使用接口
TypeScript 中的接口用于定义对象的契约或形状。通过接口，您可以指定对象应符合的结构或形状。
接口定义了一组属性和/或方法，对象必须拥有这些属性和/或方法才能被视为与接口兼容。接口可用于为对象、函数参数和返回值提供类型注释，从而在集成开发环境中实现更好的静态类型检查和代码完成建议。
下面是 TypeScript 中接口的示例：
interface Person {
firstName: string;
lastName: string;
age: number;
}
在本例中，我们定义了一个 Person 接口，该接口指定了三个属性：string 类型的 firstName、string类型的 lastName 和 number 类型的 age。
任何拥有这三个指定类型属性的对象都将被视为与 Person 接口兼容。现在让我们定义符合 Person 接口的对象：
let person1: Person = {
firstName: "John",
lastName: "Doe",
age: 30
};
let person2: Person = {
firstName: "Jane",
lastName: "Doe",
age: 25
};
在本例中，我们创建了两个符合 Person 接口的对象 person1 和 person2 。这两个对象都具有指定类型的必要属性 firstName、lastName 和 age，因此它们与 Person 接口兼容。
扩展接口
接口还可以扩展，以创建继承现有接口属性的新接口。
例如：
interface Animal {
name: string;
sound: string;
}
interface Dog extends Animal {
breed: string;
}
let dog: Dog = {
name: "Buddy",
sound: "Woof",
breed: "Labrador"
};
在本例中，我们定义了一个带有 name 和 sound 属性的接口 Animal，然后定义了一个新的接口 “Dog”，它扩展了 Animal 接口并增加了一个新的属性 breed。
Dog 接口继承了 Animal 接口的属性，因此任何符合 Dog 接口的对象也必须具有 name 和 sound 属性。
可选属性
接口还可以有可选属性，属性名后面用 ? 表示。
下面是一个例子：
interface Car {
make: string;
model: string;
year?: number;
}
let car1: Car = {
make: "Toyota",
model: "Camry"
};
let car2: Car = {
make: "Honda",
model: "Accord",
year: 2020
};
在这个示例中，我们定义了一个接口 Car，该接口具有 make 和 model 属性，以及一个可选的 year 属性。year 属性不是必需的，因此符合 Car 接口的对象可以有，也可以没有。
高级类型校验
TypeScript 还为 tsconfig.json 中的类型检查提供了高级选项。这些选项可以增强 TypeScript 项目的类型检查功能，并在编译时捕捉潜在错误，从而生成更健壮、更可靠的代码。
1. strictNullChecks
当设置为 true 时，TypeScript 将执行严格的空值检查，这意味着变量的值不能为 null 或 undefined ，除非明确指定了 null 或 undefined 的联合类型。
例子：
{
"compilerOptions": {
"strictNullChecks": true
}
}
启用此选项后，TypeScript 将在编译时捕获潜在的 null 或 undefined 值，从而避免因访问空值或未定义变量的属性或方法而导致运行时错误。
// Example 1: Error - Object is possibly 'null'
let obj1: { prop: string } = null;
console.log(obj1.prop);
// Example 2: Error - Object is possibly 'undefined'
let obj2: { prop: string } = undefined;
console.log(obj2.prop);
2. strictFunctionTypes
设置为 true 时，TypeScript 将启用函数类型的严格检查，包括函数参数的二方差，从而确保函数参数经过严格的类型兼容性检查。
例如：
{
"compilerOptions": {
"strictFunctionTypes": true
}
}
启用该选项后，TypeScript 将在编译时捕获潜在的函数参数类型不匹配，从而避免因向函数传递不正确的参数而导致运行时错误。
// Example: Error - Argument of type 'number' is not assignable to parameter of type 'string'
function greet(name: string) {
console.log(`Hello, ${name}!`);
}
greet(123);
3. noImplicitThis
设置为 true 时，TypeScript 不允许在隐式 any 类型中使用 this ，这有助于在类方法中使用 this 时捕捉潜在错误。
例如：
{
"compilerOptions": {
"noImplicitThis": true
}
}
启用此选项后，TypeScript 将捕捉在类方法中使用 this 选项而未正确进行类型注解或绑定可能导致的错误。
// Example: Error - The 'this' context of type 'void' is not assignable to method's 'this' of type 'MyClass'
class MyClass {
private prop: string;
constructor(prop: string) {
this.prop = prop;
}
printProp() {
console.log(this.prop);
}
}
let obj = new MyClass("Hello");
setTimeout(obj.printProp, 1000); // 'this' context is lost, potential error
4. target
target 选项指定 TypeScript 代码的 ECMAScript 目标版本。它决定了 TypeScript 编译器输出的 JavaScript 版本。
例如：
{
"compilerOptions": {
"target": "ES2018"
}
}
将此选项设置为 “ES2018” 后，TypeScript 将生成符合 ECMAScript 2018 标准的 JavaScript 代码。
如果您既想利用最新的 JavaScript 功能和语法，又想确保与旧版 JavaScript 环境的向后兼容性，这将非常有用。
5. module
module 选项指定了在 TypeScript 代码中使用的模块系统。常见选项包括 “CommonJS“、”AMD“、”ES6“、”ES2015“等。这决定了如何将 TypeScript 模块编译为 JavaScript 模块。
例如：
{
"compilerOptions": {
"module": "ES6"
}
}
将此选项设置为 “ES6” 后，TypeScript 将生成使用 ECMAScript 6 模块语法的 JavaScript 代码。
如果您使用的是支持 ECMAScript 6 模块的现代 JavaScript 环境，例如使用 webpack 或 Rollup 等模块捆绑程序的前端应用程序，这将非常有用。
6. noUnusedLocals and noUnusedParameters
这些选项使 TypeScript 能够分别捕获未使用的局部变量和函数参数。
设置为 true 时，TypeScript 将对代码中声明但未使用的局部变量或函数参数发出编译错误。
例如：
{
"compilerOptions": {
"noUnusedLocals": true,
"noUnusedParameters": true
}
}
以上只是 TypeScript 的 tsconfig.json 文件中高级类型检查选项的几个例子。您可以查看官方文档了解更多信息。
使用 TypeScript 的最佳实践和技巧
1. 为变量、函数参数和返回值正确注释类型
TypeScript 的主要优势之一是其强大的类型系统，它允许您明确指定变量、函数参数和返回值的类型。
这可以提高代码的可读性，及早发现潜在的类型相关错误，并在集成开发环境中实现智能代码自动补全。
下面是一个例子：
// Properly annotating variable types
let age: number = 25;
let name: string = "John";
let isStudent: boolean = false;
let scores: number[] = [98, 76, 89];
let person: { name: string, age: number } = { name: "John", age: 25 };
// Properly annotating function parameter and return types
function greet(name: string): string {
return "Hello, " + name;
}
function add(a: number, b: number): number {
return a + b;
}
2. 有效利用 TypeScript 的高级类型功能
TypeScript 拥有丰富的高级类型功能，例如泛型、联合、交叉、条件类型和映射类型。这些功能可以帮助你编写更灵活、更可重用的代码。
例子：
// Using generics to create a reusable function
function identity(value: T): T {
return value;
}
let num: number = identity(42); // inferred type: number
let str: string = identity("hello"); // inferred type: string
// Using union types to allow multiple types
function display(value: number | string): void {
console.log(value);
}
display(42); // valid
display("hello"); // valid
display(true); // error
3. 使用 TypeScript 编写可维护、可扩展的代码
通过提供接口、类和模块等功能，TypeScript 鼓励编写可维护、可扩展的代码。
下面是一个例子：
// Using interfaces for defining contracts
interface Person {
name: string;
age: number;
}
function greet(person: Person): string {
return "Hello, " + person.name;
}
let john: Person = { name: "John", age: 25 };
console.log(greet(john)); // "Hello, John"
// Using classes for encapsulation and abstraction
class Animal {
constructor(private name: string, private species: string) {}
public makeSound(): void {
console.log("Animal is making a sound");
}
}
class Dog extends Animal {
constructor(name: string, breed: string) {
super(name, "Dog");
this.breed = breed;
}
public makeSound(): void {
console.log("Dog is barking");
}
}
let myDog: Dog = new Dog("Buddy", "Labrador");
myDog.makeSound(); // "Dog is barking"
4. 利用 TypeScript 的工具和集成开发环境支持
TypeScript 拥有出色的工具和集成开发环境支持，具有自动完成、类型推断、重构和错误检查等功能。
利用这些功能提高您的工作效率，并在开发过程中尽早发现潜在错误。请确保使用支持 TypeScript 的集成开发环境（如 Visual Studio Code），并安装 TypeScript 插件，以获得更好的代码编辑体验。
VS 代码 TypeScript 扩展
小结
TypeScript 提供了一系列强大的功能，可以极大地增强您的网络开发项目。
其强大的静态类型、高级类型系统和面向对象编程功能使其成为编写可维护、可扩展和健壮代码的重要工具。TypeScript 的工具和集成开发环境支持还提供了无缝的开发体验。
评论留言