TypeScript面试题和答案(2024年收集更新)
2024年收集更新的TypeScript面试题和答案，下面列出了最常见的 TypeScript 面试问题和答案。
TypeScript 是由 Microsoft 开发和维护的免费开源编程语言。它是 JavaScript 的强类型超集，可编译为纯 JavaScript。它是一种用于应用程序级 JavaScript 开发的语言。对于熟悉 C#、Java 和所有强类型语言的开发人员来说，TypeScript 非常容易学习和使用。
TypeScript 可以在任何浏览器、任何主机和任何操作系统上执行。TypeScript 不直接在浏览器上运行。它需要一个编译器来编译并生成 JavaScript 文件。TypeScr...
完整答案
TypeScript 在以下方面与 JavaScript 不同：
编号
JavaScript
TypeScript
1
它由 Netscape 于 1995 年开发。
它由 Anders Hejlsberg 于 2012 年开发。
2
JavaScript 源文件的扩展名为.js。TypeScript 源文件的扩展名为.ts。
3
JavaScript 不支持 ES6。
TypeScript 支持 ES6。
4
它不支持强类型或静态类型。
它支持强类型或静态类型功能。
...
完整答案
基于以下特点/原因需要 TypeScript：
TypeScript 快速、简单，最重要的是，易于学习。TypeScript 支持面向对象的编程特性，例如类、接口、继承、泛型等。TypeScript 在编译时提供错误检查功能。它将编译代码，如果发现任何错误，它会在脚本运行之前突出显示错误。TypeScript 支持所有 JavaScript 库，因为它是 JavaScript 的超集。TypeScript 通过使用继承来支持可重用性。TypeScript 使应用程序开发尽可能快速和简单，Typ...
完整答案
Typescript有以下特性：
完整答案
TypeScript 具有以下优点：
Typescript提供了可选静态类型的好处。在这里，Typescript 提供了可以添加到变量、函数、属性等的类型。Typescript 能够编译成可在所有浏览器上运行的 JavaScript 版本。TypeScript 总是在开发期间在编译时突出显示错误，而 JavaScript 在运行时指出错误。TypeScript 支持强类型或静态类型，而这在 JavaScript 中不支持。TypeScript有助于代码结构。TypeScript使用基于类的面向...
完整答案
TypeScript 有以下缺点：
TypeScript 需要很长时间来编译代码。TypeScript 不支持抽象类。如果在浏览器中运行 TypeScript 应用程序，则需要一个编译步骤将 TypeScript 转换为 JavaScript。几十年来，Web 开发人员一直在使用 JavaScript，而 TypeScript 并没有带来任何新东西。要使用任何第三方库，定义文件是必须的。并不是所有的第三方库都有可用的定义文件。类型定义文件的质量是一个问题，如何确定定义是正确的？
完整答案
TypeScript主要包含三个组件。这些组件有：
语言 - 该语言包含新语法、关键字、类型注释等元素，并允许我们编写 TypeScript。编译器 - TypeScript 编译器是开源的、跨平台的，并且是用 TypeScript 编写的。它将用 TypeScript 编写的代码转换为与其 JavaScript 代码等效的代码。它执行我们的 TypeScript 代码到 JavaScript 代码的解析、类型检查。它还可以帮助将不同的文件连接到单个输出文件并生成源映射。语言服务 - 语言...
完整答案
Typescript由 Anders Hejlsberg 开发，他也是 C# 语言开发团队的核心成员之一。Typescript 于 2012 年 10 月 1 日首次发布，版本号为 0.8。它由微软在 Apache 2 许可下开发和维护。它是为开发大型应用程序而设计的。
目前 TypeScript 的稳定版本是 4.6，于 2022 年 2 月 28 日发布。Typescript 编译为简单的 JavaScript 代码，可在任何支持 ECMAScript 2015 框架的浏览器上运行。它提供对...
完整答案
TypeScript 可以通过 npm(Node.js 包管理器)在 node 的帮助下安装和管理。要安装 TypeScript，首先确保 npm 安装正确，然后运行以下命令在系统上全局安装 TypeScript。
$ npm install -g typescript
它安装了一个命令行代码tsc，它将进一步用于编译 Typescript 代码。确保检查系统上安装的 Typescript 的版本。
安装 TypeScript 涉及以下步骤：
下载并运行节点的 .msi 安装程序。输入命令n...
完整答案
内置数据类型在 Typescript 中也称为原始数据类型。这些内置类型如下：
数字类型： 用于表示数字类型值。TypeScript 中的所有数字都存储为浮点值。语法：let identifier: number = value;字符串类型：它表示存储为 Unicode UTF-16 代码的字符序列。在脚本中包含字符串文字，方法是用单引号或双引号将它们括起来。语法：let identifier: string = " ";布尔类型： 用于表示一个逻辑值。当使用布尔类型时，只...
完整答案
变量是存储位置，用于存储程序要引用和使用的值/信息。它充当程序中价值的容器。可以使用 var 关键字声明它，应在使用前声明。在 Typescript 中声明变量时，应遵循某些规则-
变量名称必须是字母或数字。变量名不能以数字开头。变量名不能包含空格和特殊字符，下划线 (_) 和美元 ($) 符号除外。
可以通过以下四种方式之一声明变量：
在单个语句中声明类型和值。语法：var [identifier] : [type-annotation] = value;。声明没有值的类型。语法：var ...
完整答案
下面是将 Typescript 文件编译为 JavaScript 时遵循的命令：
$ tsc <TypeScript File Name>
例如，编译“Helloworld.ts”，那么：
$ tsc helloworld.ts
输出结果是：helloworld.js
完整答案
这是可以的。需要添加 —outFILE [OutputJSFileName] 编译选项。
$ tsc --outFile comman.js file1.ts file2.ts file3.ts
上述命令将编译所有三个.ts文件，结果将存储到单个comman.js文件中。在这种情况下，当没有像下面的命令那样提供输出文件名时。
$ tsc --outFile file1.ts file2.ts file3.ts
然后，file2.ts和file3.ts会被编译，输出会放在file1.ts中。所...
完整答案
是的，可以通过 .ts 文件中的实时更改自动编译.ts。这可以通过使用 --watch 编译器选项来实现。
tsc --watch file1.ts
上面的命令首先编译 file1.js 中的 file1.ts 并观察文件的变化。如果检测到任何更改，它将再次编译该文件。在这里，需要确保在使用 --watch 选项运行时不能关闭命令提示符。
完整答案
接口是在应用程序中充当合约的结构。它定义了类要遵循的语法，这意味着实现接口的类必须实现其所有成员。它不能被实例化，但可以被实现它的类对象引用。TypeScript 编译器使用接口进行类型检查(也称为“鸭子类型”或“结构子类型”)，无论对象是否具有特定结构。
语法：
interface interface_name {
// variables' declaration
// methods' declaration
...
完整答案
我们知道，TypeScript 是一种面向对象的 JavaScript 语言，支持类、接口等 OOP 编程特性。与 Java 一样，类是用于创建可重用组件的基本实体。它是一组具有共同属性的对象。类是用于创建对象的模板或蓝图。它是一个逻辑实体。class关键字用于在 Typescript 中声明一个类。
例子：
class Student {
studCode: number;
studName: string;
constructor(code: ...
完整答案
不支持。目前，原生 JavaScript 不支持模块。要在 Javascript 中创建和使用模块，需要像 CommonJS 这样的外部模块。
完整答案
TypeScript 支持以下面向对象的术语：
模块类接口继承数据类型成员函数
完整答案
super() 函数用于从子类调用父类或基类构造函数。
完整答案
继承是一种从另一个类获取一个类的属性和行为的机制。它是 OOP 语言的一个重要方面，具有从现有类创建新类的能力。其成员被继承的类称为基类，继承这些成员的类称为派生类。可以使用 extend 关键字来实现继承。可以通过下面的例子来理解。
class Shape {
Area:number
constructor(area:number) {
this.Area = area
}
}
class Circle e...
完整答案
模块是创建一组相关变量、函数、类和接口等的强大方法。它可以在自己的范围内执行，而不是在全局范围内执行。换句话说，模块中声明的变量、函数、类和接口不能在模块外部直接访问。
创建模块
一个模块可以使用 export 关键字创建，也可以在其他模块中使用 import 关键字。
module module_name{
class xyz{
export sum(x, y){
return x+y;
}
}
...
完整答案
内部模块和外部模块的区别如下：
编号
内部模块
外部模块
1
内部模块用于在逻辑上将类、接口、函数、变量分组到一个单元中，并且可以在另一个模块中导出。
外部模块在隐藏模块定义的内部语句时很有用，并且只显示与声明的变量相关的方法和参数。
2
内部模块在早期版本的 Typescript 中。但是在最新版本的 TypeScript 中使用命名空间仍然支持它们。
外部模块在最新版本的 TypeScript 中简称为模块。
3
内部模块是其他模块(包括全局模块和外部模块)的本地或导出...
完整答案
命名空间是一种用于对功能进行逻辑分组的方式。命名空间用于在内部维护 typescript 的遗留代码。它封装了共享某些关系的特征和对象。命名空间也称为内部模块。命名空间还可以包括接口、类、函数和变量，以支持一组相关功能。
注意：一个命名空间可以在多个文件中定义，并允许保留每个文件，因为它们都在一个地方定义。它使代码更易于维护。
创建命名空间的语法：
namespace <namespace_name> {
export interface I1 { ...
完整答案
装饰器是一种特殊的声明，可以应用于类、方法、访问器、属性或参数。装饰器只是以 @expression 符号为前缀的函数，其中表达式必须计算为一个函数，该函数将在运行时使用有关装饰声明的信息进行调用。
TypeScript 装饰器的目的是以声明的方式将注释和元数据添加到现有代码中。装饰器是为 ES7 提议的一个实验性特性。它已经被包括 Angular 2 在内的一些 JavaScript 框架使用。装饰器可能会在未来的版本中发生变化。
要启用对装饰器的实验性支持，需要在命令行或 tsconfig....
完整答案
在 Javascript 中，Mixins 是一种从可重用组件构建类的方法，它是通过组合称为 mixins 的更简单的部分类来构建它们。这个想法很简单，而不是类 A 扩展类 B 以获取其功能，函数 B 获取类 A 并返回一个具有此附加功能的新类。函数 B 是一个 mixin。
完整答案
Public 是 TypeScript 类中属性/方法的默认可见性。
完整答案
与 JavaScript 不同的是，如果我们尝试调用函数而不提供函数签名中声明的参数的确切数量和类型，TypeScript 编译器将抛出错误。为了克服这个问题，可以通过使用问号(?)来使用可选参数。这意味着可能会或可能不会收到值的参数可以附加一个? 将它们标记为可选。
function Demo(arg1: number, arg2? :number) {
} // So, arg1 is always required, and arg2 is an optiona...
完整答案
是的，TypeScript 支持函数重载。但是实现很奇怪。当我们在 TypeScript 中执行函数重载时，我们只能实现一个具有多个签名的函数。
//Function with string type parameter
function add(a:string, b:string): string;
//Function with number type parameter
function add(a:number, b:number): number;
...
完整答案
是的。要调试任何 TypeScript 文件，我们需要 .js 源映射文件。因此，使用 --sourcemap 标志编译 .ts 文件以生成源映射文件。
$ tsc -sourcemap file1.ts
这将创建 file1.js 和 file1.js.map。file1.js 的最后一行是源映射文件的引用。
//# sourceMappingURL=file1.js.map
完整答案
TypeScript Definition Manager (TSD) 是一个包管理器，用于直接从社区驱动的DefinitelyTyped 存储库中搜索和安装TypeScript 定义文件。假设，想在 .ts 文件中使用一些 jQuery 代码。
$(document).ready(function() { //Your jQuery code });
现在，当尝试使用 tsc 编译它时，它会给出一个编译时错误：找不到名称$。所以需要通知 TypeScript 编译器$是属于 jQuery 的...
完整答案
知道所有 JavaScript 库/框架都没有 TypeScript 声明文件，但希望在 TypeScript 文件中使用它们而不会出现任何编译错误。为此，使用 declare 关键字。declare 关键字用于环境声明和想要定义可能存在于别处的变量的方法。
例如，假设有一个名为 myLibrary 的库，它没有 TypeScript 声明文件，并且在全局命名空间中有一个名为 myLibrary 的命名空间。如果想在 TypeScript 代码中使用该库，可以使用以下代码：
declare va...
完整答案
我们可以使用 tsc 编译器从任何 .ts 文件生成 TypeScript 定义文件。它将生成一个 TypeScript 定义，使 TypeScript 文件可重用。
$ tsc --declaration file1.ts
完整答案
tsconfig.json 文件是 JSON 格式的文件。在 tsconfig.json 文件中，可以指定各种选项来告诉编译器如何编译当前项目。目录中存在 tsconfig.json 文件表明该目录是 TypeScript 项目的根目录。下面是一个示例 tsconfig.json 文件的内容：
{
"compilerOptions": {
"declaration": true,
"emitDec...
完整答案
TypeScript 泛型是一种工具，它提供了一种创建可重用组件的方法。它能够创建可以处理多种数据类型而不是单一数据类型的组件。泛型在不影响性能或生产力的情况下提供类型安全。泛型允许创建泛型类、泛型函数、泛型方法和泛型接口。
在泛型中，类型参数写在开 (<) 和闭 (>) 括号之间，这使其成为强类型集合。泛型使用一种特殊的类型变量 <T> 来表示类型。泛型集合仅包含相似类型的对象。
function identity<T>(arg: T): T { ...
完整答案
是的，TypeScript 支持所有面向对象的原则。面向对象编程有四个主要原则：
封装继承抽象多态性
完整答案
通过使用杂耍检查(juggling-check)，我们可以检查 null 和 undefined：
if (x == null) {
}
如果使用严格检查，则对于设置为 null 的值将始终为 true，并且对于未定义的变量不会评估为 true。
例子
var a: number;
var b: number = null;
function check(x, name) {
if (x == null) {
console.log(name + &...
完整答案
是的，可以在后端使用 TypeScript。可以通过下面的例子来理解它。在这里，选择 Node.js 并具有一些额外的类型安全性和该语言带来的其他抽象。
第1步：安装 Typescript 编译器：
$ npm i -g typescript
第2步：TypeScript 编译器采用 tsconfig.json 文件中的选项。此文件确定将构建文件放在何处。
{
"compilerOptions": {
"target": "...
完整答案
interface语句和type语句的主要区别：
interface X {
a: number
b: string
}
type X = {
a: number
b: string
};
编号
interface语句
type语句
1
接口声明总是引入命名对象类型。
类型别名声明可以为任何类型的类型引入名称，包括原始类型、联合类型和交集类型。
2
接口可以在extends 或implements 子句中命名。
对象...
完整答案
环境声明告诉编译器实际源代码存在于别处。如果这些源代码在运行时不存在并且我们尝试使用它们，那么它将在没有警告的情况下中断。环境声明文件类似于 docs 文件。如果源发生变化，文档也需要保持更新。如果环境声明文件没有更新，那么将得到编译器错误。Ambient 声明允许我们安全、轻松地使用现有的流行 JavaScript 库，如 jquery、angularjs、nodejs 等。
完整答案
TypeScript Map 文件是一个源映射文件，其中包含有关原始文件的信息。.map 文件是源映射文件，它允许工具在发出的 JavaScript 代码和创建它的 TypeScript 源文件之间进行映射。许多调试器可以使用这些文件，因此可以调试 TypeScript 文件而不是 JavaScript 文件。
完整答案
类型断言的工作方式类似于其他语言中的类型转换，但它不像其他语言(如 C# 和 Java)那样执行类型检查或数据重组。类型转换带有运行时支持，而类型断言对运行时没有影响。但是，类型断言纯粹由编译器使用，并为编译器提供有关我们希望如何分析代码的提示。
例子
let empCode: any = 111;
let employeeCode = <number> code;
console.log(typeof(employeeCode)); //Output: numb...
完整答案
as 是 TypeScript 中类型断言的附加语法。引入 as-syntax 的原因是原始语法 (<type>) 与 JSX 冲突。
例子
let empCode: any = 111;
let employeeCode = code as number;
将 TypeScript 与 JSX 一起使用时，只允许使用 as 样式的断言。
完整答案
JSX 只是具有不同扩展名的 Javascript。Facebook 提出了这个新扩展，以便他们可以区别于 JavaScript 中类似 XML 的 HTML 实现。JSX 是一种可嵌入的类 XML 语法。它旨在转换为有效的 JavaScript。JSX 在 React 框架中流行起来。TypeScript 支持将 JSX 直接嵌入、类型检查和编译到 JavaScript 中。要使用 JSX，必须做两件事。
使用 .tsx 扩展名命名文件启用 jsx 选项
完整答案
rest参数用于将零个或多个值传递给函数。它是通过在参数前添加三个点字符 (...) 来声明的。它允许函数在不使用 arguments 对象的情况下拥有可变数量的参数。当有不确定数量的参数时，它非常有用。
rest参数要遵循的规则：
一个函数中只允许有一个剩余参数。它必须是数组类型。它必须是参数列表中的最后一个参数。
示例代码：
function sum(a: number, ...b: number[]): number {
let result = a;
f...
完整答案
枚举或枚举是一种 TypeScipt 数据类型，它允许我们定义一组命名常量。使用枚举可以更轻松地记录意图，或创建一组不同的案例。它是相关值的集合，可以是数字或字符串值。例子
enum Gender {
Male,
Female
Other
}
console.log(Gender.Female); // Output: 1
//We can also access an enum value by it's number value.
consol...
完整答案
非相对模块导入：可以相对于 baseUrl 或通过路径映射来解析非相对导入。换句话说，在导入任何外部依赖项时使用非相对路径。例子：
import * as $ from "jquery";
import { Component } from "@angular/core";
相对模块导入：相对导入可以用于我们自己的模块，这些模块保证在运行时保持它们的相对位置。相对导入以 /、./ 或 ../ 开头。
示例代码：
import Entry from &qu...
完整答案
匿名函数是在没有任何命名标识符的情况下声明的函数。这些函数在运行时动态声明。就像标准函数一样，匿名函数可以接受输入并返回输出。匿名函数在初始创建后通常无法访问。
例子
let myAdd = function(x: number, y: number): number {
return x + y;
};
console.log(myAdd())
完整答案
声明合并是编译器合并两个或多个单独声明的过程。将同名的声明声明为单个定义。这个合并的定义具有两个原始声明的特征。最简单，也许是最常见的声明合并类型是接口合并。在最基本的层面上，合并将两个声明的成员机械地连接到一个同名的接口中。
例子
interface Cloner {
clone(animal: Animal): Animal;
}
interface Cloner {
clone(animal: Sheep): Sheep;
}
interface C...
完整答案
如果子类(子类)与父类中声明的方法相同，则称为方法覆盖。也就是说，在派生类或子类中重新定义了基类方法。
方法覆盖规则
方法必须与父类中的方法同名方法必须具有与父类中相同的参数。必须存在 IS-A 关系(继承)。
示例代码：
class NewPrinter extends Printer {
doPrint(): any {
super.doPrint();
console.log("Called Child class."...
完整答案
ES6 版本的 TypeScript 提供了用于定义匿名函数的简写语法，即函数表达式。这些箭头函数也称为 Lambda 函数。lambda 函数是没有名称的函数。箭头函数省略了 function 关键字。
例子
let sum = (a: number, b: number): number => {
return a + b;
}
console.log(sum(20, 30)); //returns 50
在上面，?=>? 是一个...
完整答案
