TypeScript 是 JavaScript 的超集,它为 JavaScript 提供了静态类型检查、类、接口等先进的面向对象特性以及新的语言特性,旨在让大型 JavaScript 应用更容易开发和维护。下面从以下几个方面来讲解 TypeScript 的基础知识。
- 类型注解
TypeScript 可以通过类型注解,既为变量、函数、方法添加类型声明,使得开发者可以在开发阶段就能更好的捕获类型错误,从而有效避免程序在运行时出现类型错误。
let a: number = 123;
let b: string = 'hello';
let c: boolean = true;
function add(x: number, y: number): number {
return x + y;
}
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sayHello(): void {
console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
}
}
上面代码中,变量 a、b、c 都分别被注释为了 number、string 和 boolean 类型。函数 add 和类 Person 都被注释为了带有多个参数和返回值的函数类型和类类型。
- 接口
TypeScript 还提供了一个强大的特性,那就是接口。接口定义了对象的形状,即规定了对象包含哪些属性以及属性的类型。同时接口也可作为类型注解使用。
interface Person {
name: string;
age: number;
}
let person1: Person = { name: 'Alice', age: 20 };
let person2: Person = { name: 'Bob', age: 25 };
上面代码中,我们定义了一个名为 Person 的接口,规定了一个对象必须包含 name 和 age 两个属性,并且它们的类型都分别为 string 和 number。接着声明了两个变量 person1 和 person2,它们都符合 Person 接口所定义的要求,所以不会报错。
- 类
TypeScript 支持类的概念,可以通过 class 关键字来定义一个类,并可以在类中添加属性、方法等成员。
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number = 0): void {
console.log(`${this.name} moved ${distance}m.`);
}
}
class Dog extends Animal {
bark(): void {
console.log('Woof! Woof!');
}
}
const dog = new Dog('Lucky');
dog.bark(); // 输出 Woof! Woof!
dog.move(10); // 输出 Lucky moved 10m.
上面代码中,我们定义了一个名为 Animal 的类,它有一个名为 name 的属性和一个名为 move 的方法。然后,我们定义了一个名为 Dog 的子类,继承了 Animal 类,并添加了一个名为 bark 的方法。最后,我们创建了一个名为 dog 的实例,并调用了 bark 和 move 方法。
- 泛型
TypeScript 还支持泛型,可以用于在编译时期限制参数的类型,从而使代码更加灵活和可复用。
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>('hello');
console.log(output); // 输出 hello
上面代码中,我们定义了一个名为 identity 的泛型函数,它接收一个类型为 T 的参数,返回的类型也为 T。我们通过在函数名后加上 <T> 来表示这是一个泛型函数,然后在调用时使用 <string> 定义 T 的类型为 string,将 'hello' 作为参数传入,并将返回值赋值给 output 变量。
总之,TypeScript 提供了许多 JavaScript 没有的特性,如类型注解、接口、类、泛型等,旨在使大型应用程序更易于开发和维护。这些特性不仅可以提高代码质量,还可以提高开发效率和代码复用率。