前言

TypeScript（TS）已成為現(xiàn)代前端開發(fā)的標(biāo)配，尤其在 React、Vue、Angular 等框架中，幾乎是大廠必考點(diǎn)。2026 年面試趨勢：更注重類型安全、高級(jí)類型工具、實(shí)際項(xiàng)目應(yīng)用和tsconfig 配置。以下精選 20+ 高頻題（基于最新大廠真題匯總），分為基礎(chǔ)、中級(jí)、高級(jí)，并附詳細(xì)解答和代碼示例。建議結(jié)合項(xiàng)目實(shí)戰(zhàn)記憶！

基礎(chǔ)篇（必背，考察理解 TS 核心價(jià)值）

1. 什么是 TypeScript？它與 JavaScript 的區(qū)別是什么？
   TypeScript 是 JavaScript 的超集（superset），由 Microsoft 開發(fā)，最終編譯成純 JS 運(yùn)行。
   主要區(qū)別：

   • TS 支持靜態(tài)類型檢查（編譯時(shí)捕獲錯(cuò)誤），JS 是動(dòng)態(tài)類型（運(yùn)行時(shí)錯(cuò)誤）。
   • TS 有接口、泛型、枚舉、裝飾器等 OOP 特性。
   • TS 需要編譯（tsc），JS 直接運(yùn)行。
   • TS 提升代碼可維護(hù)性、IDE 智能提示，但增加學(xué)習(xí)成本。

2. 為什么大廠前端項(xiàng)目都要用 TypeScript？優(yōu)勢有哪些？

   • 類型安全：編譯時(shí)發(fā)現(xiàn)錯(cuò)誤（如拼寫錯(cuò)、類型不匹配），減少運(yùn)行時(shí) bug。
   • 更好重構(gòu)：IDE 支持重命名、跳轉(zhuǎn)、自動(dòng)補(bǔ)全。
   • 團(tuán)隊(duì)協(xié)作：類型作為“文檔”，明確接口契約。
   • 生態(tài)支持：React/Vue/Angular 官方推薦 TS。
   • 大型項(xiàng)目必備：代碼規(guī)模大時(shí)，純 JS 容易失控。

3. TypeScript 的基本類型有哪些？

   • 原始類型：boolean、number、string、null、undefined、symbol、bigint、void。
   • 對(duì)象類型：object、array、tuple（元組）、enum（枚舉）。
   • 特殊類型：any（任意，關(guān)閉檢查，不推薦）、unknown（未知，安全版 any）、never（永不返回）。

   示例：

   let isDone: boolean = false;
   let num: number = 6;
   let str: string = 'hello';
   let list: number[] = [1, 2, 3];  // 或 Array<number>
   let tuple: [string, number] = ['hello', 10];  // 元組

4. any、unknown、never 的區(qū)別？

   類型	描述	使用場景	安全性
   any	任意類型，關(guān)閉類型檢查	遷移舊 JS 項(xiàng)目、臨時(shí)繞過	低（不推薦）
   unknown	未知類型，必須先類型收窄	API 返回不確定類型	高（推薦）
   never	永不存在的值（如拋錯(cuò)函數(shù)）	類型推斷的底部類型	-

   示例：

   let val: unknown = 'hello';
   if (typeof val === 'string') {  // 類型收窄
       console.log(val.toUpperCase());
   }

中級(jí)篇（高頻，考察實(shí)際編碼能力）

5. interface 和 type 的區(qū)別？什么時(shí)候用哪個(gè)？

   特性	interface	type
   定義對(duì)象	是（主要用途）	是
   支持?jǐn)U展（extends）	是	是（用 & 交叉類型）
   支持聲明合并	是（同名接口自動(dòng)合并）	否
   可定義聯(lián)合/元組	否	是
   可定義原始類型別名	否	是

   推薦：對(duì)象/接口用 interface（支持合并，便于擴(kuò)展）；聯(lián)合、映射、工具類型用 type。

   示例：

   interface User { name: string; }
   interface User { age?: number; }  // 自動(dòng)合并
   
   type ID = string | number;
   

6. 泛型（Generics）是什么？應(yīng)用場景？
   泛型允許創(chuàng)建可復(fù)用組件，支持類型參數(shù)化。
   示例：

   function identity<T>(arg: T): T {
       return arg;
   }
   let output = identity<string>('hello');  // T 推斷為 string
   

   場景：數(shù)組工具、Promise、React 組件 props、Vue defineProps 等。

7. 聯(lián)合類型（|）和交叉類型（&）的區(qū)別？

   • 聯(lián)合類型：string | number → 值可以是其中一種。
   • 交叉類型：TypeA & TypeB → 值必須同時(shí)滿足兩種類型（對(duì)象合并）。

   示例：

   type A = { a: string };
   type B = { b: number };
   type C = A & B;  // { a: string; b: number }

8. 類型收窄（Type Narrowing）有哪些方式？

   • typeof 檢查原始類型
   • instanceof 檢查實(shí)例
   • in 檢查屬性
   • 字面量類型守衛(wèi)（===）
   • 自定義類型守衛(wèi)（is 關(guān)鍵字）

   示例：

   function padLeft(value: string, padding: string | number) {
       if (typeof padding === 'number') {
           return Array(padding + 1).join(' ') + value;  // padding 被收窄為 number
       }
       return padding + value;
   }

高級(jí)篇（大廠深挖，考察類型體操）

9. TypeScript 的工具類型（Utility Types）有哪些常用？

   • Partial<T>：所有屬性可選
   • Required<T>：所有屬性必選
   • Readonly<T>：所有屬性只讀
   • Pick<T, K>：挑選屬性
   • Omit<T, K>：排除屬性
   • Record<K, T>：鍵為 K，值為 T 的對(duì)象
   • Exclude<T, U> / Extract<T, U>：聯(lián)合類型排除/提取

   示例：

   type User = { name: string; age: number };
   type PartialUser = Partial<User>;  // { name?: string; age?: number }

10. 條件類型（Conditional Types）是什么？
    T extends U ? X : Y
    示例：

    type IsString<T> = T extends string ? 'yes' : 'no';
    type Test1 = IsString<'hello'>;  // 'yes'

11. 映射類型（Mapped Types）如何使用？
    通過 [K in keyof T] 遍歷鍵創(chuàng)建新類型。
    示例：

    type Optional<T> = { [P in keyof T]?: T[P] };  // 等價(jià)于 Partial<T>

12. tsconfig.json 中哪些配置最重要？

    • target：編譯目標(biāo)（如 es2020）
    • module：模塊系統(tǒng)（如 esnext/commonjs）
    • strict：開啟所有嚴(yán)格檢查（強(qiáng)烈推薦）
    • noImplicitAny：隱式 any 報(bào)錯(cuò)
    • strictNullChecks：null/undefined 嚴(yán)格檢查
    • esModuleInterop：更好導(dǎo)入 commonjs 模塊
    • skipLibCheck：跳過庫類型檢查（加速編譯）

實(shí)戰(zhàn)應(yīng)用題（框架相關(guān)高頻）

13. 在 React/Vue 項(xiàng)目中如何使用 TypeScript？

    • React：用 .tsx，定義 props 類型（interface 或 type），useState()。
    • Vue：Vue 3 + TS 用 <script setup lang="ts">，defineProps()。

14. 如何處理第三方庫沒有類型定義？

    • 用 declare module '庫名'; 或安裝 @types/庫名（DefinitelyTyped）。
    • 極端：用 any 斷言，但不推薦。

面試建議

• 準(zhǔn)備項(xiàng)目：準(zhǔn)備一個(gè) TS + React/Vue 的個(gè)人項(xiàng)目，面試時(shí)能說類型如何提升代碼質(zhì)量。
• 多練類型體操：LeetCode TS 版、Type Challenges（GitHub）。
• 關(guān)注新特性：TS 5.x 的 const type parameters、infer 改進(jìn)等。

這些題覆蓋了 95% 以上的大廠考察點(diǎn)，背熟 + 理解原理，TS 面試穩(wěn)過！如果需要某題的代碼演示或擴(kuò)展解答，隨時(shí)問我～??

到此這篇關(guān)于TypeScript前端高頻面試題總結(jié)大全的文章就介紹到這了,更多相關(guān)TS前端高頻面試題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論