目錄

typescript是啥？與javascript的區別？

typescript數據類型？

typescript中枚舉類型？應用場景？

typescript中接口的理解？應用場景？

typescript中泛型的理解？應用場景？

如何在react項目中應用typescript？

---

這TypeScript我真不知道面試會咋問。。。

哦以前還寫過一篇基礎??

Typescript 基礎易理解-------沖沖沖_ts和js有什么區別_慢谷的博客-CSDN博客

typescript是啥？與javascript的區別？

TypeScript是一個強類型的JavaScript超集，可編譯為純JavaScript。它是一種用于應用級JavaScript開發的語言。（c#、Java就是強類型語言)

區別：

1.TypeScript支持強類型，js不支持。

2.TypeScript 支持類和接口的概念，使面向對象編程更簡單明確。類用于定義對象的結構和行為，接口則用于定義對象的合同（即對象應該具有的屬性和方法）

3.高級特性：TypeScript 提供了一些 JavaScript 中缺少的高級特性，如元組（Tuple）、枚舉（Enum）、泛型（Generics）等。這些特性有助于更好地描述數據結構和處理邏輯。

4.編譯時類型檢查：TypeScript 在編譯階段進行類型檢查，捕獲并報告類型錯誤。這減少了運行時錯誤，增加了代碼質量和可維護性。

5.生態系統和工具支持：TypeScript 兼容 JavaScript 的生態系統，可以使用現有的 JavaScript 庫和框架。此外，TypeScript 提供了強大的開發工具支持，如代碼編輯器的智能感知、重構功能和錯誤檢查。

盡管 TypeScript 是 JavaScript 的超集，但它仍然可以編譯為普通的 JavaScript 代碼，并且可以在任何支持 JavaScript 的運行環境中運行。TypeScript 主要用于開發大型項目，特別是需要更強類型約束和更好工具支持的場景。

我就背：ts是js的超集，在js的基礎上提供了更多的類型和功能；ts 是一種帶有靜態類型檢查的編程語言，它可以在開發過程中檢測出類型錯誤。而 js是一種動態類型語言，它在運行時才進行類型檢查；ts是編譯性語言，需要編譯成js才能在瀏覽器或其他 JavaScript 運行時環境中執行。而js是解釋性語言，不需要編譯可直接在瀏覽器或者其他JavaScript 運行時環境中執行。

typescript數據類型？

基本類型：

number: 表示數值，包括整數和浮點數。

string:?表示字符串。

boolean:?表示布爾值，即 true 或 false。

null?和?undefined:?分別表示 null 和 undefined。

symbol:?表示唯一的、不可變的值。

數組類型：

type[]?或?Array<type>: 表示由指定類型元素組成的數組。

元組類型：

[type1, type2, ...]: 表示固定長度和特定順序的數組，每個位置上的元素可以具有不同的類型。

對象類型：

object: 表示非原始類型的值，例如對象、函數和數組等。

{}?或?Record<string, type>: 表示具有指定屬性和對應類型的對象。

函數類型：

(arg1: type1, arg2: type2, ...) => returnType: 表示函數類型，包括參數的類型和返回值的類型。

類型推斷：

如果沒有顯式指定變量的類型，TypeScript 可以根據賦予給變量的值來推斷其類型。

高級類型：

union: 表示多個類型中的一個值。例如，type1 | type2?表示可以是?type1?或?type2。

intersection: 表示多個類型的交集。例如，type1 & type2?表示必須同時滿足?type1?和?type2。

type: 用于創建自定義類型別名。

enum: 表示一組命名的常量值。

typescript中枚舉類型？應用場景？

枚舉類型（Enum）用于定義一組命名的常量值。枚舉類型可以為每個常量分配一個名稱，并使代碼更具可讀性和可維護性。

enum Color {

??Red,

??Green,

??Blue,

}

let myColor: Color = Color.Green;

console.log(myColor); // 輸出 1

在上面的示例中，我們定義了一個名為 Color 的枚舉類型，它包含三個常量值：Red、Green 和 Blue。這些常量默認從 0 開始自動編號。

應用場景：

表示一組相關的常量值：例如表示不同顏色、星期幾、狀態等。

限制變量取值范圍：通過指定枚舉類型，可以確保變量只能取枚舉中定義的值，防止無效值的引入。

增加代碼可讀性：使用枚舉類型可以使代碼更清晰地表達意思，提供更好的代碼可讀性和可維護性。

替代魔法數值：將代碼中的魔法數值（magic numbers）替換為有意義的枚舉常量，增加代碼的可維護性。

枚舉類型在處理一組固定的常量值時非常有用，它們提供了一種更好的方式來組織和使用常量。通過使用枚舉類型，可以減少錯誤、提高代碼可讀性，并使代碼更具表現力。

typescript中接口的理解？應用場景？

在 TypeScript 中，接口（Interface）用于描述對象的結構和行為，定義了對象應該具有哪些屬性和方法。通過接口，可以明確指定對象的形狀，并在開發過程中進行類型檢查，確保對象符合接口的要求。以下是接口的示例：

interface Person {

??name: string;

??age: number;

??sayHello(): void;

}

let person: Person = {

??name: "Alice",

??age: 30,

??sayHello() {

????console.log("Hello, I'm " + this.name);

??},

};

person.sayHello(); // 輸出 "Hello, I'm Alice"

在上面的示例中，我們定義了一個名為 Person 的接口，它要求對象具有 name 和 age 屬性，并且必須有一個名為 sayHello 的方法，沒有返回值。

應用場景：

定義對象的形狀：接口可用于定義對象的屬性和方法，確保對象的結構符合預期。

類型檢查和提示：通過使用接口，在編碼階段就能捕獲潛在的類型錯誤，并提供代碼編輯器的智能感知和自動補全功能。

對象解構和函數參數：可以使用接口來約束對象解構和函數參數，以增加代碼的可讀性和可靠性。

定義類的實現規范：接口也可以作為類的合同，規定類必須實現指定的屬性和方法，促使類的一致性和可擴展性。

接口在 TypeScript 中是一個重要的概念，它提供了一種強大的方式來描述對象的結構和行為，并且能夠幫助開發者更好地理解和使用代碼。通過使用接口，可以編寫更健壯、可讀性更高的代碼，并在團隊合作中提供清晰的約定和規范。

typescript中的interface和type有什么區別？

1.type不能繼承，interface能繼承；

interface?可以通過關鍵字?extends?進行繼承其他?interface，從而擴展和組合類型。

interface Animal {
? name: string;
}

interface Dog extends Animal {
? bark(): void;
}

上述代碼中，Dog 接口繼承了 Animal 接口，從而擁有了 name 屬性，并在其基礎上增加了一個 bark 方法。

與此不同，type 不支持直接的繼承，無法擴展其他類型。但是可以使用聯合類型（|）和交叉類型（&）進行類型組合：

type Animal = {
? name: string;
};

type Dog = Animal & {
? bark(): void;
};
?

2.type可創建類型別名；

type?可以用來創建類型別名（Type Alias），給一個類型取一個新的名稱。這樣可以提高代碼的可讀性和可維護性。例如：

type Person = {
? name: string;
? age: number;
};
Person 是一個類型別名，表示一個具有 name 和 age 屬性的對象類型。

3.type可以聲明任何類型，interface只能聲明對象；

type?可以聲明任何類型，包括原始類型、聯合類型、交叉類型、函數類型等。例如：

type MyNumber = number | string;

type MyObject = {
? id: number;
? name: string;
};

type MyFunction = (x: number, y: number) => number;
相比之下，interface 主要用于聲明對象類型。它只能描述對象的形狀、屬性和方法，不能直接聲明其他類型。

4.同名type只能有一個，同名interface可以多個

如果存在多個同名的?interface，它們會自動合并成一個大的接口，從而擴展了原有的接口。例如：

interface Animal {
? name: string;
}

interface Animal {
? age: number;
}

const dog: Animal = {
? name: 'Dog',
? age: 5,
};

在這個例子中，兩個 Animal 接口合并為一個，擁有 name 和 age 兩個屬性的接口。

相反，如果使用同名的 type 別名，后面的別名會覆蓋前面的定義，無法進行合并。

總體來說，type 和 interface 在某些方面有不同的特性和用途。根據具體的需求和場景，選擇合適的方式來聲明和組織類型定義。

typescript中泛型的理解？應用場景？

在 TypeScript 中，泛型（Generics）是一種在編程語言中用于創建可重用代碼的工具。通過泛型，可以在定義函數、類或接口時使用類型參數，使其可以適用于多種不同類型的數據。

以下是一個簡單的泛型函數示例：

function identity<T>(arg: T): T {

??return arg;

}

let result = identity<string>("Hello");

console.log(result); // 輸出 "Hello"

在上面的示例中，我們定義了一個名為 identity 的泛型函數。使用 <T> 表示類型參數，并將其應用于函數參數和返回值的類型。這樣，我們可以通過傳入不同類型的參數來調用該函數，并且函數會返回相同類型的結果。

應用場景：

提高代碼的復用性：通過使用泛型，可以編寫更通用的函數、類或接口，以處理多種類型的數據，提高代碼的復用性。

類型安全性：泛型能夠提供類型檢查和約束，避免意外的類型錯誤，并在編碼階段捕獲潛在問題。

抽象數據結構：泛型在實現抽象數據結構（如棧、隊列等）時非常有用，可以處理各種元素類型而無需重復編寫代碼。

函數式編程風格：泛型常用于函數式編程風格中，例如在數組的 map、filter 等函數中，可以使用泛型來處理不同類型的數據。

通過合理應用泛型，可以提高代碼的靈活性、可讀性和可維護性。它是 TypeScript 中強大且重要的特性之一，使得我們能夠編寫更加通用和類型安全的代碼。

面試的時候我就背這句：泛型是指在定義函數、接口，類的時候沒有提前指定具體的類型，而是在使用的時候再指定類型的一種特性。

如何在react項目中應用typescript？

要在 React 項目中應用 TypeScript，可以按照以下步驟進行設置：

1.創建 TypeScript React 項目：使用腳手架工具（如 Create React App）創建一個新的 TypeScript 項目。

npx create-react-app my-app --template typescript

2.將現有 React 項目轉換為 TypeScript：如果已經有一個現有的 React 項目，并希望將其轉換為 TypeScript，可以執行以下操作：

在項目根目錄運行以下命令安裝 TypeScript 和相關的類型定義文件：

npm install typescript @types/react @types/react-dom

3.配置 TypeScript 編譯選項：可以創建 tsconfig.json 文件來配置 TypeScript 編譯選項。可以使用默認配置，也可以根據項目需求進行自定義配置。

4.安裝和使用 TypeScript 類型定義庫：如果使用了第三方庫或組件，可以通過安裝相應的類型定義文件（通常以 @types/ 開頭）來提供類型支持。

開始編寫 TypeScript 代碼：在 React 組件中使用 TypeScript 的優勢之一是能夠為組件的 props、state 和事件處理函數等添加明確的類型注解，以提供更好的類型檢查和智能感知。

5.運行項目：使用適合的命令（如 npm start）來啟動 TypeScript React 項目，并在開發過程中享受 TypeScript 的類型檢查和錯誤提示。

通過將 TypeScript 引入到 React 項目中，能夠增加代碼的可靠性、可讀性和可維護性。TypeScript 為 React 開發提供了更強大的類型系統和工具支持，以幫助開發者編寫更健壯和可擴展的應用程序。