TypeScript 高频难题：剖析难点，庖解解题秘籍

2023-10-12 06:12:49

TypeScript 的常见问题解析

在 TypeScript 的开发过程中，难免会遇到各种各样的问题。本文收集了一些常见的问题，并附上了详细的解析和示例，帮助您更好地掌握 TypeScript。

基础

TypeScript 中的 type 用于声明变量的期望值，而不是实际值。const 表示一个只读的常量。class 关键字用于定义类，而 interface 关键字用于定义接口。

示例：

const name: string = "Alice"; // 声明一个类型为 string 的变量
const PI: number = 3.14; // 声明一个只读的常量
class Person { ... } // 定义一个 Person 类
interface Shape { ... } // 定义一个 Shape 接口

函数

函数的声明语法为：function functionName(params: type): returnType。调用语法为：functionName(args)。如果未指定返回值，则默认为 void。

示例：

function add(a: number, b: number): number {
  return a + b;
}

const result = add(1, 2); // 调用函数，并将结果存储在 result 中
console.log(result); // 输出 3

数组

创建数组的字面量语法为：const arr = [1, 2, 3]。访问数组元素：const element = arr[0]。修改数组元素：arr[0] = 5。数组提供了多种方法，如 push(), pop(), unshift(), map(), filter() 等。

示例：

const numbers = [1, 2, 3];
numbers.push(4); // 向数组末尾添加元素
numbers[1] = 5; // 修改数组元素
const doubledNumbers = numbers.map((num) => num * 2); // 使用 map() 方法创建新数组

对象

创建对象的字面量语法为：const obj = { key: value }。访问对象的属性：const value = obj.key。修改对象的属性：obj.key = newValue。对象提供了多种方法，如 hasOwnProperty(), keys(), values() 等。

示例：

const person = { name: "Alice", age: 25 };
const name = person.name; // 访问对象的属性
person.age = 26; // 修改对象的属性
const keys = Object.keys(person); // 使用 keys() 方法获取对象的键

类

类的语法为：class MyClass { ... }。在类中声明方法：method() { ... }。声明属性：prop: type。创建类的实例：const instance = new MyClass()。

示例：

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const alice = new Person("Alice", 25);
alice.greet(); // 输出 "Hello, my name is Alice and I'm 25 years old."

接口

接口的语法为：interface IMyInterface { ... }。在接口中声明方法：method(): type。声明属性：prop: type。实现接口：class MyClass implements IMyInterface { ... }。

示例：

interface Shape {
  area(): number;
}

class Circle implements Shape {
  radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  area(): number {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // 输出 78.53981633974483

泛型

泛型的语法为：<T>，表示一个泛型，它可以是任意值。使用泛型：function func<T>(arg: T): T。泛型与接口结合使用：interface IGenericInterface<T> { ... }。

示例：

function identity<T>(arg: T): T {
  return arg;
}

const number = identity(5); // number 为类型为 number 的值
const string = identity("Hello"); // string 为类型为 string 的值

装饰器

装饰器的定义为：function decorator(target: Class): void。使用装饰器：@decorator class MyClass { ... }。装饰器的实际用途是为类或方法等附加额外行为。

示例：

function log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} of class ${target.name} has been accessed.`);
}

class Person {
  @log
  name: string;
}

const alice = new Person();
alice.name; // 输出 "Property name of class Person has been accessed."