TypeScript面试题汇总

山雀~

已于 2023-07-14 16:33:48 修改

阅读量4.9k

点赞数 1

文章标签： typescript 前端 javascript

于 2023-07-14 16:31:50 首次发布

本文链接：https://blog.csdn.net/weixin_55608297/article/details/131726681

版权

1、面试官：说说你对 TypeScript 的理解？与 JavaScript 的区别？

Typescript 是 JavaScript 的超集，可以被编译成 JavaScript 代码。用 JavaScript 编写的合法代码，在 TypeScript 中依然有效。它给JavaScript添加了可选的静态类型和基于类的面向对象编程，如类、接口、继承、泛型等。
TypeScript 的特性主要有如下：
1、类型批注：通过类型批注提供在编译时启动类型检查的静态类型
2、类型推断：ts 中没有批注变量类型会自动推断变量的类型
3、类型擦除：在编译过程中批注的内容和接口会在运行时利用工具擦除
4、接口：ts 中用接口来定义对象类型
5、枚举：用于取值被限定在一定范围内的场景
6、Mixin：可以接受任意类型的值
7、泛型：写代码时使用一些之后才指定的类型
8、命名空间：名字只在该区域内有效，其他区域可重复使用该名字而不冲突
9、元组：元组合并了不同类型的对象，相当于一个可以装不同类型数据的数组

与 JavaScript 的区别：
1、TS 是一种面向对象编程语言，而 JS 是一种脚本语言（尽管 JS 是基于对象的）。
2、TS 支持可选参数， JS 则不支持该特性。
3、TS 支持静态类型，JS 不支持。
4、TS 支持接口，JS 不支持接口。

2、面试官：说说 typescript 的数据类型有哪些？

typescript 和 javascript几乎一样，拥有相同的数据类型，另外在javascript基础上提供了更加实用的类型供开发使用
typescript 的数据类型主要有如下：
1、boolean（布尔类型）：let flag:boolean = true;
2、number（数字类型）：let num:number = 123;
3、string（字符串类型）：let str:string = ‘this is ts’;
4、array（数组类型）：let arr:Array = [1, 2];
5、tuple（元组类型）
允许表示一个已知元素数量和类型的数组，let tupleArr:[number, string, boolean];
6、enum（枚举类型）：enum Color {Red, Green, Blue}
7、any（任意类型）：let num:any = 123;
8、null 和 undefined 类型：let num:number | undefined; // 数值类型或者 undefined
9、void 类型：用于标识方法返回值的类型，表示该方法没有返回值。
10、never 类型
never是其他类型（包括null和 undefined）的子类型，可以赋值给任何类型，代表从不会出现的值。但是没有类型是 never 的子类型，这意味着声明 never 的变量只能被 never 类型所赋值。
11、object 对象类型：let obj:object;

3、面试官：说说你对 TypeScript 中枚举类型的理解？应用场景？

枚举是一个被命名的整型常数的集合，用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型。
通俗来说，枚举就是一个对象的所有可能取值的集合
就拿回生活的例子，后端返回的字段使用 0 - 6 标记对应的日期，这时候就可以使用枚举可提高代码可读性，如下：

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

4、面试官：说说你对 TypeScript 中接口的理解？应用场景？

接口所描述的是对象相关的属性和方法，但并不提供具体创建此对象实例的方法，只是为对象的类型进行命名。
举例：定义一个接口

interface User {
    name: string
    age: number
}
const getUserName = (user: User) => user.name    //使用接口定义对象参数

5、面试官：说说你对 TypeScript 中类的理解？应用场景？

在 ES6 之后，JavaScript 拥有了 class 关键字，虽然本质依然是构造函数，但是使用起来已经方便了许多。但是JavaScript 的class依然有一些特性还没有加入，比如修饰符和抽象类
TypeScript 的 class 支持面向对象的所有特性，比如类、接口等
类可以包含以下几个模块（类的数据成员）：
1、字段：字段是类里面声明的变量。字段表示对象的有关数据。
2、构造函数：类实例化时调用，可以为类的对象分配内存。
3、方法：方法为对象要执行的操作

lass Car {					此外类的继承使用过extends的关键字
    // 字段
    engine:string;
    // 构造函数
    constructor(engine:string) {
        this.engine = engine
    }
    // 方法
    disp():void {
        console.log("发动机为 : "+this.engine)
    }
}

6、面试官：说说你对 TypeScript 中函数的理解？与 JavaScript 函数的区别？

TypeScript 为 JavaScript 函数添加了额外的功能，丰富了更多的应用场景
1、从定义的方式而言，typescript 声明函数需要定义参数类型或者声明返回值类型
2、typescript 在参数中，添加可选参数供使用者选择
3、typescript 增添函数重载功能，使用者只需要通过查看函数声明的方式，即可知道函数传递的参数个数以及类型
函数重载：允许创建数项名称相同但输入输出类型或个数不同的子程序，它可以简单地称为一个单独功能可以执行多项任务的能力
关于typescript函数重载，必须要把精确的定义放在前面，最后函数实现时，需要使用 |操作符或者?操作符，把所有可能的输入类型全部包含进去，用于具体实现

7、面试官：说说你对 TypeScript 中泛型的理解？应用场景？

泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型
假设我们用一个函数，它可接受一个 number 参数并返回一个number 参数，又打算接受一个 string 类型，然后再返回 string类型，代码重复度就比较高，这种情况就可以使用泛型
function returnItem(para: T): T {
return para
}
后述在编写 typescript 的时候，定义函数，接口或者类的时候，不预先定义好具体的类型，而在使用的时候在指定类型的一种特性的时候，这种情况下就可以使用泛型

8、面试官：说说你对 TypeScript 中高级类型的理解？有哪些？

除了string、number、boolean 这种基础类型外，在 typescript 类型声明中还存在一些高级的类型应用
常见的高级类型有如下：
1、交叉类型：通过 & 将多个类型合并为一个类型，本质上是一种并的操作
2、联合类型：联合类型的语法规则和逻辑 “或” 的符号一致 T | U
3、类型别名：类型别名会给一个类型起个新名字
4、类型索引：keyof用于获取一个接口中 Key 的联合类型
5、类型约束：通过关键字 extend 进行约束，泛型内使用的主要作用是对泛型加以约束
6、条件类型：条件类型的语法规则和三元表达式一致，经常用于一些类型不确定的情况。

9、面试官：说说你对 TypeScript 装饰器的理解？应用场景？

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上
是一种在不改变原类和使用继承的情况下，动态地扩展对象功能
本质也不是什么高大上的结构，就是一个普通的函数，@expression 的形式其实是Object.defineProperty的语法糖
使用装饰器存在两个显著的优点：
1、代码可读性变强了，装饰器命名相当于一个注释
2、在不改变原有代码情况下，对原来功能进行扩展

10、说说对 TypeScript 中命名空间与模块的理解？区别？

1、模块
TypeScript 与ECMAScript 2015 一样，任何包含顶级 import 或者 export 的文件都被当成一个模块。相反地，如果一个文件不带有顶级的import或者export声明，那么它的内容被视为全局可见的。
2、命名空间
命名空间一个最明确的目的就是解决重名问题
命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的

TypeScript 中命名空间使用 namespace 来定义
namespace SomeNameSpaceName {
   export interface ISomeInterfaceName {      }
   export class SomeClassName {      }
}

以上定义了一个命名空间 SomeNameSpaceName，如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口，则需要在类和接口添加 export 关键字