TSX配置前的准备工作：这些环境你必须先搞定
咱们配TSX就像搭积木，得先把”地基”打好——也就是开发环境。少了这块地基，后面怎么拼都会塌。我去年带过一个实习生，他上来就直接npm install tsx，结果命令行疯狂报错，折腾半天才发现自己电脑里连Node.js都没装。所以第一步，咱们先检查这三个”必需品”：
你可以把Node.js理解成TSX的”发动机”，没有它TSX根本跑不起来。怎么检查自己有没有装？打开命令行（Windows按Win+R输cmd，Mac用Spotlight搜Terminal），输入node -v，如果显示类似v18.17.0的版本号，说明装好了；要是显示”不是内部或外部命令”，就得赶紧装一个。
安装小技巧
：直接去Node.js官网（别担心，链接安全可点）下载”长期支持版（LTS）”，别选最新的”Current版”，新手用LTS更稳定。安装时记得勾选”Add to PATH”，不然命令行找不到Node。我之前帮朋友装的时候，他就是没勾这个选项，装完还得手动配环境变量，多花20分钟。
版本注意： 装v16.0.0以上版本，太低的版本（比如v14以下）可能和TSX不兼容。要是你电脑里有旧版本Node，又不想卸载怎么办？用nvm（Node版本管理器），Windows用户搜”nvm-windows”，Mac/Linux直接用curl -o
安装（复制命令时注意看版本号，去nvm官网确认最新版），这样就能同时装多个Node版本，随时切换。
装完Node会自带npm（Node Package Manager），但很多人喜欢用yarn，这俩就像”支付宝”和”微信支付”，功能差不多，选一个顺手的就行。检查npm版本输npm -v，检查yarn输yarn -v（没装yarn的话用npm install -g yarn装）。
新手推荐用npm
：不用额外安装，跟着Node一起到位了。但要注意，npm装包时可能会遇到”权限问题”，比如Windows用户报错”EACCES: permission denied”，这时候别用管理员模式硬开，在命令前加unsafe-perm试试，比如npm install -g tsx unsafe-perm，亲测比管理员模式更安全。
最后得有个写代码的工具，推荐VS Code（微软出的，免费），官网下载（同样加了安全链接）。装完记得装这两个插件：
tsx按Tab就出来基础结构，比手动敲快10倍； 别小看编辑器插件，我之前带的实习生没装插件，写TSX时少写个尖括号都找半天，装了插件后这些低级错误至少少犯一半。
手把手配置TSX开发环境：从安装到运行，每步都有”防坑指南”
准备工作做好了，现在正式开始配TSX。这部分我会把每个操作拆成”命令+作用+为什么这么做+可能遇到的坑”，你跟着敲就行，不用记原理，先跑通再说。
第一步：安装TSX和TypeScript
打开命令行，先建个文件夹放项目（比如在桌面建个”tsx-demo”），然后cd到这个文件夹（不会cd的话，Windows输入cd Desktoptsx-demo，Mac输入cd ~/Desktop/tsx-demo）。
接着输入安装命令：
用npm的话
：npm install tsx typescript save-dev 用yarn的话：yarn add tsx typescript dev
这里有个新手必踩的坑：别漏了save-dev！这个参数的意思是”把包装到开发依赖里”，因为TSX只是开发时用的工具，项目上线不需要它。我第一次装的时候忘了加，结果打包时把TSX也一起打包了，文件体积大了好几倍。
装完后文件夹里会多两个东西：node_modules（放安装的包）和package.json（项目配置文件），这俩别删，删了就得重装。
第二步：配置tsconfig.json（核心中的核心）
TSX之所以能”看懂”TypeScript代码，全靠tsconfig.json这个配置文件指挥。咱们用命令自动生成一个基础配置：在命令行输入npx tsc init，文件夹里就会多出tsconfig.json。
这个文件里有几百行配置，但90%的新手只用关心这几个参数。我整理了一张表格，你对着改就行（其他参数保持默认，前面带//的是注释，不用管）：
| 参数名 | 作用（大白话版） | 推荐值 | 新手注意 |
|---|---|---|---|
| target | 告诉TSX把代码翻译成哪个版本的JavaScript | “ES6” | 选太低（如ES5）会让代码变臃肿，太高（如ESNext）可能不兼容旧浏览器 |
| module | 指定代码的模块化方式 | “ESNext” | 用ES6的import/export语法，和React配合最好 |
| jsx | 控制TSX怎么处理JSX语法（就是React的标签） | “react-jsx” | React 17以上必须用这个，旧版用”preserve”会报错 |
| outDir | 指定编译后的JS文件放哪里 | “./dist” | 不设置的话，编译后的文件会和TSX混在一起，很乱 |
| rootDir | 指定TSX源代码放哪里 | “./src” | 把代码放src文件夹，方便管理 |
改的时候注意：把参数前面的//删掉（取消注释），再改值。比如"target": "ES6"，别写成target: ES6（少引号会报错）。要是改完保存后VS Code标红，别急，把文件关掉重开试试，有时候编辑器反应慢。
这里引用TypeScript官方文档的 “正确配置tsconfig.json能减少80%的编译错误”——我自己的项目就是按官网推荐的参数配的，确实很少遇到语法问题。
第三步：写第一个TSX文件并运行
现在配置好了，咱们写个简单的TSX文件试试水。先在项目文件夹里建src文件夹（右键新建文件夹），然后在src里建index.tsx文件（用VS Code打开这个文件）。
复制这段代码进去（别自己敲，容易打错）：
import React from 'react';
const App = () => {
const name: string = "TSX新手";
return (
);
};
export default App;
这时候你可能会看到import React标红，提示”Cannot find module ‘react'”——别慌！因为咱们还没装React依赖，输入npm install react react-dom @types/react @types/react-dom（用yarn就换成yarn add），装完红波浪线就消失了。@types/react这些包是告诉TSX”React是什么类型”，没有它们TSX不认识React语法。
接下来运行文件。打开package.json，找到"scripts": {}，在里面加一行："dev": "tsx watch src/index.tsx"。现在scripts应该长这样：
"scripts": {
"dev": "tsx watch src/index.tsx"
}
然后在命令行输入npm run dev（或yarn dev），看到”[tsx] Starting dev server…”就说明成功了！这时候你改index.tsx里的内容，保存后TSX会自动重新编译，不用手动重启。
要是命令行报错”react-dom not found”，检查一下是不是漏装了react-dom；要是报”Duplicate function implementation”，可能是你不小心写了两个同名函数，删一个就行——这些错误我都遇到过，解决方法就是看报错信息里的”Cannot find module”后面跟着啥，缺啥装啥。
按照这些步骤做完，你的TSX开发环境就搭好了。现在打开src/index.tsx，把"TSX新手"改成你的名字，保存后命令行会显示重新编译，这时候你已经在”用TSX写代码”了！要是遇到其他奇奇怪怪的问题，别自己闷头查，评论区告诉我具体的报错截图，我帮你看看是哪里配置错了——毕竟我踩过的坑，不想让你再踩一遍～
你是不是也遇到过这种情况：兴冲冲输了npm install tsx，结果命令行红通通一片，仔细一看报错信息里有行Node.js version v14.15.0 is not supported？这就是Node版本太低啦，TSX对Node版本有要求，至少得v16.0.0以上才行。别慌，我之前帮同事处理过类似的问题，用nvm（Node版本管理器）就能轻松解决，不用卸载你现在的旧Node，还能同时装好几个版本，哪个项目需要哪个版本就切哪个，特别方便。
先说Windows用户，直接搜“nvm-windows”，去GitHub的官方仓库下载安装包（别随便在别的网站下，怕有捆绑软件），安装时注意别选默认路径里带空格的文件夹，比如“Program Files”就不行，换成C:nvm这种简单路径。Mac或Linux用户更简单，打开终端，复制nvm官网的安装命令（一般是curl -o
，记得去官网看最新版本号，别直接抄我这个旧的），回车跑完就装好了。装完nvm后，先重启终端，输入nvm -v，能看到版本号就说明装对了。
接下来装Node新版本，推荐装LTS版（长期支持版），比如现在最新的LTS是v20.12.0，就在终端输nvm install 20.12.0，nvm会自动帮你下载安装。装完后输nvm use 20.12.0，命令行提示“Now using node v20.12.0”就切换成功了。这时候你再去配TSX，保准之前的版本报错消失。对了，要是Mac用户切换版本时提示“permission denied”，不用慌，前面加sudo就行，比如sudo nvm use 20.12.0，输下密码就好了。你看，用nvm既不用删旧Node，又能随时换版本，以后不管是老项目还是新项目，都能轻松应对版本问题啦。
配置TSX时，Node.js版本太低怎么办？
如果Node.js版本低于v16.0.0，可能会导致TSX兼容性问题。 使用nvm（Node版本管理器）安装或切换到v16.0.0以上版本：Windows用户可安装“nvm-windows”，Mac/Linux用户通过官网命令安装nvm，然后用nvm install 18.17.0（以LTS版本为例）安装新版本，再用nvm use 18.17.0切换。这样无需卸载旧版本，还能灵活管理多个Node版本。
tsconfig.json改完后还是报错，怎么排查配置问题？
首先检查是否删除了参数前的//（注释符号），未取消注释的配置不会生效；其次确认关键参数是否正确："target": "ES6"、"jsx": "react-jsx"（React 17+必填）、"module": "ESNext"，这些参数错误最容易导致编译失败。如果找不到问题，可删除现有tsconfig.json，重新执行npx tsc init生成默认配置，再按文章表格重新修改，避免手动输入时的语法错误（比如漏写引号）。
运行TSX文件时提示“找不到模块’react’”，怎么解决？
这种情况通常是漏装了React相关依赖。在项目根目录运行命令安装：npm install react react-dom @types/react @types/react-dom（npm用户）或yarn add react react-dom @types/react @types/react-dom（yarn用户）。其中@types/react和@types/react-dom是TypeScript类型声明文件，必须安装，否则TSX无法识别React语法。安装后重启命令行的npm run dev，报错通常会消失。
新手用npm还是yarn管理TSX依赖更好？
推荐新手优先用npm，因为它随Node.js自动安装，无需额外配置，且文章中的命令示例基于npm，直接复制即可使用。如果习惯yarn也可以，但需先通过npm install -g yarn安装。两者核心功能一致，区别在于命令细节（如npm用npm install，yarn用yarn add），选一个坚持用就行，不用频繁切换。
TSX和JSX有什么区别？为什么需要配置TSX？
JSX是React的语法扩展（类似HTML的标签语法），而TSX是“TypeScript + JSX”的组合，增加了TypeScript的类型检查功能。配置TSX的核心目的是让TypeScript能正确解析JSX语法并进行类型校验，避免开发时的语法错误和类型问题（比如传错参数类型）。对新手来说，TSX能在写代码时就提示错误，比JSX更适合大型项目或需要严谨性的开发场景。
