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

 抛转引用

此刻越来越多的项目放弃了javascript，而选择拥抱了typescript，就好比我们熟知的ant-design就是个中之一。面临越来越火的typescript，我们公司本年也逐渐开始拥抱typescript。至于为什么要行使typescript？本文不做深入切磋。

这篇文章较量全面地先容了TypeScript，而且和Javascript做了一个比拟。看完上面这篇文章，你会对TypeScript有一个较量深入的熟悉，其它在TypeScript和Javascript的弃取上，可以拿捏得更好。

开始迁徙

在开始迁徙之前，我要说点题外话，本篇文章仅是记录我在迁徙进程中碰着的题目以及我是怎样办理的，并不会涉及typescript的解说。以是各人在阅读本篇文章之前，必然要对typescript有一个基本的熟悉，否则你读起来会很是艰辛。

情形调解

因为Typescript是Javascript的超集，它的许多语法赏识器是不能识此外，因此它不能直接运行在赏识器上，必要将其编译成JavaScript才气运行在赏识器上，这点跟ES6必要颠末babel编译才气支持更多低版本的赏识器是一个原理。

tsconfig.json

起首我们得装一个typescript，这就跟我们在用babel前必要先装一个babel-core是一个原理。

yarn global add typescript 

这条呼吁是将typescript安装在全局，着实我小我私人提议是装在项目目次下的，由于每个项目标typescript版本是不完全一样的，装在全局轻易由于版本差异而呈现题目。可是后头我要执行tsc呼吁，以是我装在了全局。最好的环境就是全局和项目都装一个，可是假如你把tsc呼吁放在package.json中的script中去用的话，那么在项目里装就够了。接下来我们执行如下呼吁天生tsconfig.json,这玩意就跟.babelrc是一本性子的。

tsc --init 

执行完之后，你的项目根目次下便会有一个tsconfig.json这么一个对象，可是内里会有许多注释，我们先不消管他的。

webpack

安装ts-loader用于处理赏罚ts和tsx文件，相同于babel-loader。

yarn add ts-loader -D 

响应的webpack必要加上ts的loader法则：

module.exports = {  
    //省略部门代码...  
    module: {  
        rules: [  
            {  
                test:/.tsx?$/,  
                loader:'ts-loader'  
            }  
            //省略部门代码...  
        ]  
    }  
    //...省略部门代码  
}  

之前用javascript的时辰，也许有人不行使.jsx文件，整个项目都是用的.js文件，webapck内里乃至都不配.jsx的法则。可是在typescript项目中想要所有行使.ts文件这就行不通了，会报错，以是当用到了jsx的用法的时辰，照旧得乖乖用.tsx文件，因此这里我插手了.tsx的法则。

删除babel

关于babel这块，网上有不少人是选择留着的，来由很简朴，说是为了防备往后会行使到JavaScript，可是我小我私人认为是没有须要留着babel。由于我们整个项目内里根基上只有行使第三方包的时辰才会用到javascript，而这些第三方包根基上都是已经编译成了es5的代码了，不必要babel再行止理赏罚一下。而营业逻辑内里用javascript更是不太也许了，由于这便失去了行使typescript的意义。综上所述，我小我私人认为是要删除babel相干的对象，低落项目伟大度。可是有一个破例环境：。

当你用了某些babel插件,而这些插件的成果刚巧是typescript无法提供的，那你可以保存babel，而且与typescript团结。

文件名调解

整个src目下全部的.js末了的文件都要修改文件名，行使到jsx语法的就改成.tsx文件，未行使的就改成.ts文件，这块事变量较量大，会较量头疼。其它改完之后文件必定会有许多标红的处所，不要急着去改它，后头我们分类同一去改。

办理报错

webpack进口文件找不到

因为我们在做文件名调解的时辰，把main.js改成main.tsx,因此webpack的进口文件要改成main.tsx。

module.exports = {  
    //省略部门代码...  
    entry: {  
        app: './src/main.tsx'  
    },  
    //省略部门代码...  
}  

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!