30道針對TypeScript面試的必須掌握的面試題
在當(dāng)今的 Web 開發(fā)世界中,TypeScript 作為一種強大的工具為自己贏得了一席之地,它彌補了 JavaScript 的靈活性和靜態(tài)類型語言的魯棒性之間的差距(至少在 JavaScript 實現(xiàn)自己的類型之前)。
隨著技術(shù)格局的不斷發(fā)展,對 TypeScript 開發(fā)人員的需求也在不斷增加,技能要求也有所提升,但如何在面試中讓自己脫穎而出呢? 又或者你是一名面試官,你正在招聘 TypeScript開發(fā)人員,那如何確保您的候選人真正掌握 TypeScript?
然后,讓我們深入研究這個神奇的列表,其中,包含 30 個富有洞察力的 TypeScript 問題,范圍從基礎(chǔ)知識到更高級(分為 25 個針對中級角色,5 個針對更高級角色),確保你為下一個重大機會做好準備,祝你好運!
01、什么是 TypeScript?為什么使用它比普通 JavaScript 更有優(yōu)勢?
答案:TypeScript 是 JavaScript 的靜態(tài)類型超集,可以編譯為純 JavaScript。通過引入靜態(tài)類型,它允許開發(fā)人員在編譯時而不是運行時捕獲與類型相關(guān)的錯誤。
這可以減少錯誤,提高代碼可讀性,并通過增強的工具(例如自動完成和代碼導(dǎo)航)提供更高效的開發(fā)體驗。
02、TypeScript 中的any類型和unknown類型有何不同?
答案:any 和unknown 都代表 TypeScript 中的任何值。
但有一個關(guān)鍵的區(qū)別:any 繞過了編譯器的類型檢查,本質(zhì)上關(guān)閉了 TypeScript 對該變量的好處。
另一方面,unknown 保持類型檢查完整,確保在對變量執(zhí)行操作之前斷言或縮小變量的類型。
03、在什么場景下你會使用自定義類型,它們在 TypeScript 中是如何定義的?
答案:當(dāng)我們有復(fù)雜的結(jié)構(gòu)或重復(fù)的模式時,使用 type 關(guān)鍵字或接口定義的自定義類型是有益的。
例如,如果我們經(jīng)常處理用戶數(shù)據(jù),我們可以定義一次用戶類型或接口,然后在整個代碼庫中使用它,而不是在函數(shù)或類中重復(fù)定義用戶的形狀。
04、工會類型有哪些?它們有何益處?
答案:聯(lián)合類型是一種表示一個值可以屬于多種類型之一的方式。例如,如果函數(shù)接受字符串和數(shù)字作為參數(shù),則可以將其鍵入為 function example(arg: string | number)。這確保了功能的靈活性,同時,仍然保持類型安全。
05、Type Guards 如何增強 TypeScript 的功能?
答案:類型保護是運行時檢查,有助于縮小條件塊中變量的類型范圍。它們允許函數(shù)和方法根據(jù)輸入類型表現(xiàn)不同,而不會丟失類型信息。常見的類型保護包括使用 typeof、instanceof 和用戶定義的類型保護函數(shù)。
06、TypeScript 中元組與常規(guī)數(shù)組的區(qū)別是什么?
答案:TypeScript 中的元組是一個數(shù)組,其中元素的類型、順序和數(shù)量已知。例如,[string, number] 元組類型期望第一個元素是字符串,第二個元素是數(shù)字。這與常規(guī)數(shù)組形成對比,常規(guī)數(shù)組只知道元素的類型,而不知道順序或計數(shù)。
07、在 TypeScript 中將屬性標記為可選時,使用什么語法?你為什么要這樣做?
答案:在 TypeScript 中,? 符號用于將屬性標記為可選,例如 name?: string。當(dāng)創(chuàng)建可能缺少值的結(jié)構(gòu)或處理來自外部源的數(shù)據(jù)(其中某些字段可能不存在)時,這非常有用。
08、在定義對象形狀時,您能區(qū)分interface和type嗎?
答:interface和type都可以定義對象形狀,但是它們有一些區(qū)別。interface更具可擴展性,允許聲明合并。type 提供了更多的多功能性,能夠表示并集、交集、元組等。雖然interface主要用于對象形狀,但 type 可以捕獲更廣泛的模式。
09、為什么泛型在 TypeScript 中至關(guān)重要?它們?nèi)绾伟l(fā)揮作用?
答:泛型允許創(chuàng)建靈活且可重用的組件,而無需犧牲類型安全性。它們充當(dāng)未來類型的占位符,讓您可以編寫適用于多種類型的函數(shù)、類或接口。通過利用泛型,開發(fā)人員可以確保各種數(shù)據(jù)的類型安全,而無需編寫冗余代碼。
10、readonly 關(guān)鍵字如何改變 TypeScript 變量或?qū)傩裕?/h4>
答案:readonly 關(guān)鍵字當(dāng)作為變量或?qū)傩缘那熬Y時,可確保一旦設(shè)置其值,此后就無法修改。它對于確保在使用配置對象或在組件或函數(shù)之間傳遞數(shù)據(jù)等場景中的不變性特別有用。
11、TypeScript 中的可區(qū)分聯(lián)合有什么用處?
答案:可區(qū)分聯(lián)合(也稱為標記聯(lián)合)是一種結(jié)合了聯(lián)合類型、文字類型和類型保護的模式。
當(dāng)一個對象可以有多個形狀但共享一個公共屬性(通常是文字類型)時,可以使用它們,該屬性可用于縮小其確切形狀。
公共屬性(通常稱為“鑒別器”)允許我們在聯(lián)合內(nèi)的類型之間安全地切換,從而更輕松地使用此類對象。
12、繼承在 TypeScript 中如何發(fā)揮作用?
答案:TypeScript 支持繼承,就像 ES6 類一樣。使用extends關(guān)鍵字,一個類可以繼承另一個類的屬性和方法,提高代碼的可重用性并建立基類和派生類之間的關(guān)系。派生類還可以重寫繼承的方法或?qū)傩裕踔劣眯碌姆椒ɑ驅(qū)傩詳U展對象結(jié)構(gòu)。
13、裝飾器在 TypeScript 中扮演什么角色?
答:裝飾器受到 Python 和 Java 等語言中注釋的啟發(fā),提供了一種添加元數(shù)據(jù)或修改類定義、方法、屬性或方法參數(shù)的方法。
裝飾器使用 @ 前綴,可以影響或擴展它們裝飾的元素的行為,使其成為解決依賴注入、日志記錄甚至裝飾器等設(shè)計模式(模式,而不是功能本身)等問題的強大工具。
14、在 TypeScript 中,比較運算符 == 和 === 有什么不同?
答案:與 JavaScript 一樣,== 是一個執(zhí)行類型強制的松散相等運算符,這意味著如果不同類型的值在強制轉(zhuǎn)換后具有相同的值,則可以將它們視為相等。
另一方面, === 是一個嚴格的相等運算符,它檢查值和類型,使其在類型敏感的上下文中更安全、更可預(yù)測。
15、如何在 TypeScript 中聲明只讀數(shù)組,以及為什么要使用它?
答案:在 TypeScript 中,您可以使用 readonly 修飾符后跟數(shù)組類型來定義只讀數(shù)組,例如 readonly string[]。
使用只讀數(shù)組可確保數(shù)組在創(chuàng)建后無法修改,這對于確保數(shù)據(jù)不變性特別有用,例如在函數(shù)或組件之間傳遞數(shù)據(jù)時。
16、TypeScript 中的 never 類型意味著什么?
答案:TypeScript 中的 never 類型表示永遠不會出現(xiàn)的值。它通常用于不返回值的函數(shù) - 例如,那些總是拋出異?;蚓哂袩o限循環(huán)的函數(shù)。它通過指示不應(yīng)或無法到達某個代碼路徑來幫助確保類型安全。
17、如何將 TypeScript 與 React 這樣的框架集成?
答:要將 TypeScript 與 React 集成,可以使用 .tsx(TypeScript 與 JSX)文件。對于組件屬性和狀態(tài),可以定義 TypeScript 接口或類型。
React.FC 泛型類型通常用于定義功能組件的類型,為 props、默認 props 和其他 React 特定功能提供強類型。
18、命名空間在 TypeScript 中起什么作用,它們?nèi)匀幌嚓P(guān)嗎?
答案:TypeScript 中的命名空間是一種對相關(guān)代碼進行分組的方法,它們有助于避免全局命名空間中的命名沖突。
然而,隨著 ES6 模塊的興起,它提供了一種更加標準化和精細的方式來組織和封裝代碼,命名空間的相關(guān)性在許多現(xiàn)代 TypeScript 項目中已經(jīng)減弱。
19、如何在 TypeScript 中使用類型斷言?何時需要它?
答案:TypeScript 中的類型斷言是一種告訴編譯器將變量視為某種類型的方法。這就像其他語言中的類型轉(zhuǎn)換。語法可以是<Type>變量或變量作為類型。當(dāng)您比 TypeScript 的類型推斷系統(tǒng)更了解變量的類型時,例如在處理聯(lián)合類型或任何類型時,它會很有用。
20、描述 TypeScript 中索引簽名的用途和語法。
答案:TypeScript 中的索引簽名允許對象具有某種類型的動態(tài)屬性。語法通常類似于 { [key: string]: ValueType }。當(dāng)您事先不知道對象的鍵但知道其值的類型時,這是很有用的。
21、TypeScript 如何處理可選鏈接和 nullish 合并?
答案:TypeScript 支持可選鏈接 (?.),它允許讀取位于連接對象鏈深處的屬性值,而無需檢查鏈中的每個引用是否有效。如果任何引用為 null 或未定義,則表達式會與未定義的值短路。
空合并運算符 (??) 是一個邏輯運算符,當(dāng)其左側(cè)操作數(shù)為空或未定義時返回其右側(cè)操作數(shù),否則返回其左側(cè)操作數(shù)。這在您想要回退到默認值的情況下非常有用。
22、什么是映射類型,以及如何在 TypeScript 中使用它們?
答案:映射類型允許通過轉(zhuǎn)換屬性在現(xiàn)有類型的基礎(chǔ)上創(chuàng)建新類型。它們遵循一種模式,您可以在其中迭代對象類型的屬性并生成新類型。常見用途包括使用 Partial<T> 使接口的所有屬性可選,或使用 Readonly<T> 使它們只讀。
23、您將如何在 TypeScript 中創(chuàng)建和使用 mixin?
答案:Mixin 是一種從可重用組件創(chuàng)建類的模式。在 TypeScript 中,mixin 可以通過創(chuàng)建接受類并使用新屬性或方法擴展它的函數(shù)來實現(xiàn)。然后,可以組合這些函數(shù)來裝飾或擴充類。此模式允許在 TypeScript 中實現(xiàn)類似多重繼承的行為。
24、TypeScript 中方法重載和函數(shù)重載有什么區(qū)別?
答案:TypeScript 支持函數(shù)重載,即為單個函數(shù)聲明多個函數(shù)類型。然后,編譯器將根據(jù)函數(shù)調(diào)用的參數(shù)使用適當(dāng)?shù)念愋?。但是,TypeScript 不支持傳統(tǒng)的方法重載(您可以定義多個具有相同名稱但參數(shù)不同的方法)。
相反,您可以使用可選參數(shù)或聯(lián)合類型來實現(xiàn)類似的功能。
25、裝飾器如何影響 TypeScript 的類屬性和方法?
答:裝飾器是作為 JavaScript 提案引入的,是可用于修改或擴展類屬性、方法等的特殊函數(shù)。在 TypeScript 中,當(dāng)裝飾器應(yīng)用于類成員時,它們會提供元數(shù)據(jù)或更改被裝飾元素的行為。它們可用于各種任務(wù),例如日志記錄、驗證或增強功能。
接下來,這幾道面試題是針對高級 TypeScript 開發(fā)人員的問題,有興趣的小伙伴可以繼續(xù)閱讀。
26、描述 TypeScript 的類型推斷機制如何工作。
答:TypeScript 的類型推斷是指編譯器在沒有顯式類型注釋的情況下自動推斷和分配類型的能力。雖然鼓勵顯式類型,但編譯器會盡可能使用上下文(如變量初始化、返回語句等)來推斷類型。上下文輸入等功能有助于函數(shù)表達式等場景。
27、什么是類型防護,如何創(chuàng)建自定義類型防護?
答案:類型保護是執(zhí)行運行時檢查并縮小條件塊內(nèi)類型范圍的表達式。常見的類型保護包括 typeof 和 instanceof。自定義類型保護是一個函數(shù),其返回類型是使用 is 關(guān)鍵字縮小類型的類型謂詞,例如 function isFish(pet: Fish | Bird): pet is Fish。
28、討論 TypeScript 中聲明合并的工作原理。
答:聲明合并是指編譯器將多個同名的聲明合并到一個定義中。此功能對于接口非常強大:如果多次定義一個接口,TypeScript 會將其視為具有組合成員的單個接口。這在擴展現(xiàn)有類型或使用模塊化代碼時非常有用。
29、如何利用 TypeScript 中的條件類型?
答案:條件類型允許根據(jù)條件以更動態(tài)的方式表達類型。它們遵循 T 延伸 U ?X : Y,這意味著如果類型 T 可分配給 U,則類型為 X,否則為 Y。這使得基于類型之間的關(guān)系可以進行更靈活的類型操作。
30、解釋在高級類型場景中如何以及為何使用 keyof 和 typeof 運算符。
答案:keyof 運算符生成給定類型的已知公共屬性名稱的并集,這對于限制可能的字符串值或創(chuàng)建映射類型很有用。typeof 運算符在類型上下文中使用時,獲取變量、常量或?qū)ο笪淖值念愋停@對于基于現(xiàn)有對象的形狀創(chuàng)建類型非常有用,而無需手動重復(fù)其結(jié)構(gòu)。
記?。撼嗣嬖囶}之外,持續(xù)學(xué)習(xí)和良好的學(xué)習(xí)心態(tài),也非常重要,編程之路是一條無盡頭的學(xué)習(xí)之路。
最后,希望這些內(nèi)容對您學(xué)習(xí)TpyeScript有所幫助。