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

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

1、 TypeScript 的主要特點是什么？

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

2、使用 TypeScript 有什么好處？

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

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

let identifier: number = value;

布爾類型：一個邏輯二進制開關，包含true或false

let identifier: string = " ";

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

let identifier: bool = Boolean value;

未定義類型：一個未定義的字面量，它是所有變量的起點。

let num: number = null;

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

let unusable: void = undefined;

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

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

5、TypeScript 中的接口是什么？

接口為使用該接口的對象定義契約或結構。

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

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

6、TypeScript 中的模塊是什么？

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

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

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

7、后端如何使用TypeScript？

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

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

npm i -g typescript

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

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

類型斷言本質上是類型轉換的軟版本，它建議編譯器將變量視為某種類型，但如果它處于不同的形式，則不會強制它進入該模型。

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

你可以通過三種方式創(chuàng)建變量：var，let，和const。
var是嚴格范圍變量的舊風格。你應該盡可能避免使用，var因為它會在較大的項目中導致問題。

var num:number = 1;

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

let num:number = 1;

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

const num:number = 100;

10、在TypeScript中如何從子類調用基類構造函數(shù)？

你可以使用該super()函數(shù)來調用基類的構造函數(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 本質上是在相反方向上工作的繼承。Mixins 允許你通過組合以前類中更簡單的部分類設置來構建新類。

相反，類A繼承類B來獲得它的功能，類B從類A需要返回一個新類的附加功能。

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

你可以使用 juggle-check，它檢查 null 和 undefined，或者使用 strict-check，它返回true設置為null的值，并且不會評估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ù)程序的需要委派對私有變量的不同級別的訪問。

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

例如，新雇主可能能夠了解get公司的員工人數(shù)，但無權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關鍵字打開模塊以供在模塊外使用。

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 將字符串轉換為數(shù)字？

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

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

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

甲.map文件是源地圖，顯示原始打字稿代碼是如何解釋成可用的JavaScript代碼。它們有助于簡化調試，因為你可以捕獲任何奇怪的編譯器行為。

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

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

類表示一組相關對象的共享行為和屬性。

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

你使用關鍵字聲明類class：

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

18、TypeScript 與 JavaScript 有什么關系？

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

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

19、TypeScript 中的 JSX 是什么？

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

20、TypeScript 支持哪些 JSX 模式？

TypeScript有內置的支持preserve，react和react-native。

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

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

• react-native結合起來preserve，react因為它維護所有 JSX 和輸出作為.js擴展。

21、如何編譯 TypeScript 文件？

你需要調用 TypeScript 編譯器tsc來編譯文件。你需要安裝 TypeScript 編譯器，你可以使用npm.

npm install -g typescripttsc <TypeScript File Name>

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

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

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

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

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

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

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

其余參數(shù)允許你將不同數(shù)量的參數(shù)（零個或多個）傳遞給函數(shù)。當你不確定函數(shù)將接收多少參數(shù)時，這很有用。其余符號之后的所有參數(shù)...都將存儲在一個數(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ù)定義的最后一個，并且每個函數(shù)只能有一個 rest 參數(shù)。

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

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

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

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

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

26、Omit類型有什么作用？

Omit是實用程序類型的一種形式，它促進了常見的類型轉換。Omit允許你通過傳遞電流Type并選擇Keys在新類型中省略來構造類型。

Omit<Type, Keys>

例如：

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

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

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

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

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映射類型輕松地將所有屬性設為可選。

29、什么時候應該使用關鍵字unknown？

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

30、什么是裝飾器，它們可以應用于什么？

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

例如，裝飾器@sealed將對應于sealed函數(shù)。任何標有 的@sealed都將用于評估sealed函數(shù)。

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

它們可以附加到：

• 類聲明

• 方法

• 配件

• 特性

• 參數(shù)

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

學習更多技能

請點擊下方公眾號