前端面试题大合集9----TypeScript

目录

一、TypeScript 中静态类型的概念及其好处

二、如何在 TypeScript 的接口中定义可选属性？

三、解释 TypeScript 中联合类型的概念并提供示例

四、TypeScript 中的类型断言是什么？

五、TS中泛型是什么？

六、解释 TypeScript 中的“keyof”关键字

七、 TypeScript 中的类型保护是什么

八、解释 TypeScript 中条件类型的概念

九、TypeScript 中的映射类型是什么

十、解释 TypeScript 中的“部分”实用程序类型

十一、TypeScript 中的“只读”实用程序类型

十二、映射类型中的“键重新映射”和“值重新映射”是什么

十三、解释 TypeScript 中的“Pick”实用程序类型

十四、TypeScript 中的“Omit”实用程序类型是什么

十五、TypeScript 中的“条件映射类型”是什么

十六、条件类型中“keyof”和“in”关键字的用途是什么

十七、解释 TypeScript 中的“排除”实用程序类型

十八、TypeScript 中的“模板文字类型”是什么

十九、解释条件类型中的“infer”关键字

二十、TypeScript 中的“keyof”和“typeof”关键字有何用途

二一、TypeScript 中的“const 断言”是什么

二三、解释 TypeScript 条件类型中的“keyof T extends K”构造

二四、TypeScript 中的“mixins”是什么

二五、TypeScript 中的“装饰器”是什么

二六、解释 TypeScript 中的“abstract”关键字

二七、什么是 TypeScript 中的“条件类型”

二八、TypeScript 中的“模块增强”是什么

二九、TypeScript 接口中的“索引签名”是什么

三十、TypeScript 中的“类型谓词”是什么

---

TypeScript 是 JavaScript 的超集，为该语言添加了静态类型。它允许开发人员定义变量、函数参数和返回值的数据类型，这有助于在编译时而不是运行时捕获错误。这是一个例子：

function greet(name: string): string {
  return `Hello, ${name}!`;
}
const message: string = greet('John');
console.log(message); // Output: "Hello, John!"

一、TypeScript 中静态类型的概念及其好处

TypeScript 中的静态类型可以在开发过程中指定变量、函数参数和返回值的数据类型。这有助于及早捕获与类型相关的错误，从而提高代码质量和可维护性。

好处是拥有更好的代码文档、增强的工具支持以及提高的开发人员生产力。

二、如何在 TypeScript 的接口中定义可选属性？

您可以使用 ? 在接口中定义可选属性。属性名称后面的修饰符。可选属性可能存在于实现该接口的对象中，也可能不存在。这是一个例子：

interface Person {
  name: string;
  age?: number;
}
const john: Person = { name: 'John' };
const jane: Person = { name: 'Jane', age: 25 };

三、解释 TypeScript 中联合类型的概念并提供示例

联合类型允许一个变量有多种类型。它通过使用 | 来表示类型之间的符号。这允许变量存储任何指定类型的值。这是一个例子：

function printId(id: number | string): void {
  console.log(`ID: ${id}`);
}
printId(123); // Output: "ID: 123"
printId('abc'); // Output: "ID: abc"

四、TypeScript 中的类型断言是什么？

当无法自动推断类型时，TypeScript 中的类型断言允许您显式告诉编译器变量的类型。这是使用 <type> 或 as type 语法实现的。这是一个例子：

let length: any = '5';
let numberLength: number = <number>length; // Using <type> syntax
let stringLength: number = length as number; // Using "as type" syntax

五、TS中泛型是什么？

TypeScript 中的泛型允许您创建可与各种类型一起使用的可重用组件或函数。它们支持强类型，同时保持使用不同数据类型的灵活性。这是一个例子：

function identity<T>(arg: T): T {
  return arg;
}
const result1 = identity<number>(42); // Explicitly specifying the type
const result2 = identity('hello'); // Inferring the type

六、解释 TypeScript 中的“keyof”关键字

TypeScript 中的“keyof”关键字是一个类型运算符，它返回表示对象键的文字类型的联合。它允许您对对象键执行类型安全操作。这是一个例子：

interface Person {
  name: string;
  age: number;
}
type PersonKeys = keyof Person; // "name" | "age"

七、 TypeScript 中的类型保护是什么

类型保护是 TypeScript 表达式，它在运行时检查变量的类型，并允许您根据类型执行不同的操作。它们可以实现更好的类型推断，并提供一种更有效地处理联合类型的方法。

这是使用 typeof 和 instanceof 类型保护的示例：

function printValue(value: string | number): void {
  if (typeof value === 'string') {
    console.log(`The value is a string: ${value}`);
  } else if (typeof value === 'number') {
    console.log(`The value is a number: ${value}`);
  }
}
class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
function greet(person: Person | string): void {
  if (person instanceof Person) {
    console.log(`Hello, ${person.name}!`);
  } else if (typeof person === 'string') {
    console.log(`Hello, ${person}!`);
  }
}
const stringValue: string = 'Hello';
const numberValue: number = 42;

printValue(stringValue); // Output: "The value is a string: Hello"
printValue(numberValue); // Output: "The value is a number: 42"

const john: Person = new Person('John');

greet(john); // Output: "Hello, John!"
greet('Jane'); // Output: "Hello, Jane!"

八、解释 TypeScript 中条件类型的概念

TypeScript 中的条件类型允许您创建依赖于条件的类型。它们用于根据类型之间的关系执行类型推断。这是一个例子：

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function add(a: number, b: number): number {
  return a + b;
}
type AddReturnType = ReturnType<typeof add>; // number

在此示例中，ReturnType 是推断函数返回类型的条件类型。

九、TypeScript 中的映射类型是什么

TypeScript 中的映射类型允许您通过将属性映射到新类型来基于现有类型创建新类型。它们使您能够轻松修改现有类型或向现有类型添加属性。这是一个例子：

interface Person {
  name: string;
  age: number;
}
type PersonWithOptionalProperties = { [K in keyof Person]?: Person[K] };
const john: Person = { name: 'John', age: 30 };
const johnWithOptionalProperties: PersonWithOptionalProperties = { name: 'John' };

在此示例中，PersonWithOptionalProperties 是一个映射类型，它使 Person 的所有属性都是可选的。

十、解释 TypeScript 中的“部分”实用程序类型

TypeScript 中的“部分”实用程序类型用于使现有类型的所有属性成为可选。它允许您从现有类型创建具有可选属性的新类型。这是一个例子：

interface Person {
  name: string;
  age: number;
}
type PartialPerson = Partial<Person>;
const john: PartialPerson = { name: 'John' };

在此示例中，PartialPerson 是具有来自 Person 接口的可选属性的类型。

十一、TypeScript 中的“只读”实用程序类型

TypeScript 中的“Readonly”实用程序类型用于使现有类型的所有属性变为只读。它可以防止对象创建后修改其属性。这是一个例子：

interface Person {
  readonly name: string;
  age: number;
}
const john: Readonly<Person> = { name: 'John', age: 30 };
john.age = 31; // Error: Cannot assign to 'age' because it is a read-only property.

十二、映射类型中的“键重新映射”和“值重新映射”是什么

“键重映射”和“值重映射”是 TypeScript 中映射类型的两个特性。

“键重新映射”允许您使用 as 关键字更改现有类型的键。这是一个例子：

interface Person {
  name: string;
  age: number;
}
type MappedPerson = { [K in keyof Person as `new_${K}`]: Person[K] };
const john: MappedPerson = { new_name: 'John', new_age: 30 };

在此示例中，Person 的键被重新映射为具有前缀“new_”。

“值重新映射”允许您使用条件类型更改现有类型的值。这是一个例子：

type ValueRemapped<T> = T extends 'a' ? 'x' : T extends 'b' ? 'y' : 'z';
type Result = ValueRemapped<'a' | 'b' | 'c'>; // Result: 'x' | 'y' | 'z'

在此示例中，值“a”、“b”和“c”分别重新映射为“x”、“y”和“z”。

十三、解释 TypeScript 中的“Pick”实用程序类型

TypeScript 中的“Pick”实用程序类型允许您通过从现有类型中选择特定属性来创建新类型。它有助于创建现有类型的子集。这是一个例子：

interface Person {
  name: string;
  age: number;
  city: string;
}
type PersonInfo = Pick<Person, 'name' | 'age'>;
const john: PersonInfo = { name: 'John', age: 30 };

在此示例中，PersonInfo 是仅包含 Person 接口中的“name”和“age”属性的类型。

十四、TypeScript 中的“Omit”实用程序类型是什么

TypeScript 中的“Omit”实用程序类型允许您通过从现有类型中排除特定属性来创建新类型。它有助于创建删除了某些属性的类型。这是一个例子：

interface Person {
  name: string;
  age: number;
  city: string;
}
type PersonWithoutCity = Omit<Person, 'city'>;
const john: PersonWithoutCity = { name: 'John', age: 30 };

在此示例中，PersonWithoutCity 是一种从 Person 接口中排除“city”属性的类型。

十五、TypeScript 中的“条件映射类型”是什么

条件映射类型将条件类型和映射类型结合起来，根据条件执行类型转换。它们允许您根据现有类型的属性创建动态类型。这是一个例子：

interface Person {
  name: string;
  age: number;
}
type MappedConditional<T> = {
  [K in keyof T]: T[K] extends number ? string : T[K];
};
const john: MappedConditional<Person> = { name: 'John', age: '30' };

在此示例中，MappedConditional 是一个条件映射类型，它将 Person 的数字属性转换为字符串。

十六、条件类型中“keyof”和“in”关键字的用途是什么

条件类型中的“keyof”关键字用于获取对象类型的键的并集。它允许您以类型安全的方式使用对象的键。“in”关键字检查属性键是否存在于从“keyof”获得的键的并集中。这是一个例子：

type CheckKey<T, K extends keyof T> = K extends 'name' ? true : false;
interface Person {
  name: string;
  age: number;
}
type IsNameKey = CheckKey<Person, 'name'>; // Result: true
type IsCityKey = CheckKey<Person, 'city'>; // Result: false

在此示例中，CheckKey 是一个条件类型，用于检查提供的键是否为“name”。

十七、解释 TypeScript 中的“排除”实用程序类型

TypeScript 中的“排除”实用程序类型允许您通过从联合中排除某些类型来创建新类型。它有助于创建联合类型的子集。这是一个例子：

type Color = 'red' | 'green' | 'blue';
type PrimaryColors = Exclude<Color, 'green' | 'blue'>;
const primary: PrimaryColors = 'red'; // Okay
const invalidColor: PrimaryColors = 'green'; // Error: Type '"green"' is not assignable to type 'PrimaryColors'.

在此示例中，PrimaryColors 是一种从颜色联合中排除“绿色”和“蓝色”颜色的类型。

十八、TypeScript 中的“模板文字类型”是什么

TypeScript 中的模板文字类型允许您使用模板文字语法来操作类型中的字符串。它们提供了一种基于字符串模式创建复杂类型的方法。这是一个例子：

type Greeting<T extends string> = `Hello, ${T}!`;
type GreetJohn = Greeting<'John'>; // Result: "Hello, John!"
type GreetJane = Greeting<'Jane'>; // Result: "Hello, Jane!"

在此示例中，Greeting 是一个模板文字类型，它根据提供的名称生成问候语。

十九、解释条件类型中的“infer”关键字

条件类型中的“infer”关键字用于从条件类型中的另一种类型推断出类型。它允许您捕获类型并将其分配给类型变量。这是一个例子：

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function add(a: number, b: number): number {
  return a + b;
}
type AddReturnType = ReturnType<typeof add>; // Result: number

在此示例中，ReturnType 是一个条件类型，它使用“infer”关键字推断函数的返回类型。

二十、TypeScript 中的“keyof”和“typeof”关键字有何用途

“keyof”关键字用于获取对象类型的键的并集，“typeof”关键字用于获取值的类型。以下是每个示例：

interface Person {
  name: string;
  age: number;
}
type PersonKeys = keyof Person; // Result: "name" | "age"
const john = { name: 'John', age: 30 };
type JohnType = typeof john; // Result: { name: string, age: number }

在第一个示例中，PersonKeys 是表示 Person 接口的键联合的类型。在第二个示例中，JohnType 是表示 john 对象类型的类型。

二一、TypeScript 中的“const 断言”是什么

TypeScript 中的“Const 断言”允许您通知编译器特定的文字表达式应被视为文字而不是扩展类型。这是一个例子：

function getConfig() {
  const config = {
    apiUrl: 'https://api.example.com',
    timeout: 5000,
  } as const;
  return config;
}
const config = getConfig();
// config is inferred as:
// {
//   readonly apiUrl: "https://api.example.com";
//   readonly timeout: 5000;
// }

在此示例中，由于 as const 断言，config 对象被视为具有只读属性的常量对象。

二二、TypeScript 中的“私有”和“受保护”访问修饰符是什么

“Private”和“protected”是 TypeScript 中的访问修饰符，用于控制类成员的可见性和可访问性。

class Person {
  private name: string;
  protected age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}, and I am ${this.age} years old.`);
  }
}
class Employee extends Person {
  private salary: number;
  constructor(name: string, age: number, salary: number) {
    super(name, age);
    this.salary = salary;
  }
  showSalary() {
    console.log(`My salary is ${this.salary}.`);
  }
}
const john = new Person('John', 30);
console.log(john.name); // Error: Property 'name' is private and only accessible within class 'Person'.
console.log(john.age); // Error: Property 'age' is protected and only accessible within class 'Person' and its subclasses.
const employee = new Employee('Jane', 25, 50000);
employee.greet(); // Output: "Hello, my name is Jane, and I am 25 years old."
employee.showSalary(); // Output: "My salary is 50000."
console.log(employee.salary); // Error: Property 'salary' is private and only accessible within class 'Employee'.

在此示例中，name 属性具有“private”访问修饰符，age 属性有“protected”访问修饰符。工资属性是 Employee 类私有的。

二三、解释 TypeScript 条件类型中的“keyof T extends K”构造

TypeScript 条件类型中的“keyof T extends K”构造用于使用“extends”关键字根据指定条件过滤对象类型的键。这是一个例子：

type FilterProperties<T, K> = {
  [P in keyof T as T[P] extends K ? P : never]: T[P];
};
interface Person {
  name: string;
  age: number;
  email: string;
}
type StringProperties = FilterProperties<Person, string>;
// Result: {
//   name: string;
//   email: string;
// }
type NumberProperties = FilterProperties<Person, number>;
// Result: {
//   age: number;
// }

在此示例中，FilterProperties 是一个条件映射类型，它根据值类型过滤 Person 的属性。

二四、TypeScript 中的“mixins”是什么

TypeScript 中的 Mixins 允许您通过将某个类与一个或多个其他类组合来向该类添加行为。它支持代码重用和组合。这是一个 mixin 的例子：

class Printable {
  print() {
    console.log(this.toString());
  }
}
class MyObject {
  constructor(private name: string) {}
  toString() {
    return `Object: ${this.name}`;
  }
}
interface MyObject extends Printable {}
const myObj = new MyObject('example');
myObj.print(); // Output: "Object: example"

在此示例中，Printable 类充当 mixin，将 print 方法添加到 MyObject 类。

二五、TypeScript 中的“装饰器”是什么

装饰器是 TypeScript 的一项功能，允许您修改类、方法或属性的行为。它们使用 @decoratorName 语法声明并在运行时执行。这是一个简单的类装饰器的示例：

function MyClassDecorator<T extends { new (...args: any[]): {} }>(constructor: T) {
  return class extends constructor {
    newProperty = 'decorated property';
    hello = 'overridden';
  };
}
@MyClassDecorator
class MyClass {
  hello: string;
  constructor() {
    this.hello = 'world';
  }
}
const myClassInstance = new MyClass();
console.log(myClassInstance.hello); // Output: "overridden"
console.log((myClassInstance as any).newProperty); // Output: "decorated property"

二六、解释 TypeScript 中的“abstract”关键字

TypeScript 中的“abstract”关键字用于定义抽象类和方法。抽象类不能直接实例化；它们只能被延长。抽象方法在抽象类中没有实现，必须在派生类中实现。这是一个例子：

abstract class Shape {
  abstract area(): number;
}
class Circle extends Shape {
  constructor(private radius: number) {
    super();
  }
  area(): number {
    return Math.PI * this.radius ** 2;
  }
}
const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

在此示例中，Shape 类是一个具有抽象方法 area() 的抽象类。Circle 类扩展了 Shape 类并实现了 area() 方法。

二七、什么是 TypeScript 中的“条件类型”

TypeScript 中的条件类型允许您根据条件执行类型转换。它们使您能够创建依赖于其他类型之间关系的动态类型。这是一个例子：

type IsString<T> = T extends string ? true : false;
type CheckString = IsString<string>; // Result: true
type CheckNumber = IsString<number>; // Result: false

在此示例中，IsString 条件类型检查提供的类型是否为字符串。

二八、TypeScript 中的“模块增强”是什么

TypeScript 中的模块扩充允许您在外部模块中添加新声明或扩展现有声明。当您想要向第三方库添加功能时，它非常有用。这是一个例子：

// Original module in a third-party library
// external-library.d.ts
declare module 'external-library' {
  export function greet(name: string): string;
}
// Augment the module
// augmentations.d.ts
declare module 'external-library' {
  export function goodbye(name: string): string;
}
// Usage
import { greet, goodbye } from 'external-library';
console.log(greet('John')); // Output: "Hello, John!"
console.log(goodbye('John')); // Output: "Goodbye, John!"

在此示例中，我们通过添加 goodbye 函数来增强“external-library”模块。

二九、TypeScript 接口中的“索引签名”是什么

TypeScript 接口中的索引签名允许您根据属性的名称定义属性的类型。它们用于定义具有动态属性名称的对象。这是一个例子：

interface Dictionary {
  [key: string]: number;
}
const data: Dictionary = {
  apple: 1,
  banana: 2,
};
const value = data['banana'];
console.log(value); // Output: 2

三十、TypeScript 中的“类型谓词”是什么

TypeScript 中的类型谓词用于缩小条件块中值的类型范围。它们提供了一种执行类型检查并获取更具体类型的方法。这是一个例子：

function isString(value: any): value is string {
  return typeof value === 'string';
}
function printLength(value: string | number): void {
  if (isString(value)) {
    console.log(`The length of the string is ${value.length}.`);
  } else {
    console.log(`The value is a number: ${value}`);
  }
}
printLength('Hello'); // Output: "The length of the string is 5."
printLength(42); // Output: "The value is a number: 42."

在此示例中，isString 函数是一个类型谓词，用于检查值是否为字符串。