React项目从Javascript到Typescript的迁移经验总结(2)

提示不能使用jsx的语法

这个解决很简单，去tsconfig配置一下即可。

{  
   "compilerOptions":{  
        "jsx": "react"  
   }  
}  

jsx这个配置项有三个值可选择，分别是"preserve","react-native"和"react"。在preserve和react-native模式下生成代码中会保留JSX以供后续的转换操作使用（比如：Babel）。另外，preserve输出文件会带有.jsx扩展名，而react-native是.js拓展名。react模式会生成React.createElement，在使用前不需要再进行转换操作了，输出文件的扩展名为.js。

webpack里面配置的alias无法解析

module.exports = {  
    //省略部分代码...  
    resolve: {  
        alias:{  
          '@':path.join(__dirname,'../src')  
        }  
        //省略部分代码...      
    },  
    //省略部分代码...     
} 

这里需要我们额外在tsconfig.json配置一下。

{  
    "compilerOptions":{  
        "baseUrl": ".",  
        "paths": {  
          "@/*":["./src/*"]  
        }   
    }  
}  

具体如何配置，请看typescript的文档,我就不展开介绍了，但是要注意的是baseUrl和paths一定要配合使用。

https://www.tslang.cn/docs/ha...

无法自动添加拓展名而导致找不到对应的模块

原先我们在webpack里是这么配置的：

module.exports = {  
    //省略部分代码...   
    resolve: {  
        //省略部分代码...   
        extensions: ['.js', '.jsx', '.json']  
    },  
    //省略部分代码...   
}  

但是我们项目里所有.js和.jsx的文件都改成了.ts和.tsx文件，因此配置需要调整。

{  
    //省略部分代码...   
    resolve: {  
        //省略部分代码...   
        extensions: ['.ts','.tsx','.js', '.jsx', '.json']  
    },  
    //省略部分代码...   
}  

Could not find a declaration file for module '**'

这个比较简单，它提示找不到哪个模块的声明文件，你就装个哪个模块的就好了，安装格式如下：

yarn add @types/** 

举个🌰，如果提示Could not find a declaration file for module 'react'，那你应该执行如下命令：

yarn add @types/react 

（编辑：ASP站长网）