脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript转TypeScript

JavaScript转TypeScript的速查表

 更新时间：2026年05月13日 09:16:33   作者：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 = ... 或定义具体 Interfaceany 关闭了类型检查，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：

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

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

您可能感兴趣的文章:

相关文章

  • ES6新特性之解构、参数、模块和记号用法示例

    ES6新特性之解构、参数、模块和记号用法示例

    这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下
    2017-04-04
  • JS如何修改数组对象的Key和指定的值

    JS如何修改数组对象的Key和指定的值

    这篇文章主要介绍了JS如何修改数组对象的Key和指定的值,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • js实现点击图片将图片地址复制到粘贴板的方法

    js实现点击图片将图片地址复制到粘贴板的方法

    这篇文章主要介绍了js实现点击图片将图片地址复制到粘贴板的方法,涉及js操作节点的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • 前端js经典之字符串超全方法总结大全

    前端js经典之字符串超全方法总结大全

    我们操作字符串,也有一堆的方法来帮助我们操作,这篇文章主要给大家介绍了关于前端js经典题之字符串超全方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • javascript实现五星评分功能

    javascript实现五星评分功能

    这篇文章主要介绍了javascript实现五星评分功能，大家现在会见到许多五星评级，知道是如何实现的吗？文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript实现Flash炫光波动特效

    JavaScript实现Flash炫光波动特效

    JavaScript写的炫光波动效果,看到一些Flash效果不错,用JS也模拟一下,还有很多不完善的地方,给各位参考参考。
    2015-05-05
  • 微信小程序下拉框组件使用方法详解

    微信小程序下拉框组件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • VS Code中搭建JavaScript运行环境超详细过程

    VS Code中搭建JavaScript运行环境超详细过程

    这篇文章主要介绍了JavaScript从浏览器到服务端的演变,以及如何在VSCode中安装和配置Node.js和相关插件来运行JavaScript代码,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2025-04-04
  • JavaScript之排序函数_动力节点Java学院整理

    JavaScript之排序函数_动力节点Java学院整理

    排序也是在程序中经常用到的算法。这篇文章主要介绍了JavaScript之排序函数，有兴趣的可以了解一下
    2017-06-06
  • JavaScript实现的斑马线表格效果【隔行变色】

    JavaScript实现的斑马线表格效果【隔行变色】

    这篇文章主要介绍了JavaScript实现的斑马线表格效果,通过javascript针对table表格的遍历与运算实现隔行变色功能,非常简单实用,需要的朋友可以参考下
    2017-09-09

最新评论