注意
https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter
如果你以前通过npm install -g create-react-app
全局安装过create-react-app
,官方推荐使用npm uninstall -g create-react-app
先卸载,然后安装最新的npx
。
两种方法
-
npx create-react-app my-app --typescript
,然后npm start
就能启动了。https://facebook.github.io/create-react-app/docs/adding-typescript
-
npx create-react-app my-app
创建了项目后,突然发现忘了添加typescript
,需要自己去手动配置
针对第二种手动配置
先照着官方文档:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
然后如果直接照着文档提示,将 src/index.js 改成 src/index.tsx 再启动的话,一定报错!!!
这时候需要去手动改配置了。
如何去配置呢?
最简单的方法就是照着npx create-react-app my-app --typescript
创建的项目配置去改:
// 研究性学习
// 生成带typescript的项目环境
npx create-react-app react-ts --typescript
// 显示被隐藏的webpack配置
npm run eject
然后比对 my-app
和 react-ts
两个文件夹,很明显的看到,少了个 tsconfig.json
。可以直接拷贝过来,关于里面的配置信息以及所有课配置项看:http://json.schemastore.org/tsconfig
这个时候 npm start
下发现无报错,能正常启动了。
但是能用了吗?
试试把 src 下所有 js 文件都改成 .tsx/.ts 后缀,然后重新 npm start
。
启动报错:Cannot find module './logo.svg'.
为什么找不到'./logo.svg'?
继续对比两个项目,会发现 react-ts
项目的 src 目录下有个 react-app-env.d.ts
文件,但是我的 my-app
项目没有。
将它拷贝过来,然后 npm start
,依然有报错,不过是其他错误了,说明引入图片报错解决了。
为什么 react-app-env.d.ts 文件能解决这个问题呢?
看看 react-app-env.d.ts
的代码,ts风格的,声明了各种 图片格式/css/scss 的 module
,结合之前报错说找不到module
,大致能猜出这个文件就是给所有 图片格式/css/scss 文件类型设定模块,以便于能够直接import
。
如果使用 npx create-react-app react-ts --typescript
生成的项目,并且没有 npm run eject
的话,会发现 react-app-env.d.ts 中只有下面一段代码:
/// <reference types="react-scripts" />
但是 npm run eject
后内容就变化了。
那么 react-app-env.d.ts 是如何生成的呢?它的配置是如何起作用的呢?
首先,需要真的看懂这个文件的语法。
如何起作用?
这个主要依赖于webpack的配置了,毕竟是.ts
文件,会被相应的模块加载器解析。
如何生成?
这是个问题。
回答这个问题前,需要看下create-react-app
源码。但是由于是npx
安装的,我在本地竟然没找到create-react-app
,后来在阮一峰老师的文章npx 使用教程中了解到
npx create-react-app my-react-app
运行时,npx
将create-react-app
下载到一个临时目录,使用以后再删除。所以,以后再次执行上面的命令,会重新下载create-react-app
。
额外了解以上知识后,我把create-react-app
clone 到本地,然后浏览它的源码。
先看package.json文件,找到create-react-app
命令,它对应的是"node tasks/cra.js"
,需要去tasks文件夹下找到cra.js。这是该命令的启动文件。
在文件中找到这段代码:
指导我去找create-react-app文件夹下的index.js文件。该文件主要就是下面这段代码:
require('./createReactApp');
需要去createReactApp.js里面看看源码了,里面的代码还是比较多的。大致浏览下,可以看到主要依赖于 createApp
函数构建。
这里的参数 param
是什么?看下图:
其实就是我们输入的命令行参数!!!
// 分析命令行输入
npx create-react-app my-app --typescript
// --typescript参数传入,此时 createApp 中的 useTypescript 为 true,接下来自动去添加相关依赖。
createApp
方法中最后调用了 run
方法,附上代码图:
run
中一开始就调用了getInstallPackage
方法获取依赖,见下图:
可以看到依赖于 react-scripts
包。此时可以去该包下查看。
老规矩,先看 package.json 文件,结果幸福来得太突然!!!
{
"types": "./lib/react-app.d.ts",
}
这个是 模块解析 相关内容:
同时,TypeScript在 package.json里使用字段"types"来表示类似"main"的意义 - 编译器会使用它来找到要使用的"main"定义文件。
确实可以在 lib 文件夹下找到 react-app.d.ts 文件,而且与我拷贝过来的一模一样,所以,压根不是生成的!!!是原先就默认配置好的,然后根据命令行传参来决定是否显示(配置)该文件!!!
理解了上面的知识后,可以尝试开发了,当然,启动还会有报错,不过基本上就是typescript类型的报错,毕竟之前代码是普通js,现在需要给它加上相应的类型即可。
总结
react-app.d.ts 文件是默认配置在 react-scripts文件夹下的 lib 文件夹中的,当时用命令行来构建时,会根据是否输入 --typescript
参数来决定是否显示/配置 react-app.d.ts 文件。
学无止境,保持一颗好奇心~