30 道 TypeScript 面試問題解析
英文 | https://betterprogramming.pub/top-50-typescript-interview-questions-explained-5e69b73eeab1
翻譯 | web 前端開發
TypeScript 是 Microsoft 開發的 JavaScript 的開源超集,用於在不破壞現有程序的情況下添加附加功能。
由於其獨特的優勢,例如, 靜態類型和許多速記符號,TypeScript 現在被前端和全棧開發人員廣泛用於大型項目。
今天,我們將通過 30 個 TypeScript 面試問題和答案來幫助你準備 TypeScript 知識 的面試。
1、 TypeScript 的主要特點是什麼?
-
跨平臺:TypeScript 編譯器可以安裝在任何操作系統上,包括 Windows、macOS 和 Linux。
-
ES6 特性:TypeScript 包含計劃中的 ECMAScript 2015 (ES6) 的大部分特性,例如箭頭函數。
-
面向對象的語言:TypeScript 提供所有標準的 OOP 功能,如類、接口和模塊。
-
靜態類型檢查:TypeScript 使用靜態類型並幫助在編譯時進行類型檢查。因此,你可以在編寫代碼時發現編譯時錯誤,而無需運行腳本。
-
可選的靜態類型:如果你習慣了 JavaScript 的動態類型,TypeScript 還允許可選的靜態類型。
-
DOM 操作:您可以使用 TypeScript 來操作 DOM 以添加或刪除客戶端網頁元素。
2、使用 TypeScript 有什麼好處?
-
TypeScript 更具表現力,這意味着它的語法混亂更少。
-
由於高級調試器專注於在編譯時之前捕獲邏輯錯誤,因此調試很容易。
-
靜態類型使 TypeScript 比 JavaScript 的動態類型更易於閱讀和結構化。
-
由於通用的轉譯,它可以跨平臺使用,在客戶端和服務器端項目中。
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。
-
preserve 保持 JSX 完整以用於後續轉換。
-
react 不經過 JSX 轉換,而是 react.createElement 作爲. js 文件擴展名發出和輸出。
-
react-native 結合起來 preserve,react 因爲它維護所有 JSX 和輸出作爲. js 擴展。
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 標記。每個指令都表示在編譯過程中要加載的內容。三斜槓指令僅在其文件的頂部工作,並且將被視爲文件中其他任何地方的普通註釋。
-
/// 是最常見的指令,定義文件之間的依賴關係。
-
/// 類似於 path 但定義了包的依賴項。
-
/// 允許您顯式包含內置 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 中如何實現函數重載?
要在 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