react项⽬添加typescript类型定义⽂件.d.ts
最近⽤react + antd mobile + typescript开发项⽬，其中使⽤了rc-form这个包，可惜没有typescript版本，导致不到类型定义。⼀起来重温⼀下这个经典的错误。
D:/Code/test/src/pages/me/register/RegisterTest.tsx
TypeScript error in D:/Code/test/src/pages/me/register/RegisterTest.tsx(5,28):
File 'D:/Code/test/src/rc-form.d.ts' is not a module.  TS2306
3 | import BrowserHistory from '../../../router/BrowserHistory';
4 | import { AppUrls } from '../../../http/AppUrls';
> 5 | import { createForm } from "rc-form";
|                            ^
6 | import MyToast from '../../../componets/MyToast';
7 |
react router68 | export function RegisterTest(props: any) {
解决办法：
在⽹上查了很久，那些修改typeRoots的⽅法根本不好使，太坑⼈了。下⾯的⽅法绝对好⽤！
1. 修改项⽬根⽬录下的tsconfig.json⽂件，添加baseUrl选项，由于项⽬是⽤create-react-app创建的，这个值只能是src或者node_modules，推荐⽤src。
2. 编写类型定义⽂件rc-form.d.ts，内容如下：
declare module 'rc-form' {
export const createForm: Function;
}
3. 将rc-form.d.ts放⼊项⽬的src⽬录下。
4. 在需要使⽤rc-form模块的⽂件⾥直接导⼊即可。
import { createForm } from "rc-form";
===
最新⽅法：
tsconfig这样配置，注意typeRoots要放到compilerOptions结点下⾯。{
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext",
"es2015"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"baseUrl": "src",
"typeRoots": [
"src/custom_types",
"node_modules/@types"
]
},
"include": [
"src"
]
}
2. src⽬录下新建⼀个⽂件夹custom_types，放⼊类型定义⽂件，如下。
===