客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
要将CRA创建的JavaScript 项目迁移到 TypeScript ，首先要看下通过npx create-react-app my-app --typescript生成的项目和普通js项目的区别 1. 从项目目录上看，除了后缀更改为.tsx之外，还新增加了两个文件（根目录下） 1⃣️ src/react-app-env.d.ts /// <reference types="node" /> /// <reference types="react" /> /// <reference types="react-dom" /> declare namespace NodeJS { interface ProcessEnv { readonly NODE_ENV: 'development' | 'production' | 'test'; readonly PUBLIC_URL: string; } } declare module '*.bmp' { const src: string; export default src; } declare module '*.gif' { const src: string; export default src; } declare module '*.jpg' { const src: string; export default src; } declare module '*.jpeg' { const src: string; export default src; } declare module '*.png' { const src: string; export default src; } declare module '*.webp' { const src: string; export default src; } declare module '*.svg' { import * as React from 'react'; export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>; const src: string; export default src; } declare module '*.module.css' { const classes: { readonly [key: string]: string }; export default classes; } declare module '*.module.scss' { const classes: { readonly [key: string]: string }; export default classes; } declare module '*.module.sass' { const classes: { readonly [key: string]: string }; export default classes; } 2⃣️ tsconfig.json { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react" }, "include": [ "src" ] } 2. 从webpack配置上看，CRA已经帮我们考虑了很多了！我们不需要花太多的时间在webpack配置上 //config/webpack.config.js const useTypeScript = fs.existsSync(paths.appTsConfig); webpack.config.js文件中，会先检测是否在项目根目录下存在tsconfig.json文件，有的话启动对应的webpack配置 补充一下，js项目如果为将文件的后缀补全，webpack打包的时候是不会去尝试查找对应的ts文件 resolve: { extensions: paths.moduleFileExtensions .map(ext => `.${ext}`) .filter(ext => useTypeScript || !ext.includes('ts') }
比较了两者的区别，我们现在可以很容易的将js项目迁移至ts项目 1. 安装对应的依赖 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 2. 为了稳妥，将node_modules全部删除，重新npm install；完成后，执行npm run start ; CRA会动态将上述两个文件添加 切记！！别自己手动添加这两个文件，重新npm install的时候，可能会有版本依赖，安装的包版本可能也不同 3. 如何做到js和tsx文件共存，其实tsconfig.json文件中的"allowJs": true 就已经做了此操作 注意：你的react-scripts版本至少要为2.1.0
|
请发表评论