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

大家好，我是某211高校计算机专业的研二学生，平时喜欢在博客上写一些前端技术的入门教程。今天想和大家分享一篇关于 TypeScript 的快速入门指南。

我当初学前端的时候，直接从 JavaScript 跳到 React 项目开发，结果被各种 undefined is not a function、类型混乱、props 传错等问题折磨得够呛。后来接触了 TypeScript，才发现“原来代码还能这么写！”——不仅减少了 bug，还让团队协作变得清晰高效。所以，我想用这篇《30 分钟上手指南》，帮零基础的你避开我踩过的坑，快速掌握 TypeScript 的核心用法，并顺利用在 React 项目中。

💡 本文目标：30 分钟内，让你能看懂、写简单的 TypeScript 代码，并在 React 中安全使用它。全程实践驱动，拒绝空谈！

---

一、TypeScript 是什么？为什么要学？

简单说：TypeScript = JavaScript + 类型系统。

• 它是 JavaScript 的超集（superset），也就是说，所有合法的 JS 代码都是合法的 TS 代码。
• 最大的优势：在编码阶段就能发现类型错误，而不是等到运行时才崩溃。
• 尤其适合中大型项目或团队协作，比如用 React 开发管理后台、电商平台等。

举个例子：

// JavaScript：运行时才报错
function add(a, b) {
  return a + b;
}
add("1", 2); // 结果是 "12" —— 这是你想要的吗？

// TypeScript：写代码时就提示错误！
function add(a: number, b: number): number {
  return a + b;
}
add("1", 2); // ❌ 编译器立刻报错：Argument of type 'string' is not assignable to parameter of type 'number'.

是不是安全感爆棚？

---

二、环境准备：5 分钟搭好开发环境

步骤 1：安装 Node.js

确保你电脑已安装 Node.js（建议 LTS 版本）。终端输入：

node -v
npm -v

看到版本号就 OK。

步骤 2：全局安装 TypeScript（可选）

npm install -g typescript

验证安装：

tsc --version

⚠️ 注意：实际项目中我们通常不全局安装，而是作为项目依赖。但为了快速体验，先全局装一下没问题。

步骤 3：创建你的第一个 TS 文件

新建一个文件夹 ts-demo，进入后创建 hello.ts：

// hello.ts
function greet(name: string): string {
  return "Hello, " + name;
}

console.log(greet("小明"));

步骤 4：编译并运行

在终端执行：

tsc hello.ts      # 编译成 hello.js
node hello.js     # 运行

输出：Hello, 小明

✅ 避坑指南：如果你遇到 tsc 命令找不到，请检查 PATH 或改用 npx tsc hello.ts。

---

三、核心概念：用最简单的方式理解 TS

TypeScript 的核心就是 给变量、函数、对象加上“标签”（类型）。下面是最常用的几个。

1. 基础类型（Primitive Types）

类型	示例	说明
string	"hello"	字符串
number	42, 3.14	数字（不分 int/float）
boolean	true, false	布尔值
null / undefined	null, undefined	空值（默认开启 strict 模式时需显式声明）

let age: number = 25;
let name: string = "张三";
let isActive: boolean = true;

💡 经验分享：我当初以为 let x; 默认是 any 类型，结果在严格模式下报错。现在我都养成习惯：声明变量时尽量加类型，或者用 const 让 TS 自动推断。

2. 数组与对象

// 数组：两种写法
let numbers: number[] = [1, 2, 3];
let fruits: Array<string> = ["apple", "banana"];

// 对象：用 interface 定义结构
interface Person {
  name: string;
  age: number;
}

const user: Person = {
  name: "李四",
  age: 30
};

3. 函数类型

// 参数类型 + 返回值类型
function sum(a: number, b: number): number {
  return a + b;
}

// 可选参数（加 ?）
function greetUser(name: string, title?: string): string {
  return title ? `${title} ${name}` : name;
}
greetUser("王五");        // OK
greetUser("王五", "Dr."); // OK

4. 联合类型（Union Types）

// 允许变量是多种类型之一
let id: string | number;
id = "abc123"; // OK
id = 123;      // OK

5. 类型推断（Type Inference）

TS 很聪明，很多时候你不用写类型，它自己能猜出来：

let message = "Hello"; // TS 自动推断为 string
// message = 123;      // ❌ 报错！

✅ 最佳实践：简单变量靠推断，复杂对象/函数参数显式声明。

---

四、实战：用 TypeScript 写一个 React 组件

现在我们把 TS 用到 React 中！这是大多数新人的真实需求。

步骤 1：用 Create React App 创建项目（支持 TS）

npx create-react-app my-ts-app --template typescript
cd my-ts-app
npm start

📚 书籍推荐：如果你想系统学习，我强烈推荐《TypeScript 入门教程》（阮一峰著）和《深入理解 TypeScript》。前者适合零基础，后者适合进阶。

步骤 2：改造 App.tsx

打开 src/App.tsx，替换为以下代码：

import React from 'react';

// 定义 props 类型
interface GreetingProps {
  name: string;
  enthusiasmLevel?: number; // 可选
}

// 函数组件 + 类型注解
const Greeting: React.FC<GreetingProps> = ({ name, enthusiasmLevel = 1 }) => {
  if (enthusiasmLevel <= 0) {
    throw new Error('You could be a little more enthusiastic. :D');
  }

  return (
    <div>
      <h1>
        Hello {name}{Array(enthusiasmLevel).fill('!').join('')}
      </h1>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Greeting name="小明" enthusiasmLevel={3} />
      {/* <Greeting name={123} /> ❌ 类型错误！name 必须是 string */}
    </div>
  );
}

export default App;

步骤 3：看看效果

• 浏览器显示：Hello 小明!!!
• 如果你把 name="小明" 改成 name={123}，编辑器会立刻标红，根本不会让你运行出错的代码！

💡 我的踩坑经历：刚开始用 React + TS 时，总忘记给组件 props 加 interface，结果传错参数导致页面白屏。现在我写组件第一件事就是定义类型！

---

五、新手常见问题 & 解决方案

Q1：为什么我的 TS 文件报错 “Cannot find name ‘React’”？

原因：没导入 React（即使你只用 JSX）。

解决：

import React from 'react'; // 必须有！

📌 从 React 17 开始，JSX 转换不需要手动导入 React，但 TS 项目仍建议保留，避免类型报错。

---

Q2：如何处理第三方库没有类型定义？

很多老库没有 .d.ts 类型文件。

解决：

1. 先试试安装类型包：

   npm install --save-dev @types/lodash
   

2. 如果没有，可以用 any 临时绕过（不推荐长期使用）：

   const _: any = require('lodash');
   

---

Q3：strict 模式太严格，能不能关掉？

可以，但强烈不建议！

在 tsconfig.json 中：

{
  "compilerOptions": {
    "strict": false // 不推荐
  }
}

✅ 我的建议：宁可多写几行类型，也不要关闭 strict。它能帮你避免 80% 的低级错误。

---

Q4：TS 编译太慢怎么办？

开发时我们通常用 Webpack/Vite 实时编译，不需要手动 tsc。

• Create React App / Vite 已内置 TS 支持，保存即生效。
• 生产构建时才真正编译成 JS。

---

六、下一步学习建议

恭喜你已经跨过了 TypeScript 的门槛！接下来：

📚 推荐学习路径

1. 巩固基础：

   • 泛型（Generics）
   • 类型守卫（Type Guards）
   • 高级类型（Partial, Pick, Omit 等）

2. 深入 React + TS：

   • 自定义 Hook 的类型写法
   • Context + TS
   • 表单验证与类型联动

3. 工具链：

   • tsconfig.json 配置详解
   • ESLint + Prettier + TS 集成

📖 书籍 & 资源推荐

资源	适合人群	链接
《TypeScript 入门教程》- 阮一峰	零基础	https://ts.xcatliu.com/
TypeScript 官方文档（中文）	所有人	https://www.typescriptlang.org/zh/
《深入理解 TypeScript》	进阶	https://jkchao.github.io/typescript-book-chinese/

💬 最后的话：我当初学 TS 时也觉得“好麻烦”，但坚持一周后，就再也回不去纯 JS 了。类型不是束缚，而是护甲。希望这篇 30 分钟指南能成为你前端进阶的第一块基石！

---

动手时间：现在就去创建一个 TS + React 项目，写一个带类型的 TodoList 吧！遇到问题欢迎留言讨论～