什么是 TypeScript
TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的超集,添加了静态类型和其他一些特性。TypeScript 可以编译成纯 JavaScript 代码,在任何支持 JavaScript 的环境中运行。
TypeScript 提供了更强大的类型系统,可以在开发过程中发现和预防一些常见的错误。它还支持 ECMAScript 的新特性,并提供了面向对象编程的能力。
安装和配置 TypeScript
要开始学习 TypeScript,首先需要安装 TypeScript 编译器。可以使用 npm(Node 包管理器)来安装 TypeScript:
npm install -g typescript
安装完成后,可以使用以下命令检查 TypeScript 版本:
tsc --version
接下来,创建一个 TypeScript 文件,例如 hello.ts,并添加以下代码:
function sayHello(name: string) {
console.log(`Hello, ${name}!`);
}
sayHello("TypeScript");
然后,在终端中运行以下命令编译 TypeScript 文件:
tsc hello.ts
这将生成一个名为 hello.js 的 JavaScript 文件。现在可以运行生成的 JavaScript 文件:
node hello.js
输出结果应为:
Hello, TypeScript!
类型注解
TypeScript 的一个主要特性是静态类型检查。可以使用类型注解来为变量、函数参数和函数返回值指定类型。
let count: number = 5;
let message: string = "Hello, TypeScript!";
let isDone: boolean = false;
function add(x: number, y: number): number {
return x + y;
}
在上面的代码中,count 是一个 number 类型的变量,message 是一个 string 类型的变量,isDone 是一个 boolean 类型的变量。add 函数接受两个 number 类型的参数,并返回一个 number 类型的值。
类型注解可以帮助我们在编码过程中捕获错误,并提供更好的代码补全和文档。
接口
TypeScript 还支持接口(Interfaces),用于定义对象的结构和类型。
interface Person {
name: string;
age: number;
}
function displayPerson(person: Person) {
console.log(`Name: ${person.name}, Age: ${person.age}`);
}
let john: Person = { name: "John", age: 25 };
displayPerson(john);
在上面的代码中,我们定义了一个 Person 接口,它包含 name 和 age 两个属性。然后,我们定义了一个 displayPerson 函数,它接受一个 Person 类型的参数,并打印出该对象的信息。
创建一个 john 对象,符合 Person 接口的定义,并将它传递给 displayPerson 函数进行显示。
类
TypeScript 支持面向对象编程,可以使用类来创建对象和定义方法。
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
sayHello() {
console.log(`Hello, I'm ${this.name}!`);
}
}
let cat = new Animal("Tom");
cat.sayHello();
在上面的代码中,我们定义了一个 Animal 类,它有一个 name 属性和一个 sayHello 方法。使用 constructor 构造函数来初始化对象的属性。
创建一个 cat 对象,并调用它的 sayHello 方法。
泛型
TypeScript 还支持泛型(Generics),可以编写可重用的代码组件。
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("Hello, TypeScript!");
console.log(output);
在上面的代码中,我们定义了一个 identity 函数,它接受一个泛型参数 T 和一个参数 arg,并返回相同类型的值。
使用泛型函数时,可以显式指定泛型类型,也可以让 TypeScript 推断出泛型类型。
模块
TypeScript 支持模块化开发,可以将代码分割成多个模块,并在需要时进行导入和导出。
// math.ts
export function add(x: number, y: number): number {
return x + y;
}
// main.ts
import { add } from "./math";
console.log(add(5, 3));
在上面的代码中,我们创建了一个名为 math.ts 的模块,其中导出了一个 add 函数。然后,在 main.ts 中使用 import 关键字导入了 add 函数,并调用它。