• 我要涨知识——TypeScript 经典高频面试题（二）

    又是一个年底来了，好大一批人可能又准备跑路了，翻了翻掘金和 CSDN 发现好多大佬都有大厂 Offer ，看着看着我心动了！

    话不多说，赶紧开干，给自己整了一个前端面试小助手——微信小程序内搜索 “WEB学习学习加油站” ，整理了前端经典高频面试题，笔试题库，是前端跳槽人必不可少的利器。

     

    1、如何将 unknown 类型指定为一个更具体的类型？

    1.1、使用 typeof 进行类型判断（这些缩小类型范围的技术都有助于TS基于控制流程下的类型分析）

    1. function unknownToString(value: unknown): string {
    2.   if (typeof value === "string") {
    3.    return value;
    4.   }
    5.  
    6.   return String(value);
    7. }

    1.2、对 unknown 类型使用类型断言

    要强制编译器信任类型为 unknown 的值为给定类型，则可以使用类型断言：

    1. const value: unknown = "Hello World";
    2. const foo: string = value; // Error
    3. const bar: string = value as string; // OK

    断言错了时语法能通过检测，但是运行的时候就会报错了！

    1. const value: unknown = "Hello World";
    2.  const bar: number = value as number; // runtime Error

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

    2.1、模块

    TypeScript 与 ECMAScript 2015 一样，任何包含顶级 import 或者 export 的文件都被当成一个模块。

    相反地，如果一个文件不带有顶级的import或者export声明，那么它的内容被视为全局可见的

    例如我们在在一个 TypeScript 工程下建立一个文件 1.ts，声明一个变量a，如下：

    const a = 1

    然后在另一个文件同样声明一个变量a，这时候会出现错误信息

    提示重复声明a变量，但是所处的空间是全局的

    如果需要解决这个问题，则通过import或者export引入模块系统即可，如下：

    1. const a = 10;
    2. export default a

    在typescript中，export关键字可以导出变量或者类型，用法与es6模块一致，如下：

    1. export const a = 1
    2. export type Person = {
    3.     name: String
    4. }

    通过import 引入模块，如下：

    import { a, Person } from './export';

    2.2、命名空间

    命名空间一个最明确的目的就是解决重名问题

    命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的

    这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中

    TypeScript 中命名空间使用 namespace 来定义，语法格式如下：

    1. namespace SomeNameSpaceName {
    2.    export interface ISomeInterfaceName {      }
    3.    export class SomeClassName {      }
    4. }

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

    使用方式如下：

    SomeNameSpaceName.SomeClassName

    命名空间本质上是一个对象，作用是将一系列相关的全局变量组织到一个对象的属性，如下：

    1. namespace Letter {
    2.   export let a = 1;
    3.   export let b = 2;
    4.   export let c = 3;
    5.   // ...
    6.   export let z = 26;
    7. }

    编译成js如下：

    1. var Letter;
    2. (function (Letter) {
    3.     Letter.a = 1;
    4.     Letter.b = 2;
    5.     Letter.c = 3;
    6.     // ...
    7.     Letter.z = 26;
    8. })(Letter || (Letter = {}));

    2.3、区别

    • 命名空间是位于全局命名空间下的一个普通的带有名字的 JavaScript 对象，使用起来十分容易。但就像其它的全局命名空间污染一样，它很难去识别组件之间的依赖关系，尤其是在大型的应用中
    • 像命名空间一样，模块可以包含代码和声明。 不同的是模块可以声明它的依赖
    • 在正常的TS项目开发过程中并不建议用命名空间，但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间，主要作用是给编译器编写代码的时候参考使用

    3、tsconfig.json 文件有什么用？

    tsconfig.json文件是JSON格式的文件。

    在tsconfig.json文件中，可以指定不同的选项来告诉编译器如何编译当前项目。

    目录中包含tsconfig.json文件，表明该目录是TypeScript项目的根目录。

    1. // 常用配置
    2. {
    3.   /*
    4.       tsconfig.json是ts编译器的配置文件，ts可以根据它的信息来对待吗进行编译 可以再tsconfig中写注释
    5.       include : 用来指定哪些文件需要被编译
    6.       exclude : 用来指定哪些文件不需要被编译 ：默认node_module
    7.       extends : 用来指定继承的配置文件
    8.       files   : 用来指定被编译的文件列表，只有编译少量文件才使用
    9.       compilerOptions : 编译器的选项是配置文件中非常重要也是非常复杂的配置选项
    10.   */
    11.   "include":[
    12.     // ** : 任意目录 ， * : 任意文件
    13.     "./src/**/*"
    14.   ],
    15.   "exclude": [
    16.     "./src/hello/**/*"
    17.   ],
    18.   // "extends": "./configs/base",
    19.   "files": [
    20.     "1.ts",
    21.     // "2.ts"
    22.   ],
    23.   "compilerOptions": {
    24.     // 用来指定 ES 版本 ESNext : 最新版。 'ES3', 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ESNext'
    25.     "target": "ES2020",
    26.     // 指定要使用模块化的规范 : 'None', 'CommonJS', 'AMD', 'System', 'UMD', 'ES6'/'ES2015', 'ES2020' or 'ESNext'
    27.     "module": "ESNext",
    28.     // 用来指定项目中要使用的库 'ES5', 'ES6', 'ES2015', 'ES7', 'ES2016', 'ES2017', 'ES2018', 'ESNext', 'DOM', 'DOM.Iterable',
    29.     //                          'WebWorker', 'ScriptHost', 'ES2015.Core', 'ES2015.Collection', 'ES2015.Generator', 'ES2015.Iterable', 
    30.     //                          'ES2015.Promise', 'ES2015.Proxy', 'ES2015.Reflect', 'ES2015.Symbol', 'ES2015.Symbol.WellKnown', 
    31.     //                          'ES2016.Array.Include', 'ES2017.object', 'ES2017.Intl', 'ES2017.SharedMemory', 'ES2017.String', 
    32.     //                          'ES2017.TypedArrays', 'ES2018.Intl', 'ES2018.Promise', 'ES2018.RegExp', 'ESNext.AsyncIterable', 
    33.     //                          'ESNext.Array', 'ESNext.Intl', 'ESNext.Symbol'
    34.     // 运行在浏览器中不用设置，运行在node或其他中才需要设置
    35.     // "lib":[]，
    36.     // 用来指定编译后文件的存放位置
    37.     "outDir":"./dist",
    38.     // 将代码合并为一个文件,设置之后所有的全局作用域中的代码会合并到同一个文件中 但是只能在  'amd' and 'system' 中才能使用
    39.     // "outFile": "./dist/app.js",
    40.     // 是否对js文件进行编译，默认false
    41.     "allowJs": false,
    42.     // 是否检查js代码是否符合语法规范，默认false
    43.     "checkJs": false,
    44.     // 是否移除注释，默认false
    45.     "removeComments":false,
    46.     // 是否不生成编译后文件，默认false
    47.     "noEmit": false,
    48.     // 当有错误时是否生成文件，默认false
    49.     "noEmitOnError": false,
    50.     // 是否生成sourceMap，默认false  这个文件里保存的，是转换后代码的位置，和对应的转换前的位置。有了它，出错的时候，通过断点工具可以直接显示原始代码，而不是转换后的代码。
    51.     "sourceMap":false,
    52.  
    53.     // 所有的严格检查的总开关，默认false
    54.     "strict": false,
    55.     // 编译后的文件是否开启严格模式，默认false
    56.     "alwaysStrict": false,
    57.     // 不允许隐式的any，默认false(允许)
    58.     "noImplicitAny": false,
    59.     // 不允许隐式的this，默认false(允许)
    60.     "noImplicitThis": false,
    61.     // 是否严格的检查空值，默认false 检查有可能为null的地方
    62.     "strictNullChecks": true,
    63.     // 是否严格检查bind、call和apply的参数列表，默认false  检查是否有多余参数
    64.     "strictBindCallApply":false,
    65.     // 是否严格检查函数的类型，
    66.     "strictFunctionTypes":false,
    67.     // 是否严格检查属性是否初始化，默认false
    68.     "strictPropertyInitialization":false,
    69.  
    70.     // 是否检查switch语句包含正确的break，默认false
    71.     "noFallthroughCasesInSwitch":false,
    72.     // 检查函数没有隐式的返回值，默认false
    73.     "noImplicitReturns":false,
    74.     // 是否检查检查未使用的局部变量，默认false
    75.     "noUnusedLocals":false,
    76.     // 是否检查未使用的参数，默认false
    77.     "noUnusedParameters":false,
    78.  
    79.     // 是否检查不可达代码报错，默认false   true，忽略不可达代码 false，不可达代码将引起错误
    80.     "allowUnreachableCode":false
    81.   }
    82. }

    4、TS 中的 declare 关键字有什么用？

    JavaScript库或框架没有TypeScript声明文件。 但是，如果要在TypeScript文件中使用它们而没有任何编译错误，则必须使用declare关键字。 declare关键字用于环境声明和您要定义可能在其他位置存在的变量的方法。

    如果要在我们的TypeScript代码中使用该库，则可以使用以下代码：

    declare var myLibrary;

    TypeScript运行时会将myLibrary变量分配为 any。

    5、TS 中支持的访问修饰符有哪些？

    TypeScript支持访问修饰符 public，private 和 protected，它们决定了类成员的可访问性。

    • 公共（Public），类的所有成员，其子类以及该类的实例都可以访问。
    • 受保护（Projected），该类及其子类的所有成员都可以访问它们。 但是该类的实例无法访问。
    • 私有（Private），只有类的成员可以访问它们。

    如果未指定访问修饰符，则它是隐式公共的，因为它符合 JavaScript 的便利性。

    6、解释一下 TS 中的枚举。

    枚举是 TypeScipt 数据类型，它允许我们定义一组命名常量。 使用枚举使记录意图或创建一组不同的案例变得更加容易。 它是相关值的集合，可以是数字值或字符串值。

    1. enum Gender {
    2.     Male,
    3.     Female
    4.     Other
    5. }
    6. console.log(Gender.Male); // Output: 0
    7.  
    8. //We can also access an enum value by it's number value.
    9. console.log(Gender[1]); // Output: Female

    7、TS 中的方法重写是什么？

    如果子类(子类)具有与父类中声明的相同的方法，则称为方法覆盖。换句话说，在派生类或子类中重新定义基类方法。

    方法重写的规则

    • 该方法必须具有与父类相同的名称
    • 该方法必须具有与父类相同的参数。
    • 必须有一个IS-A关系(继承)。
    1. class NewPrinter extends Printer {  
    2.     doPrint(): any {  
    3.         super.doPrint();  
    4.         console.log("Called Child class.");  
    5.     }  
    6.     doInkJetPrint(): any {  
    7.         console.log("Called doInkJetPrint().");  
    8.     }  
    9. }  
    10. let printer: new () => NewPrinter;  
    11. printer.doPrint();  
    12. printer.doInkJetPrint();

    8、什么是 Typescript 映射文件？

    • TypeScript Map文件是一个源映射文件，其中包含有关我们原始文件的信息。
    • .map文件是源映射文件，可让工具在发出的JavaScript代码和创建它的TypeScript源文件之间进行映射。
    • 许多调试器可以使用这些文件，因此我们可以调试TypeScript文件而不是JavaScript文件。

    9、如何在 typescript 中实现继承？

    继承是一种从另一个类获取一个类的属性和行为的机制。它是OOPs语言的一个重要方面，并且具有从现有类创建新类的能力，继承成员的类称为基类，继承这些成员的类称为派生类。

    继承可以通过使用extend关键字来实现。我们可以通过下面的例子来理解它。

    1. class Shape {     
    2.    Area:number     
    3.    constructor(area:number) {     
    4.       this.Area = area    
    5.    }     
    6. }     
    7. class Circle extends Shape {     
    8.    display():void {     
    9.       console.log("圆的面积: "+this.Area)     
    10.    }     
    11. }    
    12. var obj = new Circle(320);     
    13. obj.display()

    10、Typescript 中什么是类类型接口？

    • 如果接口用于一个类的话，那么接口会表示“行为的抽象”
    • 对类的约束，让类去实现接口，类可以实现多个接口
    • 接口只能约束类的公有成员（实例属性/方法），无法约束私有成员、构造函数、静态属性/方法

    11、说一说 typeScript 中类及其特性。

    TypeScript 引入了类，以便它们可以利用诸如封装和抽象之类的面向对象技术的好处。

    TypeScript 编译器将 TypeScript 中的类编译为普通的 JavaScript 函数，以跨平台和浏览器工作。

    一个类包括以下内容：

    • 构造器（Constructor）
    • 属性（Properties）
    • 方法（Methods）
    1. class Employee {
    2.     empID: number;
    3.     empName: string;
    4.  
    5.     constructor(ID: number, name: string) {
    6.         this.empName = name;
    7.         this.empID = ID;
    8.     }
    9.  
    10.     getSalary(): number {
    11.         return 40000;
    12.     }
    13. }

    类的其他特性有：

    • 继承（Inheritance）
    • 封装（Encapsulation）
    • 多态（Polymorphism）
    • 抽象（Abstraction）

    12、typescript 中的 getter/setter 是什么？你如何使用它们？

    Getter 和 setter 是特殊类型的方法，可帮助你根据程序的需要委派对私有变量的不同级别的访问。

    Getters 允许你引用一个值但不能编辑它。Setter 允许你更改变量的值，但不能查看其当前值。这些对于实现封装是必不可少的。

    例如，新雇主可能能够了解get公司的员工人数，但无权set了解员工人数。

    1. const fullNameMaxLength = 10;
    2. class Employee {
    3.   private _fullName: string = "";
    4.   get fullName(): string {
    5.     return this._fullName;
    6.   }
    7.   set fullName(newName: string) {
    8.     if (newName && newName.length > fullNameMaxLength) {
    9.       throw new Error("fullName has a max length of " + fullNameMaxLength);
    10.     }
    11.     this._fullName = newName;
    12.   }
    13. }
    14. let employee = new Employee();
    15. employee.fullName = "Bob Smith";
    16. if (employee.fullName) {
    17.   console.log(employee.fullName);
    18. }

    13、typeScript 最终会被编译为 javaScript ，为什么还推荐使用 Typescript 呢？

    TypeScript是微软公司开发和维护的一种面向对象的编程语言。它是JavaScript的超集，包含其所有元素。

    强类型和弱类型、静态类型和动态类型是两组不同的概念。

    类型强弱是针对类型转换是否显示来区分，静态和动态类型是针对类型检查的时机来区分。

    TS对JS的改进主要是静态类型检查，静态类型检查有何意义？标准答案是“静态类型更有利于构建大型应用”。

    推荐使用TypeScript的原因有：

    • TypeScript简化了JavaScript代码，使其更易于阅读和调试。
    • TypeScript是开源的。
    • TypeScript为JavaScript ide和实践（如静态检查）提供了高效的开发工具。
    • TypeScript使代码更易于阅读和理解。
    • 使用TypeScript，我们可以大大改进普通的JavaScript。
    • TypeScript为我们提供了ES6（ECMAScript 6）的所有优点，以及更高的生产率。
    • TypeScript通过对代码进行类型检查，可以帮助我们避免在编写JavaScript时经常遇到的令人痛苦的错误。
    • 强大的类型系统，包括泛型。
    • TypeScript只不过是带有一些附加功能的JavaScript。
    • TypeScript代码可以按照ES5和ES6标准编译，以支持最新的浏览器。
    • 与ECMAScript对齐以实现兼容性。
    • 以JavaScript开始和结束。
    • 支持静态类型。
    • TypeScript将节省开发人员的时间。
    • TypeScript是ES3、ES5和ES6的超集。

    14、typeScript 声明文件是什么？

    在 typescript 项目开发中，引用其他第三方的非 typescript 编写的 javascript 的库的时候，必须为这个类编写一个声明文件，如果没有的话，就会提示找不到。

    以 jQuery 库为例：

     声明文件的作用：主要用来描述 JS 模块内的类型信息，声明文件一般都是 *.d.ts 作为后缀，一般放到 types 文件夹内。

    以 jQuery 库为例，写一个声明文件：jQuery.d.ts 文件，内容如下：

    declare var jQuery:(selector:string)=>any

    此时上边的 jQuery 就不会报红了！

    通常，声明文件都是由类库的开发者编写的，包含在类库的源码中，不需要我们手动一个一个类库地写。大部分主流类库都可以在社区中找到，地址为：
    https://www.typescriptlang.org/dt/search

     查找对应的库，在后边复制命令，安装类库时会自动生成 *.d.ts 声明文件。如：

    15、typescript 的优缺点有哪些？

    typescript 的优点有：

    • 增强代码的可读性和可维护性，适合开发大型应用。typescript 的设计目标是开发大型应用。
    • typescript 是 javascript 的超集，不仅支持 javascript 包括 ES6 的新增特性，因此能够支持所有 javascript 库。
    • 提供了可选静态类型、强类型、模块、可选参数等。
    • 提供类型检查，在编译阶段时强调错误，而不是像 javascript 在运行时才会提示错误。
    • 能够编译出一个支持所有浏览器的 javascript 程序。

    typescript 的缺点有：

    • 有一定的学习成本，需要理解接口、泛型、枚举等新知识点。
    • 前期开发成本会有所增加，但是降低了后期的维护成本。
    • 浏览器无法识别 typescript ，所以在 html 文件内不能直接引入 ts 文件，需要先编译成 javascript 文件之后再使用。
    • 引入第三方库的时候，必须使用声明文件先定义。
    • typescript 不支持抽象类。

    16、多个 .ts 文件是否能够合并成一个 .js 文件呢？

    可以的。

    tsc --outFile common.js demo1.ts demo2.ts demo3.ts

    可以将 demo1.ts、demo2.ts、demo3.ts 三个文件自动编译并合并到 common.js 文件内。

    tsc --outFile test.ts test1.ts test2.ts

    可以将 test1.ts、test2.ts 编译，编译后的 js 代码放入 test.ts 文件内，如果 test.ts 之前有内容，执行命令后 test.ts 原文件内容被清空。

  • 相关阅读:
    Linux 字符界面切换图形界面
    谷歌发布基于声学建模的无限虚拟房间增强现实鲁棒语音识别技术
    ApplicationContext注入Bean(多线程中注入Bean)
    ..\FreeRTOS\include\FreeRTOS.h(1277): error: #65: expected a “；“出现的这个错误标志解决方法
    公司新来了个拿25K的测试，一介绍，原来是测试天花板级别的···
    『手撕 Mybatis 源码』05 - SqlSession 执行主流程
    js中this的原理详解（web前端开发javascript语法基础）
    C/C++学习网址
    java实现边查边导出功能
    字符串与正则表达式（C#）
  • 原文地址：https://blog.csdn.net/weixin_43880397/article/details/128127791