快捷導(dǎo)航

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

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

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

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

JavaScript (JS)	TypeScript (TS)	說(shuō)明
let count = 0;	let count: number = 0;	基礎(chǔ)類型：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];	元組 (固定長(zhǎng)度和類型的數(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);	無(wú)返回值用 void
function run(cb) { cb(); }	function run(cb: () => void) { cb(); }	回調(diào)函數(shù)類型

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

JavaScript (JS)	TypeScript (TS)	說(shuō)明
const user = { name: "A", age: 25 };	interface User { name: string; age: number; } const user: User = { ... };	Interface: 定義對(duì)象形狀的最佳實(shí)踐
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)合類型或復(fù)雜映射
const obj = {}	const obj: Record<string, any> = {}	動(dòng)態(tài)鍵值對(duì): 類似 JS 的 Map 或字典

Interface vs Type 怎么選？

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

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

當(dāng)你想要編寫(xiě)可復(fù)用的代碼，且類型不確定時(shí)使用 <T>。

JavaScript (JS 邏輯)	TypeScript (TS 實(shí)現(xiàn))	說(shuō)明
function getFirst(arr) { return arr[0]; }	function getFirst<T>(arr: T[]): T \| undefined { return arr[0]; }	<T> 代表“將來(lái)傳入的類型”
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'); 
// 通?？梢允÷?，TS 會(huì)自動(dòng)推斷
const result2 = fetchData('/api/text'); // T 自動(dòng)推斷為 string

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

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

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

5. 常見(jiàn)場(chǎng)景遷移對(duì)照

場(chǎng)景 A: React/Vue 組件 Props

// JS (PropTypes 或 無(wú)檢查)
// 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>();

場(chǎng)景 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 被自動(dòng)推斷為非空
  console.log(user.address.city); 
}

場(chǎng)景 C: 導(dǎo)入第三方庫(kù)

// JS
import lodash from 'lodash';

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

// 2. 如果沒(méi)有類型包 (不推薦)
// import lodash from 'lodash'; // 可能會(huì)報(bào)錯(cuò)，需配置 allowJs 或聲明模塊

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

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

7. 快速上手命令

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

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

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

您可能感興趣的文章: