TypeScript 是一种开源的编程语言，它是 JavaScript 的一个强类型扩展。它被广泛应用于前端开发中，尤其是 Angular 等框架的开发中。它可以让我们在编写 JavaScript 代码时获得更强的类型安全和编辑器支持，从而提高代码质量和开发效率。
在本篇文章中，我们将从 TypeScript 的基础知识开始入手，逐步深入掌握 TypeScript 的各种特性和用法。无论你是刚刚入门 TypeScript，还是已经使用 TypeScript 开发过一段时间的开发者，本篇文章都能够为你提供有价值的指导和参考。
目录
TypeScript 基础
安装 TypeScript
要使用 TypeScript，我们首先需要在本地安装 TypeScript 编译器。打开终端窗口，输入以下命令即可完成安装：
npm install -g typescript
第一个 TypeScript 程序
让我们从一个简单的 TypeScript 程序开始，来了解 TypeScript 的基本语法和用法。
在任意目录下，新建一个 hello.ts 文件，输入以下代码：
function sayHello(name: string) {
console.log(`Hello, ${name}!`);
}
let myName = 'TypeScript';
sayHello(myName);接着，在终端窗口中，进入该文件所在的目录，输入以下命令即可编译 TypeScript 代码：
tsc hello.ts
这样，TypeScript 代码就会被编译成 JavaScript 代码，并生成一个同名的 hello.js 文件。打开该文件，你会发现它的内容与下面的 JavaScript 代码是完全一致的：
function sayHello(name) {
console.log("Hello, " + name + "!");
}
var myName = 'TypeScript';
sayHello(myName);数据类型
在 TypeScript 中，数据类型有以下几种：
- 布尔型：
boolean - 数字型：
number - 字符串型：
string - 数组型：
array - 元组型：
tuple - 枚举型：
enum - 任意型：
any - 空值：
void - Null 和 Undefined：
null和undefined - 对象型：
object
在 TypeScript 中，我们可以为变量、函数参数和函数返回值等显式指定类型。下面是一些示例代码：
// 布尔型
let isDone: boolean = false;
// 数字型
let decimal: number = 5;
let hex: number = 0xf00d;
let binary: number = 0b1010;
// 字符串型
let color: string = "blue";
// 数组型
let list: number[] = [1, 2, 3];
let fruits: Array<string> = ["apple", "banana", "orange"];
// 元组型
let x: [string, number];
x = ["hello", 10];
// 枚举型
enum Color {Red, Green, Blue};
let c: Color = Color.Green;
// 任意型
let notSure: any = 4;
notSure = "maybe a string instead";
// 空值
function warnUser(): void {
console.log("This is a warning message");
}
// Null 和 Undefined
let u: undefined = undefined;
let n: null = null;
// 对象型
let person: object = { name: "Alice", age: 30 };值得注意的是，TypeScript 中的变量类型是静态的。一旦你声明了某个变量的类型，就不能将它赋成其他类型的值。如果你真的需要改变类型，你需要重新声明一个变量。
变量声明
在 TypeScript 中，我们可以使用 var、let 和 const 来声明变量。它们之间的区别在于作用域和可变性。
var 声明的变量具有全局或函数作用域，而 let 和 const 声明的变量具有块级作用域。块级作用域指的是 {} 内部的部分，例如一个 if 语句、一个 for 循环或一个函数。
let 声明的变量是可变的，而 const 声明的变量则是不可变的。不可变指的是，一旦你为一个 const 变量赋了一个值，就不能再次赋值为其他值。
下面是一些示例代码：
// var 声明的变量
function testVar() {
for (var i = 0; i < 10; i++) {
setTimeout(function() { console.log(i); }, 100 * i);
}
}
testVar(); // 一次性输出 10 个 10
// let 声明的变量
function testLet() {
for (let i = 0; i < 10; i++) {
setTimeout(function() { console.log(i); }, 100 * i);
}
}
testLet(); // 分别输出 0 到 9 个数字
// const 声明的变量
const PI = 3.141592653589793;
PI = 3.14; // 会报错，因为 PI 是一个常量函数
在 TypeScript 中，定义函数有两种方式，分别是函数声明和函数表达式。
函数声明的语法如下：
function sum(a: number, b: number): number {
return a + b;
}函数表达式的语法如下：
let sum = function(a: number, b: number): number {
return a + b;
};在 TypeScript 中，我们可以为函数参数和返回值添加类型注解，以提高代码可读性和编译时类型检查的精度。下面是一个带类型注解的函数示例：
function greet(name: string): string {
return `Hello, ${name}!`;
}我们也可以使用可选参数、默认参数和剩余参数等特性，让函数具有更高的灵活性和可复用性。下面是一个带特性参数的函数示例：
// 可选参数和默认参数
function buildAddress(street?: string, city = "Shanghai", zip?: string): string {
if (street) {
return `${street}, ${city}, ${zip}`;
}
return `${city}, ${zip}`;
}
// 剩余参数
function sum(first: number, ...rest: number[]) {
let result = first;
for (let i = 0; i < rest.length; i++) {
result += rest[i];
}
return result;
}类
在 TypeScript 中，我们可以使用 class 关键字来定义类，从而实现面向对象编程。下面是一个简单的类定义示例：
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return `Hello, ${this.greeting}!`;
}
}
let greeter = new Greeter("TypeScript");上面的代码中，我们定义了一个 Greeter 类，它有一个 greeting 属性和一个 greet() 方法。在构造函数中，我们初始化了 greeting 属性。最后，我们创建了一个 Greeter 实例，并传递了一个字符串作为参数。调用 greet() 方法会返回形如 Hello, TypeScript! 的字符串。
我们还可以使用 public、private 和 protected 等访问修饰符来控制类成员的访问权限。下面是一个带访问修饰符的类定义示例：
class Animal {
private name: string;
constructor(theName: string) {
this.name = theName;
}
protected move(distanceInMeters: number) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Dog extends Animal {
bark() {
console.log("Woof! Woof!");
}
move(distanceInMeters: number) {
console.log("Dogs can't fly.");
super.move(distanceInMeters);
}
}
let dog = new Dog("Tommy");
dog.bark();
dog.move(10);上面的代码中，我们定义了一个 Animal 类，它有一个 name 属性和一个 move() 方法。name 属性被声明为 private，这意味着它只能在类内部访问。move() 方法被声明为 protected，这意味着它只能在该类或其子类内部访问。
我们还定义了一个 Dog 类，它继承了 Animal 类，并添加了一个 bark() 方法。在 move() 方法中，我们用 super 关键字来调用父类的该方法。
接口
在 TypeScript 中，我们可以使用 interface 关键字来定义接口。接口用于描述某个对象应该具有哪些属性和方法。下面是一个简单的接口定义示例：
interface Shape {
color: string;
area(): number;
}
class Square implements Shape {
color: string;
constructor(color: string) {
this.color = color;
}
area(): number {
return 3 * 3;
}
}上面的代码中，我们定义了一个 Shape 接口，它有两个成员：color 属性和 area() 方法。接着，我们定义了一个 Square 类，它实现了 Shape 接口，并实现了 area() 方法。
通过实现接口，我们可以让 TypeScript 编辑器在编辑时对代码进行类型检查和报错，从而帮助我们避免一些可能的错误。
泛型
在 TypeScript 中，我们可以使用泛型来实现不同类型的数据的通用处理。泛型允许我们在定义函数、类和接口时使用类型变量。下面是一个泛型函数定义示例：
function reverse<T>(list: T[]): T[] {
let result: T[] = [];
for (let i = list.length - 1; i >= 0; i--) {
result.push(list[i]);
}
return result;
}上面的代码中，我们定义了一个 reverse() 函数，它接受一个类型为 T[] 的数组，并返回一个类型为 T[] 的新数组。在函数声明中，我们使用了 <T> 语法来表示泛型类型变量。
在调用 reverse() 函数时，我们可以传递任意类型的数组，例如一个字符串数组或一个数字数组。TypeScript 编辑器会自动推断出返回值的类型。
TypeScript 进阶
命名空间和模块
在 TypeScript 中，我们可以使用命名空间来组织代码。命名空间是一个逻辑上的包装器，可以将代码划分成不同的模块，并避免命名冲突。下面是一个命名空间定义示例：
namespace Shapes {
export class Circle {
radius: number;
constructor(radius: number) {
this.radius = radius;
}
area(): number {
return Math.PI * this.radius * this.radius;
}
}
}
let circle = new Shapes.Circle(10);上面的代码中，我们定义了一个 Shapes 命名空间，并在其中定义了一个 Circle 类。在类的定义之前，我们使用了 export 关键字，将该类导出到命名空间的顶部。这意味着，在其他文件中，我们可以使用 import 关键字来将该类导入到当前文件中。
除了命名空间，TypeScript 还提供了更加灵活和强大的模块机制。模块允许我们将代码划分成多个文件，并可以按需加载。在使用模块时，我们可以使用 import 和 export 关键字来导入和导出模块。下面是一个模块定义示例：
// myMath.ts
export const PI = 3.14;
export function square(x: number) {
return x * x;
}
// app.ts
import { PI, square } from "./myMath";
console.log(PI);
console.log(square(5));上面的代码中，我们将 myMath.ts 文件中导出的 PI 和 square() 导入到了 app.ts 文件中，并进行了使用。这样，当我们编译 app.ts 文件时，TypeScript 编译器会自动将 myMath.ts 文件一起编译成 JavaScript 代码。
装饰器
在 TypeScript 中，我们可以使用装饰器（Decorator）来为类、属性、方法和访问器等成员添加元数据（Metadata）。元数据是指一些描述数据的数据，它通常用于为程序提供更多的运行时信息。
装饰器是一种特殊类型的声明，并使用 @expression 语法来应用于类声明、方法、属性或参数。下面是一个装饰器定义示例：
function log(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
let originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`${propertyKey} is called.`);
return originalMethod.apply(this, args);
};
return descriptor;
}
class MyClass {
@log
myMethod() {
console.log("Hello, world!");
}
}
let myClass = new MyClass();
myClass.myMethod();在上面的代码中，我们定义了一个 log 装饰器，它通过修改描述符对象的值来记录方法的调用。在 MyClass 中，我们在 myMethod() 上加了 @log 装饰器来应用它。
当调用 myMethod() 方法时，装饰器会自动记录日志信息，并打印输出到控制台。
声明文件
在 TypeScript 开发过程中，我们可能需要使用一些第三方库或框架。这些库或框架可能是 JavaScript 写的，并且没有提供 TypeScript 类型定义文件（即 .d.ts 文件），这就会导致 TypeScript 编辑器无法识别这些库或框架中的类型。
为了解决这个问题，我们可以手动创建或使用已有的声明文件。声明文件是一个以 .d.ts 结尾的文件，它用于描述一个模块或库的类型信息。下面是一个声明文件定义示例：
// jQuery.d.ts declare var jQuery: (selector: string) => any;
在上面的代码中，我们定义了一个 jQuery 变量，并为它声明了一个函数类型。这样，在 TypeScript 中就可以直接使用 jQuery 变量，并立即获得它的类型信息了。
声明文件可以手动编写，也可以通过 @types 模块来获取。@types 模块是一组由 TypeScript 社区编写的声明文件的集合，可通过 npm 安装。
总结
在本篇文章中，我们学习了 TypeScript 的基础知识和进阶特性。通过本文的介绍，我们了解了 TypeScript 的数据类型、变量声明、函数、类、接口、泛型、命名空间和模块、装饰器、声明文件等各种特性和用法。
要成为一名优秀的前端开发者，我们需要掌握各种技术的基础知识，并不断学习和探索新的技术。希望本篇 TypeScript 教程对你有所帮助，也祝愿大家在前端开发道路上越走越远！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b06655add4f0e0ff9c10bf