首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript转TypeScript

JavaScript转TypeScript的速查表

2026-05-13 09:16:34 作者：new code Boy

在当今的开发环境中,越来越多的开发者开始将JavaScript迁移到 TypeScript,以利用其静态类型系统和更好的代码可维护性,本文主要介绍了JavaScript转TypeScript的速查表,感兴趣的可以了解一下

1. 基础变量与函数 (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];	数组：类型[] 或 Array<类型>
let pair = ["hi", 1];	let pair: [string, number] = ["hi", 1];	元组 (固定长度和类型的数组)
let val = null;	let val: string \| null = null;	联合类型 (\|)：可以是 string 或 null
function add(a, b) { return a + b; }	function add(a: number, b: number): number { return a + b; }	参数加类型，返回值加 : 类型
const log = (msg) => console.log(msg);	const log = (msg: string): void => console.log(msg);	无返回值用 void
function run(cb) { cb(); }	function run(cb: () => void) { cb(); }	回调函数类型

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; }	字面量联合: 限制只能填特定字符串
const config = { ... }	type Config = { debug: boolean; port: number }; const config: Config = ...	Type 别名: 适合联合类型或复杂映射
const obj = {}	const obj: Record<string, any> = {}	动态键值对: 类似 JS 的 Map 或字典

Interface vs Type 怎么选？

定义对象结构 (如 API 响应、Props) ➡️ 首选 interface (支持合并，性能微优)。
定义联合类型、元组、复杂映射 ➡️ 首选 type。

3. 泛型 (Generics) - "类型的变量"

当你想要编写可复用的代码，且类型不确定时使用 <T>。

JavaScript (JS 逻辑)	TypeScript (TS 实现)	说明
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 }	泛型接口

常用调用方式:

// 显式指定 T 为 string
const result = fetchData<string>('/api/text'); 
// 通常可以省略，TS 会自动推断
const result2 = fetchData('/api/text'); // T 自动推断为 string

4. 高级工具类型 (Utility Types) - 必背神器

不用手动重写接口，利用内置工具转换类型。假设已有 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>	自动推断函数返回的类型
Parameters<F>	获取参数	Parameters<typeof myFunc>	返回参数组成的元组类型

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. 类型守卫 (Type Guard)
if (user?.address) {
  // 在这里 user.address 被自动推断为非空
  console.log(user.address.city); 
}

场景 C: 导入第三方库

// JS
import lodash from 'lodash';

// TS
// 1. 优先安装类型包: npm install -D @types/lodash
import lodash from 'lodash'; // 现在拥有智能提示

// 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[] = []	空数组无法推断类型，后续 push 会报错
value as string (随意断言)	尽量让 TS 自动推断，或用类型守卫	随意断言会绕过检查，导致运行时错误
function (e) { ... }	function (e: React.ChangeEvent<HTMLInputElement>) { ... }	事件对象需要明确类型才能访问属性
复制粘贴大段重复类型	使用 Pick, Omit, extends	保持 DRY (Don't Repeat Yourself)

7. 快速上手命令

如果你有一个现有的 JS 项目想转 TS：

初始化: npx tsc --init (生成 tsconfig.json)
修改配置: 打开 tsconfig.json，确保 "strict": true。
重命名: 将 .js 改为 .ts，.jsx 改为 .tsx。
修复报错: 此时满屏红线是正常的。
- 先给变量/函数加类型。
- 遇到第三方库没类型，先装 @types/xxx。
- 实在不行，临时用 // @ts-ignore (仅限调试，用完即删)。

到此这篇关于JavaScript转TypeScript的速查表的文章就介绍到这了,更多相关JavaScript转TypeScript内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！