前端Typescript最常用?20?道面試題總結大全(含詳細代碼解析)
更新時間：2025年08月09日 11:37:18 作者：全棧前端老曹
TypeScript是JavaScript的超集,為該語言添加了靜態(tài)類型,這篇文章主要介紹了前端Typescript最常用20道面試題的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
前言
以下是老曹關于TypeScript 最常用的 20 道面試題總結，TS是原生Js的超集，現(xiàn)如今已經(jīng)是前端面試特別是中高級面試必問的問題，也是大工程項目必須掌握的技術了，以下涵蓋類型系統(tǒng)、接口、泛型、類、裝飾器、模塊等核心知識點。每道題都包含詳細解釋和代碼示例，適合大家對前端開發(fā)崗位的 TypeScript 技術面試準備，大家可以隨時翻出來查閱背誦和練習！
1. TypeScript 和 JavaScript 的區(qū)別是什么？
問題： 解釋 TypeScript 相比 JavaScript 增加了哪些特性？
答案：
- 類型系統(tǒng)（靜態(tài)類型檢查）。
- 接口（Interface）與類型別名（Type）。
- 泛型支持。
- 裝飾器（Decorators）。
- 對象結構約束與可選屬性。
- 更好的 IDE 支持（自動補全、錯誤提示）。
// 示例：類型檢查
function greet(name: string): void {
console.log(`Hello, ${name}`);
}
greet("Tom"); // 正確
greet(123); // 編譯報錯：參數(shù)類型不匹配
2. 如何定義變量并指定其類型？
問題： 定義一個 age 變量，并限制為數(shù)字類型。
答案：
使用類型注解語法。
let age: number = 25; age = "25"; // 報錯：不能將字符串賦值給 number 類型
3. 什么是聯(lián)合類型？如何使用？
問題： 定義一個函數(shù)參數(shù)可以是 string 或 number。
答案：
使用 | 表示聯(lián)合類型。
function printId(id: number | string): void {
console.log(`ID: ${id}`);
}
printId(101); // OK
printId("101"); // OK
printId(true); // 報錯
4. 什么是類型斷言？如何使用？
問題： 告訴編譯器某個值的具體類型。
答案：
使用 <Type> 或 as Type。
const input = document.getElementById("username") as HTMLInputElement;
input.value = "默認值";
5. 接口（interface）和類型別名（type）的區(qū)別？
問題： interface Person {} vs type Person = {} 的區(qū)別。
答案：
| 特性 | interface | type |
|---|---|---|
| 可擴展性 | 支持聲明合并 | 不支持 |
| 支持繼承 | 支持 extends | 支持交叉類型 & |
| 支持基本類型 | ? | ?（如 `type ID = string |
| 使用場景 | 對象結構建模 | 復雜類型組合 |
// interface
interface User {
name: string;
}
// type
type ID = string | number;
6. 如何定義可選屬性？
問題： 在接口中定義一個可選的 age 屬性。
答案：
使用 ? 標記可選屬性。
interface Person {
name: string;
age?: number; // 可選
}
const p: Person = { name: "Alice" }; // 合法
7. 元組（Tuple）的作用是什么？如何定義？
問題： 創(chuàng)建一個元組表示 [姓名, 年齡]。
答案：
元組允許你定義數(shù)組中元素的類型順序。
let user: [string, number]; user = ["Alice", 25]; // 合法 user = [25, "Alice"]; // 報錯：類型順序不符
8. 枚舉（enum）有什么用途？如何定義？
問題： 定義一個表示星期的枚舉。
答案：
枚舉用于命名一組常量值。
enum WeekDay {
Monday,
Tuesday,
Wednesday,
Thursday,
Friday
}
console.log(WeekDay.Monday); // 輸出: 0
console.log(WeekDay[3]); // 輸出: "Thursday"
9. 泛型（Generic）的作用是什么？如何使用？
問題： 寫一個通用的 identity 函數(shù)，返回傳入的任意類型。
答案：
泛型讓函數(shù)/類/接口具有更強的靈活性和復用性。
function identity<T>(value: T): T {
return value;
}
console.log(identity<string>("hello")); // 輸出: "hello"
console.log(identity<number>(123)); // 輸出: 123
10. 類型推斷（Type Inference）是什么？
問題： 如果沒有顯式標注類型，TS 如何確定類型？
答案：
TypeScript 會根據(jù)賦值自動推斷類型。
let message = "Hello"; // 類型自動推斷為 string message = 123; // 報錯：不能將 number 賦值給 string
11. 如何定義函數(shù)類型？
問題： 定義一個函數(shù)類型，接受兩個數(shù)字，返回一個數(shù)字。
答案：
使用類型表達式 type Fn = (a: number, b: number) => number;
type Sum = (a: number, b: number) => number; const add: Sum = (x, y) => x + y; console.log(add(2, 3)); // 輸出: 5
12. 類型守衛(wèi)（Type Guard）是什么？如何實現(xiàn)？
問題： 判斷一個值是否是數(shù)字類型。
答案：
使用 typeof 或自定義謂詞函數(shù)。
function isNumber(x: any): x is number {
return typeof x === "number";
}
function processValue(value: number | string): void {
if (isNumber(value)) {
console.log(value.toFixed(2));
} else {
console.log(value.toUpperCase());
}
}
13. 如何定義一個類？
問題： 創(chuàng)建一個 Person 類，有 name和 sayHello() 方法。
答案：
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
sayHello(): void {
console.log(`Hello, my name is ${this.name}`);
}
}
const p = new Person("Tom");
p.sayHello(); // 輸出: Hello, my name is Tom
14. 類中的訪問修飾符有哪些？分別代表什么含義？
問題： public、private 和 protected 的區(qū)別？
答案：
public：任何地方都可以訪問（默認）。private：只能在類內部訪問。protected：可在類及子類中訪問。
class Animal {
public name: string;
private secret: string;
protected family: string;
constructor(name: string, secret: string, family: string) {
this.name = name;
this.secret = secret;
this.family = family;
}
}
class Dog extends Animal {
showFamily() {
console.log(this.family); // 合法
// console.log(this.secret); // ILLEGAL
}
}
15. 如何實現(xiàn)接口繼承？
問題： 讓 Employee 接口繼承 Person 接口。
答案：
使用 extends 實現(xiàn)接口繼承。
interface Person {
name: string;
}
interface Employee extends Person {
id: number;
}
const emp: Employee = { name: "John", id: 1 };
16. 如何定義只讀屬性？
問題： 定義一個不可修改的 id 字段。
答案：
使用 readonly 關鍵字。
interface User {
readonly id: number;
name: string;
}
const user: User = { id: 1, name: "Alice" };
user.id = 2; // 報錯：無法修改只讀屬性
17. 裝飾器（Decorator）是什么？如何使用？
問題： 寫一個簡單的類裝飾器。
答案：
裝飾器是一種特殊類型的聲明，可用于類、方法、屬性等。
function log(target: any, key: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`Calling "${key}" with`, args);
return originalMethod.apply(this, args);
};
}
class Calculator {
@log
add(a: number, b: number): number {
return a + b;
}
}
const calc = new Calculator();
calc.add(2, 3);
// 輸出: Calling "add" with [2, 3]
18.any和unknown的區(qū)別？
問題： any 和 unknown 在類型檢查時有何不同？
答案：
any：繞過所有類型檢查。unknown：必須先做類型檢查后才能操作。
let value: unknown;
value = "hello";
if (typeof value === "string") {
console.log(value.toUpperCase()); // 安全地使用
}
let val: any = 123;
val = "abc";
val = true;
console.log(val.foo.bar.baz); // 不會報錯（但運行時報錯）
19. 如何定義可索引類型？
問題： 創(chuàng)建一個對象，通過字符串索引獲取值。
答案：
使用索引簽名。
interface StringArray {
[index: number]: string;
}
const arr: StringArray = ["Apple", "Banana"];
console.log(arr[0]); // 輸出: "Apple"
interface Dictionary {
[key: string]: number;
}
const data: Dictionary = { one: 1, two: 2 };
20. 如何使用never類型？
問題： 寫一個總是拋出錯誤的函數(shù)，并返回 never。
答案：
never 表示永遠不會返回值的函數(shù)。
function throwError(message: string): never {
throw new Error(message);
}
function infiniteLoop(): never {
while (true) {}
}
?? 總結表格
| 編號 | 題目描述 | 知識點 | 示例代碼 | 常見考察點 |
|---|---|---|---|---|
| 1 | TS 與 JS 區(qū)別 | 類型系統(tǒng) | function greet(name: string) | 類型安全 |
| 2 | 定義帶類型的變量 | 類型注解 | let age: number = 25 | 基礎語法 |
| 3 | 聯(lián)合類型 | ` | ` 操作符 | `id: string |
| 4 | 類型斷言 | 強制類型轉換 | as HTMLElement | 類型信任機制 |
| 5 | interface vs type | 類型定義方式 | interface A {} vs type A = {} | 接口設計 |
| 6 | 可選屬性 | ? 修飾符 | age?: number | 數(shù)據(jù)靈活性 |
| 7 | 元組類型 | 固定長度數(shù)組 | [string, number] | 結構控制 |
| 8 | 枚舉類型 | 枚舉值映射 | enum Status { Success, Failed } | 可讀性增強 |
| 9 | 泛型 | 參數(shù)化類型 | function identity<T>(value: T) | 通用性 |
| 10 | 類型推斷 | 自動識別類型 | let msg = "hello" | 類型安全 |
| 11 | 函數(shù)類型定義 | 類型簽名 | (a: number, b: number) => number | 函數(shù)編程 |
| 12 | 類型守衛(wèi) | 運行時判斷 | typeof value === 'number' | 類型細化 |
| 13 | 類定義 | OOP 語法 | class Person { ... } | 面向對象 |
| 14 | 類成員訪問控制 | public, private, protected | private secret: string | 封裝原則 |
| 15 | 接口繼承 | 擴展接口 | interface Employee extends Person | 接口設計 |
| 16 | 只讀屬性 | readonly | readonly id: number | 數(shù)據(jù)不變性 |
| 17 | 裝飾器應用 | 類/方法增強 | @log() | 高階拓展 |
| 18 | any 與 unknown 區(qū)別 | 類型安全性 | value is unknown | 類型防御 |
| 19 | 可索引類型 | 索引簽名 | { [key: string]: number } | 動態(tài)對象 |
| 20 | never 的用途 | 永遠不返回 | function throwError(): never | 錯誤處理 |
到此這篇關于前端Typescript最常用20道面試題的文章就介紹到這了,更多相關TS常用面試題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文通過實例代碼給大家介紹了js中實現(xiàn)復選框全選功能，代碼簡單易懂，非常不錯，需要的朋友參考下2016-12-12
在前端開發(fā)中,使用JavaScript讀取視頻流并將其保存為視頻文件是一個常見的需求,尤其是在涉及用戶上傳、本地處理和下載的場景中,這篇文章主要介紹了前端獲取設備視頻流踩坑實戰(zhàn)的相關資料,需要的朋友可以參考下2026-02-02
這篇文章給大家全面總結了JavaScript常用代碼的書寫規(guī)范，分別利用推薦和不推薦的兩種示例代碼讓大家更能直接的了解書寫規(guī)范，其實關于javascript代碼規(guī)范我們應該遵循古老的原則：“能做并不意味著應該做”，好了，下面我們就來一起看看吧。2016-09-09
這篇文章主要介紹了你可能從未使用過的11+個JavaScript特性(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要介紹了JavaScript錯誤處理的相關資料,需要的朋友可以參考下2015-02-02
javascript md5加密代碼，和asp、php的加密有一定的區(qū)別2008-09-09
在開始之前，先與大家一起認識下這篇文章的主角，世界級的javascript大牛們：Douglas Crockford、John Resig、Peter-Paul Koch、Nicolas C. Zakas?？疵忠苍S挺陌生，但是如果你對javascript還算熟悉，一定不會對他們的作品陌生。2009-12-12
javascript attachEvent和addEventListener使用方法
attachEvent與addEventListener區(qū)別 適應的瀏覽器版本不同，同時在使用的過程中要注意2009-03-03
這篇文章主要介紹了微信小程序學習筆記之獲取位置信息操作,結合實例形式分析了微信小程序獲取位置信息的原理、步驟及相關操作注意事項,并結合圖文形式予以說明,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細介紹了javascript實現(xiàn)貪吃蛇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08