TypeScript - 特性

TypeScript是JavaScript的超集，因此包含了JavaScript的所有功能。然而，它还包含一些JavaScript所不具备的高级特性，如静态类型、接口等。

让我们来讨论TypeScript的一些重要特性。

类型注解

在TypeScript中，类型注解允许你声明变量、函数参数和返回值的类型。TypeScript的静态类型特性使你能够在编写代码时捕获类型相关错误，而不是在编译时。这样开发者可以编写更可靠的代码。

示例

在下面的代码中，我们定义了一个number数据类型的变量'a'。printNumber()函数接受一个number类型的'num'参数。

该函数打印参数值。

// TypeScript中的类型注解
var a: number = 10;
function printNumber(num: number) {
  console.log(num);
}
printNumber(a);

编译后，它将生成以下JavaScript代码。

// TypeScript中的类型注解
var a = 10;
function printNumber(num) {
    console.log(num);
}
printNumber(a);

输出

上面的示例代码将产生以下输出

10

接口

接口类似于Java等其他编程语言中的抽象类。它允许开发者定义对象的结构，但不提供实现。这样开发者可以为相似类型的对象遵循相同的对象结构。

示例

在下面的示例中，我们定义了一个包含'firstName'和'lastName'属性以及getFullName()方法的'IPerson'接口。接口仅声明属性和方法，定义对象的结构。

对于'obj'对象，我们使用'IPerson'接口作为类型。之后，我们初始化了对象的属性并实现了getFullName()方法，该方法返回字符串值。

// TypeScript中的接口
interface IPerson {
  firstName: string;
  lastName: string;
  getFullName(): string;
}

// 定义一个实现接口的对象
let obj: IPerson = {
  firstName: "John",
  lastName: "Doe",
  getFullName(): string {
    return this.firstName + " " + this.lastName;
  }
};
console.log(obj.getFullName());

编译后，它将生成以下JavaScript代码。

// 定义一个实现接口的对象
let obj = {
   firstName: "John",
   lastName: "Doe",
   getFullName() {
      return this.firstName + " " + this.lastName;
   }
};
console.log(obj.getFullName());

输出

上面示例代码的输出如下

John Doe

类

类是对象的蓝图。类可以包含属性和方法，这些属性和方法可以通过类的实例来访问。你可以使用类的构造函数()在创建类的实例时初始化类的属性。此外，你还可以在类中包含静态成员，这些成员可以通过类名访问，而无需使用类的实例。

示例

在下面的代码中，我们创建了Greeter类，它包含'greeting'属性。构造函数()方法接受'message'参数，并用它初始化'greeting'属性值。

greet()方法返回表示问候消息的字符串值。之后，我们创建了Greeter类的实例并使用它调用了greet()方法。

// 类的基本示例
class Greeter {
  greeting: string;
  // 构造函数方法
  constructor(message: string) {
    this.greeting = message;
  }
  // 类方法
  greet() {
    return "Hello, " + this.greeting;
  }
}

// 创建类的实例
let greeter = new Greeter("world");
console.log(greeter.greet()); // Hello, world

编译后，它将生成以下JavaScript代码。

// 类的基本示例
class Greeter {
    // 构造函数方法
    constructor(message) {
        this.greeting = message;
    }
    // 类方法
    greet() {
        return "Hello, " + this.greeting;
    }
}
// 创建类的实例
let greeter = new Greeter("world");
console.log(greeter.greet()); // Hello, world

输出

上面示例代码的输出如下

Hello, world

继承

TypeScript支持面向对象编程语言的所有特性，如多态、抽象、封装、继承等。然而，在本课程中我们只讨论继承。

继承允许你重用其他类的属性和方法。

示例

在下面的代码中，'Person'类是一个基类。它包含'name'属性，我们在构造函数()方法中初始化它。display()方法在控制台中打印名称。

Employee类使用'extends'关键字继承父类的属性。它包含'empCode'属性和show()方法。它还包含Person类的所有属性和方法。

接下来，我们创建了Employee类的实例，并使用它访问Person类的方法。

// 基类
class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  display(): void {
    console.log(this.name);
  }
}

// 派生类
class Employee extends Person {
  empCode: number;
  constructor(name: string, code: number) {
    super(name);
    this.empCode = code;
  }
  show(): void {
    console.log(this.empCode);
  }
}

let emp: Employee = new Employee("John", 123);
emp.display(); // John
emp.show(); // 123

编译后，它将生成以下JavaScript代码。

// 基类
class Person {
    constructor(name) {
        this.name = name;
    }
    display() {
        console.log(this.name);
    }
}
// 派生类
class Employee extends Person {
    constructor(name, code) {
        super(name);
        this.empCode = code;
    }
    show() {
        console.log(this.empCode);
    }
}
let emp = new Employee("John", 123);
emp.display(); // John
emp.show(); // 123

输出

上面示例代码的输出如下

John
123

枚举

枚举用于在TypeScript中定义命名常量。它允许你为常量值命名，使代码更可靠和可读。

示例

在下面的代码中，我们使用'enum'关键字定义了枚举。在我们的例子中，整数值表示方向，但我们为方向赋予了名称以提高可读性。

之后，你可以使用常量名来访问Directions的值。

// TypeScript中的枚举
enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

console.log(Direction.Up); // 1
console.log(Direction.Down); // 2
console.log(Direction.Left); // 3
console.log(Direction.Right); // 4

编译后，它将生成以下JavaScript代码-

var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 1] = "Up";
    Direction[Direction["Down"] = 2] = "Down";
    Direction[Direction["Left"] = 3] = "Left";
    Direction[Direction["Right"] = 4] = "Right";
})(Direction || (Direction = {}));
console.log(Direction.Up); // 1
console.log(Direction.Down); // 2
console.log(Direction.Left); // 3
console.log(Direction.Right); // 4

输出

上面示例代码的输出如下

1
2
3
4

泛型

泛型类型允许你创建可重用的组件、函数代码或类，这些组件可以处理不同类型，而不是特定类型。这样开发者可以使用相同的函数或类处理多种类型。

示例

在下面的代码中，printArray()是一个泛型函数，它有一个类型参数。它接受一个类型为'T'的数组作为参数。该函数使用for循环打印数组元素。

接下来，我们通过传递数字和字符串数组来调用该函数。你可以观察到该函数接受任何类型的数组作为参数。这样，开发者可以使用相同的代码处理不同类型。

// TypeScript中的泛型
function printArray(arr: T[]): void {
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
}

printArray([1, 2, 3]); // 数字数组
printArray(["a", "b", "c"]); // 字符串数组

编译后，它将生成以下JavaScript代码。

// TypeScript中的泛型
function printArray(arr) {
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
}

printArray([1, 2, 3]); // 数字数组
printArray(["a", "b", "c"]); // 字符串数组

输出

上面示例代码的输出如下

1
2
3
a
b
c

联合类型

联合类型允许你为变量声明多种类型。有时，开发者需要定义一个支持number、string、null等多种类型的单个变量。在这种情况下，他们可以使用联合类型。

示例

在下面的代码中，'unionType'具有string和number类型。它可以存储两种类型的值，但如果你尝试存储任何其他类型的值，如Boolean，TypeScript编译器将抛出错误。

// TypeScript中的联合类型
var unionType: string | number;
unionType = "Hello World"; // 分配字符串值
console.log("String value: " + unionType);

unionType = 500; // 分配数字值
console.log("Number value: " + unionType);

// unionType = true; // 错误：类型'boolean'不能分配给类型'string | number'

编译后，它将生成以下JavaScript代码。

// TypeScript中的联合类型
var unionType;
unionType = "Hello World"; // 分配字符串值
console.log("String value: " + unionType);
unionType = 500; // 分配数字值
console.log("Number value: " + unionType);
// unionType = true; // 错误：类型'boolean'不能分配给类型'string | number'

输出

上面示例代码的输出如下

String value: Hello World
Number value: 500

类型保护

类型保护允许你获取变量的类型。之后，你可以根据特定变量的类型执行多个操作。这也确保了类型安全。

示例

在下面的代码中，我们定义了一个number和string类型的变量'a'。

之后，我们使用typeof运算符和if-else语句获取变量'a'的类型。根据'a'的类型，我们在控制台中打印字符串值。

let a: number | string = 10;
// 类型保护
if (typeof a === 'number') {
  console.log('a is a number');
} else {
  console.log('a is a string');
}

编译后，它将生成以下JavaScript代码。

let a = 10;
// 类型保护
if (typeof a === 'number') {
    console.log('a is a number');
}
else {
    console.log('a is a string');
}

输出

上面示例代码的输出如下

a is a number

在本课程中，我们涵盖了TypeScript最重要的特性。TypeScript还包含可选链、装饰器、模块、类型接口等特性，我们将在TypeScript课程中探索这些内容。