1. React与TypeScript入门：打好基础，少走弯路

说实话，我见过太多前端开发者一上来就扎进React和TypeScript的深水区，结果被类型报错搞得焦头烂额。其实入门这件事，关键是把几个核心概念理清楚。今天我就带你一步步搭建环境、理解项目结构，顺便分享一些我踩过的坑。

1.1 React与TypeScript：为什么非要凑一对？

React本身是用JavaScript写的。但JavaScript有个问题——它太「自由」了。你传个字符串给数字类型的props，它也不报错，直到运行时才崩溃。TypeScript就是来解决这个问题的。

说白了，TypeScript给React加了一层「类型安全网」。你在写代码时就能发现类型不匹配，而不是等到用户点按钮才报错。我在项目中遇到过好几次，因为某个props类型写错，导致整个页面白屏。有了TypeScript，这种低级错误基本能杜绝。

核心关系：React负责UI渲染，TypeScript负责类型约束。两者结合，开发效率翻倍，bug数量减半。

1.2 搭建开发环境：从零开始

环境搭建其实不难，但细节容易出错。我建议你按这个顺序来：

第一步：安装Node.js

Node.js是JavaScript的运行环境。没有它，你的React项目就跑不起来。去官网下载LTS版本就行，别追新。

小技巧：安装完成后，在终端输入 node -v 和 npm -v，看到版本号就说明成功了。

第二步：选择包管理器

npm是Node自带的，够用。但我个人更习惯用yarn，因为它速度快、锁定文件更可靠。你可以这样安装yarn：

npm install -g yarn

嗯，这里要注意：如果你在公司内网，可能需要配置镜像源，不然下载会慢到怀疑人生。

第三步：创建React+TypeScript项目

最省事的方式是用Create React App的TypeScript模板。一行命令搞定：

npx create-react-app my-app --template typescript

或者用yarn：

yarn create react-app my-app --template typescript

为什么会推荐这个模板？因为它帮你配好了TypeScript的编译、ESLint规则、测试框架。你直接写代码就行，不用折腾配置文件。

避坑指南：我曾经因为Node版本太低，导致create-react-app报错。建议Node版本保持在14以上。如果遇到权限问题，试试 npx clear-npx-cache 清一下缓存。

1.3 项目结构解析：每个文件夹是干嘛的？

项目创建完成后，你会看到一堆文件夹。别慌，我带你逐个看：

文件夹/文件 作用 我的建议
src/ 你的代码都放这里 核心目录，90%的时间都在这里
public/ 静态资源，比如HTML、图标 一般不动，除非改页面标题
node_modules/ 第三方依赖包 别碰它，也别提交到Git
package.json 项目配置和依赖列表 经常看，了解用了哪些包
tsconfig.json TypeScript编译配置 初学者先别改，默认够用

你想想看，src/ 里面还有几个关键文件：

  • App.tsx：根组件，你的应用从这里开始
  • index.tsx：入口文件，把App挂载到DOM上
  • react-app-env.d.ts：TypeScript的类型声明文件，让TS认识React

重点： .tsx 后缀表示这个文件里既有TypeScript又有JSX。如果文件里没有JSX，用 .ts 就行。我见过有人把所有文件都写成 .tsx，其实没必要。

1.4 第一个组件：感受TypeScript的威力

我们来写一个简单的组件，看看TypeScript怎么帮我们避免错误：

// src/components/Greeting.tsx
import React from 'react';

interface GreetingProps {
  name: string;
  age?: number;  // 可选属性
}

const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <h1>你好，{name}！</h1>
      {age && <p>你今年{age}岁</p>}
    </div>
  );
};

export default Greeting;

看到 interface GreetingProps 了吗？这就是TypeScript的核心——定义组件的「使用说明书」。如果你在别的地方调用这个组件时传错了类型，编辑器会立刻报红。比如：

// 错误示例：age传了字符串
<Greeting name="小明" age="十八" />  // TypeScript报错！

嗯，这就是TypeScript的厉害之处。我在项目中遇到过最典型的场景：后端接口返回的数据结构变了，前端没同步更新，结果页面直接崩了。有了TypeScript，这种问题在编译阶段就能发现。

1.5 开发服务器与构建

环境搭好了，怎么跑起来？两个命令记住就行：

  • npm start 或 yarn start：启动开发服务器，默认在 localhost:3000
  • npm run build 或 yarn build：打包生产版本，输出到 build/ 文件夹

个人习惯：开发时我一般开两个终端，一个跑 yarn start，一个用来跑测试或git命令。这样互不干扰。

你可能会问：为什么开发服务器能自动刷新？因为Create React App内置了Webpack的热模块替换（HMR）。你改了代码，浏览器自动更新，不用手动刷新。这个功能在开发时特别爽。

1.6 本章小结

到这，你应该能自己搭一个React+TypeScript项目了。记住几个关键点：

  • TypeScript是给React加类型约束，不是替代React
  • 用Create React App的TypeScript模板，省心省力
  • src/ 是你的主战场，其他文件夹先别动
  • 接口（interface）是TypeScript的核心，多用它定义props类型

下一章我们会深入组件的类型定义，包括更复杂的props、状态管理、事件处理。到时候你会发现，TypeScript越用越顺手。

公众号:蓝海资料掘金营，微信deep3321

← 上一章 📖 返回目录 下一章 →