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

TypeScript 的第一次实践|青训营

类的定义和使用：

泛型类的定义和使用：

泛型约束的使用：

调用实践

应用举例