JavaScript轉(zhuǎn)TypeScript的速查表

更新時間：2026年05月13日 09:16:33 作者：new code Boy

在當今的開發(fā)環(huán)境中,越來越多的開發(fā)者開始將JavaScript遷移到 TypeScript,以利用其靜態(tài)類型系統(tǒng)和更好的代碼可維護性,本文主要介紹了JavaScript轉(zhuǎn)TypeScript的速查表,感興趣的可以了解一下

1. 基礎變量與函數(shù) (Variables & Functions)

JavaScript (JS)	TypeScript (TS)	說明
let count = 0;	let count: number = 0;	基礎類型：number, string, boolean
let name = "Alice";	let name: string = "Alice";
let isDone = false;	let isDone: boolean = false;
let list = [1, 2];	let list: number[] = [1, 2];	數(shù)組：類型[] 或 Array<類型>
let pair = ["hi", 1];	let pair: [string, number] = ["hi", 1];	元組 (固定長度和類型的數(shù)組)
let val = null;	let val: string \| null = null;	聯(lián)合類型 (\|)：可以是 string 或 null
function add(a, b) { return a + b; }	function add(a: number, b: number): number { return a + b; }	參數(shù)加類型，返回值加 : 類型
const log = (msg) => console.log(msg);	const log = (msg: string): void => console.log(msg);	無返回值用 void
function run(cb) { cb(); }	function run(cb: () => void) { cb(); }	回調(diào)函數(shù)類型

2. 對象與接口 (Objects & Interfaces)

JavaScript (JS)	TypeScript (TS)	說明
const user = { name: "A", age: 25 };	interface User { name: string; age: number; } const user: User = { ... };	Interface: 定義對象形狀的最佳實踐
user.email = "a@b.com"	interface User { name: string; age: number; email?: string; }	可選屬性: 加 ? (如 email?)
user.role = "admin"	type Role = "admin" \| "user"; interface User { role: Role; }	字面量聯(lián)合: 限制只能填特定字符串
const config = { ... }	type Config = { debug: boolean; port: number }; const config: Config = ...	Type 別名: 適合聯(lián)合類型或復雜映射
const obj = {}	const obj: Record<string, any> = {}	動態(tài)鍵值對: 類似 JS 的 Map 或字典

Interface vs Type 怎么選？

定義對象結構 (如 API 響應、Props) ?? 首選 interface (支持合并，性能微優(yōu))。
定義聯(lián)合類型、元組、復雜映射 ?? 首選 type。

3. 泛型 (Generics) - "類型的變量"

當你想要編寫可復用的代碼，且類型不確定時使用 <T>。

JavaScript (JS 邏輯)	TypeScript (TS 實現(xiàn))	說明
function getFirst(arr) { return arr[0]; }	function getFirst<T>(arr: T[]): T \| undefined { return arr[0]; }	<T> 代表“將來傳入的類型”
const res = fetch(url)	async function fetchData<T>(url: string): Promise<T> { ... }	泛型常用于 Promise 返回值
const box = { value: 1 }	interface Box<T> { value: T; } const numBox: Box<number> = { value: 1 }	泛型接口

常用調(diào)用方式:

// 顯式指定 T 為 string
const result = fetchData<string>('/api/text'); 
// 通?？梢允÷裕琓S 會自動推斷
const result2 = fetchData('/api/text'); // T 自動推斷為 string

4. 高級工具類型 (Utility Types) - 必背神器

不用手動重寫接口，利用內(nèi)置工具轉(zhuǎn)換類型。假設已有 interface User { id: number; name: string; email: string; }

工具類型	含義	代碼示例	結果
Partial<T>	全部變可選	Partial<User>	{ id?: number; name?: string; ... } (用于更新)
Required<T>	全部變必填	Required<Partial<User>>	移除所有 ?
Pick<T, K>	挑選幾個	Pick<User, 'id' \| 'name'>	{ id: number; name: string; }
Omit<T, K>	剔除幾個	Omit<User, 'email'>	{ id: number; name: string; }
Record<K, V>	構建字典	Record<string, number>	{ [key: string]: number }
ReturnType<F>	獲取返回值	ReturnType<typeof myFunc>	自動推斷函數(shù)返回的類型
Parameters<F>	獲取參數(shù)	Parameters<typeof myFunc>	返回參數(shù)組成的元組類型

5. 常見場景遷移對照

場景 A: React/Vue 組件 Props

// JS (PropTypes 或 無檢查)
// function Button({ label, onClick }) { ... }

// TS
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean; // 可選
}

// React
const Button = ({ label, onClick, disabled }: ButtonProps) => { ... };

// Vue (setup script)
const props = defineProps<ButtonProps>();

場景 B: 處理可能為空的值

// JS
if (user && user.address && user.address.city) { ... }

// TS (可選鏈 + 空值合并)
// 1. 可選鏈 (?.)
const city = user?.address?.city; 

// 2. 非空斷言 (!) - 告訴 TS "我保證它不為空" (慎用)
const citySure = user!.address!.city; 

// 3. 類型守衛(wèi) (Type Guard)
if (user?.address) {
  // 在這里 user.address 被自動推斷為非空
  console.log(user.address.city); 
}

場景 C: 導入第三方庫

// JS
import lodash from 'lodash';

// TS
// 1. 優(yōu)先安裝類型包: npm install -D @types/lodash
import lodash from 'lodash'; // 現(xiàn)在擁有智能提示

// 2. 如果沒有類型包 (不推薦)
// import lodash from 'lodash'; // 可能會報錯，需配置 allowJs 或聲明模塊

6. 避坑速記 (Do's & Don'ts)

? 不要這樣做 (Bad)	? 要這樣做 (Good)	原因
let data: any = ...	let data: unknown = ... 或定義具體 Interface	any 關閉了類型檢查，unknown 更安全
const arr = []	const arr: string[] = []	空數(shù)組無法推斷類型，后續(xù) push 會報錯
value as string (隨意斷言)	盡量讓 TS 自動推斷，或用類型守衛(wèi)	隨意斷言會繞過檢查，導致運行時錯誤
function (e) { ... }	function (e: React.ChangeEvent<HTMLInputElement>) { ... }	事件對象需要明確類型才能訪問屬性
復制粘貼大段重復類型	使用 Pick, Omit, extends	保持 DRY (Don't Repeat Yourself)

7. 快速上手命令

如果你有一個現(xiàn)有的 JS 項目想轉(zhuǎn) TS：

初始化: npx tsc --init (生成 tsconfig.json)
修改配置: 打開 tsconfig.json，確保 "strict": true。
重命名: 將 .js 改為 .ts，.jsx 改為 .tsx。
修復報錯: 此時滿屏紅線是正常的。
- 先給變量/函數(shù)加類型。
- 遇到第三方庫沒類型，先裝 @types/xxx。
- 實在不行，臨時用 // @ts-ignore (僅限調(diào)試，用完即刪)。

到此這篇關于JavaScript轉(zhuǎn)TypeScript的速查表的文章就介紹到這了,更多相關JavaScript轉(zhuǎn)TypeScript內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: