25 道常见的 TypeScript 面试题及答案

前端Q

我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～

公众号

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

编辑整理 | 杨小爱

TypeScript 是一种静态类型的、面向对象的编程语言，它是 JavaScript 框架 之一，它添加了可选的静态类型和其他功能。它由微软开发和维护，并迅速成为世界上最流行的编程框架之一。

因此，在今天这篇文章，我们将分享25道常见的 TypeScript 面试题，以及提供相关参考答案！无论您是一位经验丰富的 JavaScript 开发人员，还是希望过渡到 TypeScript ，或者是刚刚开始使用该框架，今天的内容都将帮助你为下一次面试做好准备。

这些面试题的主要目的是测试你对该语言及其功能的了解，以及你解决问题的能力和写可维护代码的能力。

现在，我们开始吧。

1. 什么是 TypeScript，为什么要用它？

TypeScript 是一种静态类型的面向对象的编程语言，它是 JavaScript 框架 之一，它添加了可选的静态类型和其他功能，由 Microsoft 开发和维护。

TypeScript 可以让我们的代码更易于维护和扩展，并提供更好的工具和编辑器支持。

2. TypeScript 的主要特点是什么？

TypeScript 的主要特性包括：

• 静态打字

• 接口

• 类和继承

• 模块

• 命名空间

• 装饰器

• 泛型

• 异步/等待

3. TypeScript 与 JavaScript 有何不同？

TypeScript 是 JavaScript 的超集，这意味着所有有效的 JavaScript 代码也是有效的 TypeScript 代码。然而，TypeScript 增加了 JavaScript 所没有的特性，例如静态类型和基于类的面向对象编程。

TypeScript 还具有更严格的类型系统，允许在编译时而不是运行时检测到错误。

4. TypeScript 如何与其他工具和库集成？

TypeScript 可以与 Angular 和 React 等流行的前端框架以及用于服务器端开发的 Node.js 等各种工具和库一起使用。

TypeScript 代码可以编译成纯 JavaScript，使其与任何支持 JavaScript 的环境兼容。

5. TypeScript 是如何进行类型检查的？

Typescript 使用类型系统在编译时执行类型检查。这可以通过允许在代码运行之前检测到错误来提高代码的可靠性和可维护性。

TypeScript 的类型系统是可选的，因此，开发人员可以随心所欲地使用它。

6.什么是TypeScript接口？

TypeScript 接口定义了指定对象外观的契约。它用于在对象上强制执行某些构造或保证对象实现某些属性或方法。

接口可用于使代码可重用和紧凑，或者通过使代码的意图更清晰来使代码更具可读性。

7. 什么是 TypeScript 类？它们与 JavaScript 类有何不同？

TypeScript 类提供了一种创建具有特定属性和方法的对象的方法。它们类似于其他面向对象编程语言中的类，提供了一种编写可重用和模块化代码的方法。

TypeScript 中的类是 JavaScript 原型的语法糖，并被翻译成 JavaScript 的构造函数。

8. 如何在 TypeScript 中定义类？

TypeScript 中的类可以使用 class 关键字定义，后跟类名。可以使用构造函数方法和公共或私有关键字将属性和方法添加到类中。

这是一个例子：

class Person {
  constructor(public name: string) {}  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

9. 什么是 TypeScript 模块，为什么要使用它们？

TypeScript 模块提供了一种通过将代码封装到不同文件中来组织和重用代码的方法。模块可以导出和导入到其他文件中，从而更容易跨多个文件和项目重用代码。模块还有助于避免命名冲突并提高代码的可服务性和可扩展性。

10. 如何在 TypeScript 中定义和导入/导出模块？

TypeScript 中的模块可以在声明类、函数或变量之前使用 export 关键字来定义。然后可以使用 import 关键字以及包含导出的文件的路径将这些导出导入到另一个文件中。

这是一个例子：

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}


// main.ts
import { add } from './math';


console.log(add(1, 2)); // 3

11. 什么是 TypeScript 命名空间？它与模块有何不同？

TypeScript 命名空间提供了一种以类似于模块的方式组织代码的方式，但语法略有不同。

命名空间允许将代码分组在通用名称下，从而避免名称冲突。但是，在 TypeScript 中，命名空间不像模块那样常用。

因为模块提供的功能更多，适合大型项目。

12. 在 TypeScript 中如何定义和使用命名空间？

可以使用 namespace 关键字后跟命名空间名称来定义 TypeScript 命名空间。

您可以使用声明关键字将代码添加到命名空间。

下面是一个例子。

namespace MyApp {
  export function doSomething() {
    console.log('Doing something');
  }
}


MyApp.doSomething(); // Doing something

13. 什么是 TypeScript 装饰器？

TypeScript 装饰器是一种向类、方法或属性添加额外行为的方法。

装饰器作为函数实现，可以使用@符号来应用。

装饰器可用于向类或方法添加元数据或添加功能等。

14. 如何使用 TypeScript 创建和使用装饰器？

TypeScript 装饰器是使用返回所需行为的函数创建的。

然后，可以通过在应用装饰器的类、方法或属性的声明之前描述@符号来应用装饰器。

这是一个例子。

function Logger(target: any, propertyKey: string) {
  console.log(`Calling ${propertyKey}`);
}


class MyClass {
  @Logger
  greet() {
    console.log('Hello');
  }
}


const instance = new MyClass();
instance.greet(); // Calling greet \n Hello

15. 什么是 TypeScript 中的泛型，它们是如何使用的？

TypeScript 中的泛型提供了一种通过编写可处理不同类型的函数、类和接口来编写可重用且灵活的代码的方法。

泛型可以用来实现类型安全，提高代码的可读性和可维护性。

16. TypeScript 中如何定义和使用泛型？

TypeScript 中的泛型是在函数、类和接口声明中使用方括号 <> 定义的，带有类型的占位符。并且可以在使用函数、类或接口时指定形状。

这是一个例子。

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


const result = identity<string>('Hello');
console.log(result); // Hello

17. TypeScript let 和 const 有什么区别？

TypeScript let 和 const 用于变量声明。let 和 const 之间的主要区别在于 let 可以重新分配变量，而 const 不能。

声明为 const 的变量在初始分配后不能更改其值。

18. TypeScript 中的 var 和 let 有什么区别？

TypeScript 的 var 和 let 用于声明变量，但它们有不同的作用域规则。用 var 声明的变量具有函数范围，只能在声明它的函数内访问。

用 let 声明的变量具有块作用域，只能在声明它们的块内访问。

通常建议在 TypeScript 中使用 let 而不是 var。

19. 什么时候使用 TypeScript any type？

TypeScript any type 用于指示变量、函数或参数可以保存任何类型的值。

在处理外部库或不是用 TypeScript 编写的代码时，或者在需要禁用特定变量的类型检查时，任何类型都是有用的。

但是，尽可能使用更具体的类型通常是个好主意。这是因为使用 any 可能会削弱使用 TypeScript 类型系统的好处。

20. TypeScript 的未知类型是什么，什么时候用？

TypeScript 的未知类型用于指示变量、函数或参数可以包含任何类型的值，但在使用前需要进行类型检查。

unknown 类型的限制比任何类型都多，当需要在使用前可靠地检查值时才有效。

21. TypeScript 中的 null 和 undefined 有什么区别？

在 TypeScript 中，null 和 undefined 用于指示值不存在或未知。

null 和 undefined 之间的主要区别在于，undefined 是已声明但未赋值的变量的默认值，而 null 被显式赋值以指示没有值。

22、TypeScript的void类型是什么，什么时候使用？

TypeScript 的 void 类型用于指示函数不返回值。void 类型对于定义执行某些操作但不返回值的函数很有用。

23. TypeScript 的 never type 是什么，什么时候用？

TypeScript 的 never 类型用于指示永远不会到达某个值或函数。never 类型可用于指示函数抛出错误或变量没有值。

24. 你如何在 TypeScript 中使用 async/await？

TypeScript 中的 async/await 用于编写易于阅读和维护的异步代码。异步函数返回一个promise，并且await 关键字可用于在继续执行代码之前等待promise的解决。这允许以类似于同步代码的方式编写异步代码，使其更易于理解和维护。

这是一个例子：

async function fetchData(): Promise<string> {
  const response = await fetch('https://api.example.com');
  const data = await response.json();
  return data;
}


fetchData().then(data => {
  console.log(data);
});

25. TypeScript 如何支持类型推断？

TypeScript 支持类型推断，这意味着它可以根据分配给它们的值自动确定变量和表达式的类型。这可以简化代码并减少所需的显式类型注释的数量。例如，在下面的代码中，TypeScript 会推断出 x 的类型是数字：

let x = 1;

类型推断也可用于函数返回类型和泛型类型，使其成为编写简洁且可维护的 TypeScript 代码的强大工具。

总结

TypeScript 是一种建立在 JavaScript 基础上的强大框架，如果你要学习TypeScript的话，需要一定的JavaScript语言基础。

希望我今天跟你分享的这25道TypeScript面试题能帮助到你，不管是在日常工作中，还是面试中，希望你都能发现它的有用之处。

往期推荐

探索 SolidJS，一起体验开源项目（solidjs-use）的乐趣

2023 年的前端渲染框架

使用发布订阅，构建多功能、多方向的全新 Message

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

前端Q

本公众号主要分享一些技术圈(前端圈为主)相关的技术文章、工具资源、学习资料、招聘信息及其他有趣的东西...

公众号

点个在看支持我吧