从JavaScript到TypeScript：30分钟快速上手实战经验分享

代码温度计

2025-06-15 09:26

阅读 702

引言：为什么我会选择TypeScript？

作为一名前端工程师，我写JS代码已经有几年了，早期用jQuery，后来React横空出世，我也跟着转向了现代框架的开发方式。但直到几年前加入现在的公司，我才第一次真正接触到TypeScript。

当时我们团队要接手一个已经上线一年多的中型项目，功能模块越来越多，维护成本直线上升。最头疼的就是每次改完一处功能，不知道会不会“炸”别的地方。原因很简单——动态类型语言太灵活了，写的时候爽，后期维护真的累。

我们决定用TypeScript对现有项目进行逐步迁移和重构。这个过程中我踩了很多坑，但也收获巨大。今天我想通过这篇文章，把我这30天里（其实不到30分钟？😄）学会并熟练使用的TypeScript经验整理出来，希望你也能快速上手，并在实际项目中受益。

背景与挑战：老项目的问题到底多严重？

项目背景

项目的主干是React + Redux架构，使用Webpack打包，整体结构还算清晰。但是由于一开始是小团队快速开发，加上没有明确的组件设计规范和类型约束，导致代码逐渐变得难以维护：

函数参数名经常被随意更改或省略
接口返回的数据结构不一致，容易引发运行时错误
组件props传递时容易传错或漏传某些关键字段
团队协作困难，新成员很难通过代码了解数据流向

面临的挑战

如何不推翻原有架构直接接入TypeScript？
如何避免因类型报错而影响原有功能逻辑？
如何让团队所有成员顺利过渡、减少学习成本？
怎么保证迁移过程中不影响线上功能？

这些问题看起来都挺难，但好在TypeScript提供了一套相对友好的解决方案，我们可以一步步来。

解决方案：TypeScript能解决什么问题？

CSS动画效果展示-1

解决方案：TypeScript能解决什么问题？

TypeScript 最大的优势就是它能在编译期就帮我们发现很多潜在的 bug，比如：

参数类型错误
拼写错误导致调用失败
对象属性未定义访问
函数返回值误用等

这些都可以在开发阶段提前暴露出来，而不是在线上出现。

另外，TS 还有一个非常棒的特点就是「渐进式支持」——你可以先从 .js 文件改成 .ts 或者 .tsx，然后慢慢增加类型注解。这样既能保持业务稳定，又能逐步提升可维护性。

快速上手实践：30分钟入门指南

第一步：搭建基础环境

我们的项目原本是使用 Webpack+React 的结构，所以我需要添加 TypeScript 支持。主要工作如下：

npm install --save-dev typescript ts-loader

然后修改 webpack.config.js，增加对 .ts 和 .tsx 的处理：

{
  test: /\.[tj]sx?$/,
  use: {
    loader: 'ts-loader',
  },
  exclude: /node_modules/,
}

别忘了创建 tsconfig.json 来配置 TypeScript 的行为：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

小技巧：如果你不想一开始就启用严格模式 ("strict": true)，可以暂时设为 false，逐步开启。不过建议还是尽快开启，因为这样才能发挥 TS 的最大威力。

第二步：改造第一个 `.js` 文件为 `.ts`

随便挑一个非核心文件，比如我们某个公共函数 utils.js：

// utils.js
function formatTime(time) {
  return new Date(time).toLocaleString();
}

现在改为 .ts 后缀，并添加类型注解：

// utils.ts
function formatTime(time: number | string): string {
  return new Date(time).toLocaleString();
}

这个时候 VSCode 应该会提示类型错误，但不会中断你原有的构建流程。只有当你显式调用了错误类型时才会抛出警告。

第三步：编写带类型的 React 组件

这是我在实际工作中最常见的需求。例如，我们要封装一个用户信息展示组件：

// UserInfo.tsx
interface UserProps {
  id: number;
  name: string;
  email?: string; // 可选属性
}

const UserInfo: React.FC<UserProps> = ({ id, name, email }) => {
  return (
    <div>
      <p>ID: {id}</p>
      <p>Name: {name}</p>
      {email && <p>Email: {email}</p>}
    </div>
  );
};

export default UserInfo;

这个例子简单但很实用，可以看到我们给 props 定义了接口 UserProps，并且 email 是可选的。

第四步：使用联合类型和类型守卫判断状态

比如我们后端 API 返回可能会有成功或失败的状态码：

interface SuccessResponse {
  status: 'success';
  data: any;
}

interface ErrorResponse {
  status: 'error';
  message: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(res: ApiResponse) {
  if (res.status === 'success') {
    console.log('请求成功', res.data);
  } else {
    console.error('请求失败', res.message);
  }
}

这种联合类型结合 if 判断的方式叫做“类型守卫”，可以有效防止我们在不同状态下访问不存在的属性。

第五步：引入第三方类型定义（d.ts）

有些时候我们会用到一些未集成 TS 的第三方库，比如 jQuery、Lodash 等。这时候就需要手动安装类型声明文件：

npm install --save-dev @types/jquery

这样就能在你的 TS 文件里愉快地使用 $ 了 😄

实战经验分享：迁移过程中遇到的那些坑

坑点一：旧代码中太多“any”

刚开始把 .js 改成 .ts 之后，满屏的报错，全是 implicitly has an 'any' type。

原因：

JS 中变量默认是 any 类型，但在 strict 模式下不允许这种模糊的类型。

解法：

逐个变量加类型注解；
如果实在不知道类型，可以用 unknown 代替；
使用 JSDoc 注释辅助 TS 类型推断（适合已有 JS 项目）。

例如：

/** 
 * @param {string} name - 用户名称
 * @returns {number} 字符串长度
 */
function getLength(name) {
  return name.length;
}

配合 jsdoc 插件，可以让 VSCode 自动识别参数类型。

坑点二：函数默认参数的类型错误

比如下面这个例子：

function sayHello(name = '游客') {
  return '你好，' + name;
}

虽然默认值存在，但在调用时如果不传参，TypeScript 仍然可能认为 name 是 undefined。

解法：

function sayHello(name: string = '游客'): string {
  return '你好，' + name;
}

记得给参数和返回值都加类型！

坑点三：Redux Action Type 写错搞崩整个 App

之前我们常常会犯的错误是 action 的 type 字符串拼错了，结果 reducer 没有响应。

用 TypeScript 后可以轻松解决这个问题：

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

type CounterAction = 
  | { type: typeof INCREMENT }
  | { type: typeof DECREMENT };

function counterReducer(state = 0, action: CounterAction) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
}

这样一旦写错就会立刻报红，极大提高安全性。

效果总结：迁移到TypeScript后的收益有哪些？

经过一个多月的逐步迁移，我们取得了以下成果：

类型错误大幅下降：原本常见的“undefined is not a function”类错误基本消失；
新人上手更快：有了类型注解，新同事阅读代码更加直观；
重构更安全：有了类型系统兜底，大胆改代码也不怕出问题；
IDE 提示更智能：VSCode 自动提示属性、方法，大大提高了开发效率；
项目质量显著提升：测试覆盖率上升，线上 error 数量下降了约 60%。

给新手的一些建议

✅ 小心起步，逐步推进

不要一开始就想着全量替换。可以从工具函数、小型组件开始写 .ts 文件，等熟悉后再扩展到全局。

✅ 多用接口(interface)和类型别名(type)

这对大型项目尤其重要，良好的接口设计能够帮助你更好地组织逻辑。

✅ 学会查看类型定义（.d.ts）

很多时候你不理解为什么会报错，打开官方或者社区提供的类型文件，往往能找到答案。

✅ 利用 VSCode 插件简化开发

推荐几个常用的插件：

TypeScript Hero：自动导入、排序、生成 interface 等；
Prettier + ESLint：格式化 + 检查代码风格；
TS Import Sorter：自动排序导入语句。

✅ 关注浏览器兼容性和性能

虽然 TS 是编译成 JS 执行，但也要注意：

编译目标是否适配老旧浏览器？
是否启用了 tree-shaking 优化体积？
类型过多是否影响编译速度？

总结一下

TypeScript 不会立刻让你变成大神，但它的确是一个能大幅提升代码质量、降低维护成本的好工具。

作为一位亲身经历过项目升级转型的前端工程师，我可以负责任地说一句：早学早受益。

这篇文章不是一篇高深的技术论文，而是基于我日常工作中的真实经历和踩过的坑，希望能帮助你少走弯路，快速上手机器类型语言的世界。

最后送大家一句话共勉：

“写代码不是为了取悦机器，而是为了方便人读。”
而 TypeScript 正是帮你更好表达这段话的桥梁。

如果你还有任何疑问或者想知道更多实战细节，欢迎留言交流！ 🙌

标签:爬虫React

最热最新

暂无评论

为你推荐

暂无相关推荐

从JavaScript到TypeScript：30分钟快速上手实战经验分享

引言：为什么我会选择TypeScript？

背景与挑战：老项目的问题到底多严重？

项目背景

面临的挑战

解决方案：TypeScript能解决什么问题？

快速上手实践：30分钟入门指南

第一步：搭建基础环境

第二步：改造第一个 `.js` 文件为 `.ts`

第三步：编写带类型的 React 组件

第四步：使用联合类型和类型守卫判断状态

第五步：引入第三方类型定义（d.ts）

实战经验分享：迁移过程中遇到的那些坑

坑点一：旧代码中太多“any”

原因：

解法：

坑点二：函数默认参数的类型错误

解法：

坑点三：Redux Action Type 写错搞崩整个 App

效果总结：迁移到TypeScript后的收益有哪些？

给新手的一些建议

✅ 小心起步，逐步推进

✅ 多用接口(interface)和类型别名(type)

✅ 学会查看类型定义（.d.ts）

✅ 利用 VSCode 插件简化开发

✅ 关注浏览器兼容性和性能

总结一下

评论 0

为你推荐

精选内容

从JavaScript到TypeScript：30分钟快速上手实战经验分享

引言：为什么我会选择TypeScript？

背景与挑战：老项目的问题到底多严重？

项目背景

面临的挑战

解决方案：TypeScript能解决什么问题？

快速上手实践：30分钟入门指南

第一步：搭建基础环境

第二步：改造第一个 .js 文件为 .ts

第三步：编写带类型的 React 组件

第四步：使用联合类型和类型守卫判断状态

第五步：引入第三方类型定义（d.ts）

实战经验分享：迁移过程中遇到的那些坑

坑点一：旧代码中太多“any”

原因：

解法：

坑点二：函数默认参数的类型错误

解法：

坑点三：Redux Action Type 写错搞崩整个 App

效果总结：迁移到TypeScript后的收益有哪些？

给新手的一些建议

✅ 小心起步，逐步推进

✅ 多用接口(interface)和类型别名(type)

✅ 学会查看类型定义（.d.ts）

✅ 利用 VSCode 插件简化开发

✅ 关注浏览器兼容性和性能

总结一下

评论 0

为你推荐

相关推荐

精选内容

第二步：改造第一个 `.js` 文件为 `.ts`