30 道 TypeScript 面試問題解析

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

翻譯 | web 前端開發

TypeScript 是 Microsoft 開發的 JavaScript 的開源超集,用於在不破壞現有程序的情況下添加附加功能。

由於其獨特的優勢,例如, 靜態類型和許多速記符號,TypeScript 現在被前端和全棧開發人員廣泛用於大型項目。

今天,我們將通過 30 個 TypeScript 面試問題和答案來幫助你準備 TypeScript 知識 的面試。

1、 TypeScript 的主要特點是什麼?

2、使用 TypeScript 有什麼好處?

3、TypeScript 的內置數據類型有哪些?

數字類型:用於表示數字類型的值。TypeScript 中的所有數字都存儲爲浮點值。

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 目前的穩定版本是什麼?

當前的穩定版本是 4.2.3。

5、TypeScript 中的接口是什麼?

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

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

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

6、TypeScript 中的模塊是什麼?

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

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

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

7、後端如何使用 TypeScript?

你可以將 Node.js 與 TypeScript 結合使用,將 TypeScript 的優勢帶入後端工作。

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

npm i -g typescript

8、TypeScript 中的類型斷言是什麼?

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

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

9、如何在 TypeScript 中創建變量?

你可以通過三種方式創建變量:var,let,和 const。
var 是嚴格範圍變量的舊風格。你應該儘可能避免使用,var 因爲它會在較大的項目中導致問題。

var num:number = 1;

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

let num:number = 1;

const 創建一個其值不能改變的常量變量。它使用相同的範圍規則,let 並有助於降低整體程序的複雜性。

const num:number = 100;

10、在 TypeScript 中如何從子類調用基類構造函數?

你可以使用該 super() 函數來調用基類的構造函數。

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 未定義的變量。

//juggle
if (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 是特殊類型的方法,可幫助你根據程序的需要委派對私有變量的不同級別的訪問。

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

例如,新僱主可能能夠了解 get 公司的員工人數,但無權 set 瞭解員工人數。

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', 'alex@gmail.com');
}
// The Admin variable will allow you to access the Employee class outside the module with the help of the export keyword in TypeScript
let nick = new Admin.Employee('nick', 'nick@yahoo.com');

15、如何使用 Typescript 將字符串轉換爲數字?

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

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

16、什麼是 .map 文件,爲什麼 / 如何使用它?

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

調試工具還可以使用這些文件來允許你編輯底層的 TypeScript 而不是發出的 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 還可以與大多數與 JavaScript 相同的技術接口,例如 Angular 和 jQuery。

19、TypeScript 中的 JSX 是什麼?

JSX 是一種可嵌入的類似於 XML 的語法,允許你創建 HTML。TypeScript 支持嵌入、類型檢查和將 JSX 直接編譯爲 JavaScript。

20、TypeScript 支持哪些 JSX 模式?

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

21、如何編譯 TypeScript 文件?

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

npm install -g typescript
tsc <TypeScript File Name>

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

23、TypeScript 中的箭頭 / lambda 函數是什麼?

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

24、解釋 rest 參數和聲明 rest 參數的規則。

其餘參數允許你將不同數量的參數(零個或多個)傳遞給函數。當你不確定函數將接收多少參數時,這很有用。其餘符號之後的所有參數... 都將存儲在一個數組中。
例如:

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

rest 參數必須是參數定義的最後一個,並且每個函數只能有一個 rest 參數。

25、什麼是三斜線指令?有哪些三斜槓指令?

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

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 中如何實現函數重載?

要在 TypeScript 中重載函數,只需創建兩個名稱相同但參數 / 返回類型不同的函數。兩個函數必須接受相同數量的參數。這是 TypeScript 中多態性的重要組成部分。

例如,你可以創建一個 add 函數,如果它們是數字,則將兩個參數相加,如果它們是字符串,則將它們連接起來。

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、什麼是裝飾器,它們可以應用於什麼?

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

例如,裝飾器 @sealed 將對應於 sealed 函數。任何標有 的 @sealed 都將用於評估 sealed 函數。

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

它們可以附加到:

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

最後

歡迎關注【前端瓶子君】✿✿ヽ (°▽°) ノ✿

回覆「算法」,加入前端編程源碼算法羣,每日一道面試題(工作日),第二天瓶子君都會很認真的解答喲!

回覆「交流」,吹吹水、聊聊技術、吐吐槽!

回覆「閱讀」,每日刷刷高質量好文!

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/Njm68Uk0j--ibtfsB65zIA