TypeScript 把高级语言的强类型这个最主要的特征引入到了 JavaScript 中,防止我们在编写 JavaScript 代码时因为数据类型的转换造成意想不到的错误。也就是,它为 JavaScript 上了一把高级语言强类型的锁,以避免这类问题的产生。
类的定义和使用:
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}
}
const person = new Person("Alice", 25);
person.sayHello();
在上述示例中,我们定义了一个名为Person
的类,它有两个属性name
和age
,以及一个sayHello
方法。通过new
关键字创建Person
类的实例,并调用sayHello
方法。
泛型类的定义和使用:
class Box<T> {
private value: T;
constructor(value: T) {
this.value = value;
}
getValue(): T {
return this.value;
}
}
const box1 = new Box<string>("Hello");
console.log(box1.getValue()); // Output: Hello
const box2 = new Box<number>(42);
console.log(box2.getValue()); // Output: 42
在上述示例中,我们定义了一个名为Box
的泛型类,它可以存储任意类型的值。通过在类名后面使用尖括号<>
来指定泛型类型,并在构造函数和方法中使用泛型类型T
。创建Box
类的实例时,可以指定具体的类型参数。
泛型约束的使用:
interface Length {
length: number;
}
function printLength<T extends Length>(value: T) {
console.log(`Length: ${value.length}`);
}
printLength("Hello"); // Output: Length: 5
printLength([1, 2, 3]); // Output: Length: 3
在上述示例中,我们定义了一个名为Length
的接口,它包含一个length
属性。然后,我们定义了一个名为printLength
的函数,它接受一个泛型参数T
,该参数必须满足Length
接口的约束。在函数体内,我们可以访问value.length
属性。
调用实践
(记得安装TypeScript编译器)
1.创建一个新的TypeScript文件(例如main.ts
),并将上述代码复制到该文件中。
2.在终端中,使用以下命令将TypeScript代码编译为JavaScript:tsc main.ts
(这将生成一个名为main.js
的JavaScript文件。)
3.创建一个HTML文件,就可以引用了。
应用举例
1.使用类型别名进行类型约束:可以使用类型别名来定义特定类型的别名,并使用该别名来约束函数参数、变量或类的属性。这样可以提高代码的可读性和可维护性。
type Point = { x: number; y: number };
function printPoint(point: Point) {
console.log(`x: ${point.x}, y: ${point.y}`);
}
const p: Point = { x: 10, y: 20 };
printPoint(p); // Output: x: 10, y: 20
2.使用接口进行类型约束:可以通过定义接口来描述对象的结构,并使用该接口来约束函数参数、变量或类的属性。这样可以确保传入的参数或赋值的值符合特定的结构要求。
interface Person {
name: string;
age: number;
}
function printPerson(person: Person) {
console.log(`Name: ${person.name}, Age: ${person.age}`);
}
const john: Person = { name: "John", age: 30 };
printPerson(john); // Output: Name: John, Age: 30
3.使用泛型约束进行类型约束:可以使用泛型约束来限制泛型类型的范围,以确保在使用泛型类型时,只能调用特定类型的方法或属性。
interface Length {
length: number;
}
function printLength<T extends Length>(value: T) {
console.log(`Length: ${value.length}`);
}
printLength("Hello"); // Output: Length: 5
printLength([1, 2, 3]); // Output: Length: 3
4.使用类型守卫进行类型约束:可以使用类型守卫来在运行时检查变量的类型,并根据类型的不同执行不同的代码逻辑。这样可以在代码中进行更精细的类型约束和处理。
function printValue(value: string | number) {
if (typeof value === "string") {
console.log(`String value: ${value}`);
} else if (typeof value === "number") {
console.log(`Number value: ${value}`);
}
}
printValue("Hello"); // Output: String value: Hello
printValue(42); // Output: Number value: 42