英文 | https://betterprogramming.pub/top-50-typescript-interview-questions-explained-5e69b73eeab1

翻譯 | web前端開發(fā)

1、 TypeScript 的主要特點(diǎn)是什么？

• 跨平臺(tái)：TypeScript 編譯器可以安裝在任何操作系統(tǒng)上，包括 Windows、macOS 和 Linux。
• ES6 特性：TypeScript 包含計(jì)劃中的 ECMAScript 2015 (ES6) 的大部分特性，例如箭頭函數(shù)。
• 面向?qū)ο蟮恼Z(yǔ)言：TypeScript 提供所有標(biāo)準(zhǔn)的 OOP 功能，如類、接口和模塊。
• 靜態(tài)類型檢查：TypeScript 使用靜態(tài)類型并幫助在編譯時(shí)進(jìn)行類型檢查。因此，你可以在編寫代碼時(shí)發(fā)現(xiàn)編譯時(shí)錯(cuò)誤，而無(wú)需運(yùn)行腳本。
• 可選的靜態(tài)類型：如果你習(xí)慣了 JavaScript 的動(dòng)態(tài)類型，TypeScript 還允許可選的靜態(tài)類型。
• DOM 操作：您可以使用 TypeScript 來(lái)操作 DOM 以添加或刪除客戶端網(wǎng)頁(yè)元素。

2、使用 TypeScript 有什么好處？

• TypeScript 更具表現(xiàn)力，這意味著它的語(yǔ)法混亂更少。
• 由于高級(jí)調(diào)試器專注于在編譯時(shí)之前捕獲邏輯錯(cuò)誤，因此調(diào)試很容易。
• 靜態(tài)類型使 TypeScript 比 JavaScript 的動(dòng)態(tài)類型更易于閱讀和結(jié)構(gòu)化。
• 由于通用的轉(zhuǎn)譯，它可以跨平臺(tái)使用，在客戶端和服務(wù)器端項(xiàng)目中。

3、TypeScript 的內(nèi)置數(shù)據(jù)類型有哪些？

let identifier: number = value;

布爾類型：一個(gè)邏輯二進(jìn)制開關(guān)，包含true或false

let identifier: string = " ";

Null 類型： Null 表示值未定義的變量。

let identifier: bool = Boolean value;

未定義類型：一個(gè)未定義的字面量，它是所有變量的起點(diǎn)。

let num: number = null;

void 類型：分配給沒有返回值的方法的類型。

let unusable: void = undefined;

4、TypeScript 目前的穩(wěn)定版本是什么？

當(dāng)前的穩(wěn)定版本是 4.2.3。

5、TypeScript 中的接口是什么？

接口為使用該接口的對(duì)象定義契約或結(jié)構(gòu)。

接口是用關(guān)鍵字定義的interface，它可以包含使用函數(shù)或箭頭函數(shù)的屬性和方法聲明。

interface IEmployee {    empCode: number;    empName: string;    getSalary: (number) => number; // arrow function    getManagerName(number): string; }

6、TypeScript 中的模塊是什么？

TypeScript 中的模塊是相關(guān)變量、函數(shù)、類和接口的集合。

你可以將模塊視為包含執(zhí)行任務(wù)所需的一切的容器。可以導(dǎo)入模塊以輕松地在項(xiàng)目之間共享代碼。

module module_name{class xyz{export sum(x, y){return x+y;}}

7、后端如何使用TypeScript？

你可以將 Node.js 與 TypeScript 結(jié)合使用，將 TypeScript 的優(yōu)勢(shì)帶入后端工作。

只需輸入以下命令，即可將 TypeScript 編譯器安裝到你的 Node.js 中：

npm i -g typescript

8、TypeScript 中的類型斷言是什么？

TypeScript 中的類型斷言的工作方式類似于其他語(yǔ)言中的類型轉(zhuǎn)換，但沒有 C# 和 Java 等語(yǔ)言中可能的類型檢查或數(shù)據(jù)重組。類型斷言對(duì)運(yùn)行時(shí)沒有影響，僅由編譯器使用。

類型斷言本質(zhì)上是類型轉(zhuǎn)換的軟版本，它建議編譯器將變量視為某種類型，但如果它處于不同的形式，則不會(huì)強(qiáng)制它進(jìn)入該模型。

9、如何在 TypeScript 中創(chuàng)建變量？

你可以通過三種方式創(chuàng)建變量：var，let，和const。
var是嚴(yán)格范圍變量的舊風(fēng)格。你應(yīng)該盡可能避免使用，var因?yàn)樗鼤?huì)在較大的項(xiàng)目中導(dǎo)致問題。

var num:number = 1;

let是在 TypeScript 中聲明變量的默認(rèn)方式。與var相比，let減少了編譯時(shí)錯(cuò)誤的數(shù)量并提高了代碼的可讀性。

let num:number = 1;

const創(chuàng)建一個(gè)其值不能改變的常量變量。它使用相同的范圍規(guī)則，let并有助于降低整體程序的復(fù)雜性。

const num:number = 100;

10、在TypeScript中如何從子類調(diào)用基類構(gòu)造函數(shù)？

你可以使用該super()函數(shù)來(lái)調(diào)用基類的構(gòu)造函數(shù)。

class Animal {  name: string;  constructor(theName: string) {    this.name = theName;  }  move(distanceInMeters: number = 0) {    console.log(`${this.name} moved ${distanceInMeters}m.`);  }}class Snake extends Animal {  constructor(name: string) {    super(name);  }  move(distanceInMeters = 5) {    console.log("Slithering...");    super.move(distanceInMeters);  }}

11、解釋如何使用 TypeScript mixin。

Mixin 本質(zhì)上是在相反方向上工作的繼承。Mixins 允許你通過組合以前類中更簡(jiǎn)單的部分類設(shè)置來(lái)構(gòu)建新類。

相反，類A繼承類B來(lái)獲得它的功能，類B從類A需要返回一個(gè)新類的附加功能。

12、TypeScript 中如何檢查 null 和 undefined？

你可以使用 juggle-check，它檢查 null 和 undefined，或者使用 strict-check，它返回true設(shè)置為null的值，并且不會(huì)評(píng)估true未定義的變量。

//juggleif (x == null) {  }
var a: number;  var b: number = null;  function check(x, name) {      if (x == null) {          console.log(name + ' == null');      }      if (x === null) {          console.log(name + ' === null');      }      if (typeof x === 'undefined') {          console.log(name + ' is undefined');      }  }  check(a, 'a');  check(b, 'b');

13、TypeScript 中的 getter/setter 是什么？你如何使用它們？

Getter 和 setter 是特殊類型的方法，可幫助你根據(jù)程序的需要委派對(duì)私有變量的不同級(jí)別的訪問。

Getters 允許你引用一個(gè)值但不能編輯它。Setter 允許你更改變量的值，但不能查看其當(dāng)前值。這些對(duì)于實(shí)現(xiàn)封裝是必不可少的。

例如，新雇主可能能夠了解get公司的員工人數(shù)，但無(wú)權(quán)set了解員工人數(shù)。

const fullNameMaxLength = 10;class Employee {  private _fullName: string = "";  get fullName(): string {    return this._fullName;  }  set fullName(newName: string) {    if (newName && newName.length > fullNameMaxLength) {      throw new Error("fullName has a max length of " + fullNameMaxLength);    }    this._fullName = newName;  }}let employee = new Employee();employee.fullName = "Bob Smith";if (employee.fullName) {  console.log(employee.fullName);}

14、 如何允許模塊外定義的類可以訪問？

你可以使用export關(guān)鍵字打開模塊以供在模塊外使用。

module Admin {  // use the export keyword in TypeScript to access the class outside  export class Employee {    constructor(name: string, email: string) { }  }  let alex = new Employee('alex', '[email protected]');}// The Admin variable will allow you to access the Employee class outside the module with the help of the export keyword in TypeScriptlet nick = new Admin.Employee('nick', '[email protected]');

15、如何使用 Typescript 將字符串轉(zhuǎn)換為數(shù)字？

與 JavaScript 類似，你可以使用parseInt或parseFloat函數(shù)分別將字符串轉(zhuǎn)換為整數(shù)或浮點(diǎn)數(shù)。你還可以使用一元運(yùn)算符+將字符串轉(zhuǎn)換為最合適的數(shù)字類型，“3”成為整數(shù)，3而“3.14”成為浮點(diǎn)數(shù)3.14。

var x = "32";var y: number = +x;

16、什么是 .map 文件，為什么/如何使用它？

甲.map文件是源地圖，顯示原始打字稿代碼是如何解釋成可用的JavaScript代碼。它們有助于簡(jiǎn)化調(diào)試，因?yàn)槟憧梢圆东@任何奇怪的編譯器行為。

調(diào)試工具還可以使用這些文件來(lái)允許你編輯底層的 TypeScript 而不是發(fā)出的 JavaScript 文件。

17、TypeScript 中的類是什么？你如何定義它們？

類表示一組相關(guān)對(duì)象的共享行為和屬性。

例如，我們的類可能是Student，其所有對(duì)象都具有該attendClass方法。另一方面，John是一個(gè)單獨(dú)的 type 實(shí)例，Student可能有額外的獨(dú)特行為，比如attendExtracurricular.

你使用關(guān)鍵字聲明類class：

class Student {        studCode: number;        studName: string;        constructor(code: number, name: string) {                this.studName = name;                this.studCode = code;        }

18、TypeScript 與 JavaScript 有什么關(guān)系？

TypeScript 是 JavaScript 的開源語(yǔ)法超集，可編譯為 JavaScript。所有原始 JavaScript 庫(kù)和語(yǔ)法仍然有效，但 TypeScript 增加了 JavaScript 中沒有的額外語(yǔ)法選項(xiàng)和編譯器功能。

TypeScript 還可以與大多數(shù)與 JavaScript 相同的技術(shù)接口，例如 Angular 和 jQuery。

19、TypeScript 中的 JSX 是什么？

JSX 是一種可嵌入的類似于 XML 的語(yǔ)法，允許你創(chuàng)建 HTML。TypeScript 支持嵌入、類型檢查和將 JSX 直接編譯為 JavaScript。

20、TypeScript 支持哪些 JSX 模式？

TypeScript有內(nèi)置的支持preserve，react和react-native。

• preserve 保持 JSX 完整以用于后續(xù)轉(zhuǎn)換。

• react不經(jīng)過 JSX 轉(zhuǎn)換，而是react.createElement作為.js文件擴(kuò)展名發(fā)出和輸出。

• react-native結(jié)合起來(lái)preserve，react因?yàn)樗S護(hù)所有 JSX 和輸出作為.js擴(kuò)展。

21、如何編譯 TypeScript 文件？

你需要調(diào)用 TypeScript 編譯器tsc來(lái)編譯文件。你需要安裝 TypeScript 編譯器，你可以使用npm.

npm install -g typescripttsc <TypeScript File Name>

22、 TypeScript 中有哪些范圍可用？這與JS相比如何？

• 全局作用域：在任何類之外定義，可以在程序中的任何地方使用。

• 函數(shù)/類范圍：在函數(shù)或類中定義的變量可以在該范圍內(nèi)的任何地方使用。

• 局部作用域/代碼塊：在局部作用域中定義的變量可以在該塊中的任何地方使用。

23、TypeScript 中的箭頭/lambda 函數(shù)是什么？

胖箭頭函數(shù)是用于定義匿名函數(shù)的函數(shù)表達(dá)式的速記語(yǔ)法。它類似于其他語(yǔ)言中的 lambda 函數(shù)。箭頭函數(shù)可讓你跳過function關(guān)鍵字并編寫更簡(jiǎn)潔的代碼。

24、解釋rest參數(shù)和聲明rest參數(shù)的規(guī)則。

其余參數(shù)允許你將不同數(shù)量的參數(shù)（零個(gè)或多個(gè)）傳遞給函數(shù)。當(dāng)你不確定函數(shù)將接收多少參數(shù)時(shí)，這很有用。其余符號(hào)之后的所有參數(shù)...都將存儲(chǔ)在一個(gè)數(shù)組中。
例如：

function Greet(greeting: string, ...names: string[]) {    return greeting + " " + names.join(", ") + "!";}Greet("Hello", "Steve", "Bill"); // returns "Hello Steve, Bill!"Greet("Hello");// returns "Hello !"

rest 參數(shù)必須是參數(shù)定義的最后一個(gè)，并且每個(gè)函數(shù)只能有一個(gè) rest 參數(shù)。

25、什么是三斜線指令？有哪些三斜杠指令？

三斜線指令是單行注釋，包含用作編譯器指令的 XML 標(biāo)記。每個(gè)指令都表示在編譯過程中要加載的內(nèi)容。三斜杠指令僅在其文件的頂部工作，并且將被視為文件中其他任何地方的普通注釋。

• /// <reference path="..." /> 是最常見的指令，定義文件之間的依賴關(guān)系。

• /// <reference types="..." />類似于path但定義了包的依賴項(xiàng)。

• /// <reference lib="..." />允許您顯式包含內(nèi)置lib文件。

26、Omit類型有什么作用？

Omit是實(shí)用程序類型的一種形式，它促進(jìn)了常見的類型轉(zhuǎn)換。Omit允許你通過傳遞電流Type并選擇Keys在新類型中省略來(lái)構(gòu)造類型。

Omit<Type, Keys>

例如：

interface Todo {  title: string;  description: string;  completed: boolean;  createdAt: number;}type TodoPreview = Omit<Todo, "description">;

27、TypeScript中如何實(shí)現(xiàn)函數(shù)重載？

要在 TypeScript 中重載函數(shù)，只需創(chuàng)建兩個(gè)名稱相同但參數(shù)/返回類型不同的函數(shù)。兩個(gè)函數(shù)必須接受相同數(shù)量的參數(shù)。這是 TypeScript 中多態(tài)性的重要組成部分。

例如，你可以創(chuàng)建一個(gè)add函數(shù)，如果它們是數(shù)字，則將兩個(gè)參數(shù)相加，如果它們是字符串，則將它們連接起來(lái)。

function add(a:string, b:string):string;function add(a:number, b:number): number;function add(a: any, b:any): any {    return a + b;}add("Hello ", "Steve"); // returns "Hello Steve" add(10, 20); // returns 30

28、如何讓接口的所有屬性都可選？

你可以使用partial映射類型輕松地將所有屬性設(shè)為可選。

29、什么時(shí)候應(yīng)該使用關(guān)鍵字unknown？

unknown，如果你不知道預(yù)先期望哪種類型，但想稍后分配它，則應(yīng)該使用該any關(guān)鍵字，并且該關(guān)鍵字將不起作用。

30、什么是裝飾器，它們可以應(yīng)用于什么？

裝飾器是一種特殊的聲明，它允許你通過使用@<name>注釋標(biāo)記來(lái)一次性修改類或類成員。每個(gè)裝飾器都必須引用一個(gè)將在運(yùn)行時(shí)評(píng)估的函數(shù)。

例如，裝飾器@sealed將對(duì)應(yīng)于sealed函數(shù)。任何標(biāo)有 的@sealed都將用于評(píng)估sealed函數(shù)。

function sealed(target) {  // do something with 'target' ...}

它們可以附加到：

• 類聲明

• 方法

• 配件

• 特性

• 參數(shù)

注意：默認(rèn)情況下不啟用裝飾器。要啟用它們，你必須experimentalDecorators從tsconfig.json文件或命令行編輯編譯器選項(xiàng)中的字段。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)