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

实际上typeRoots的默认值“["@types"]”，所有可见的"@types"包都会在编辑过程中被加载进来，比如“./node_modules/@types/”，“../node_modules/@types/”和“../../node_modules/@types/”等等都会被加载进来。所以遇到这种问题，你的配置应该改成：

{  
    "compilerOptions":{  
        "typeRoots":["@types",...,"./src/types"]  
    }  
}  

在实际项目中，@types基本上存在于根目录下的node_modules下，因此这里你可以改成这样：

{  
    "compilerOptions":{  
        "typeRoots":["node_modules/@types",...,"./src/types"]  
    }  
}  

不支持decorators（装饰器）

typescript默认是关闭实验性的ES装饰器，所以需要在tsconfig.json中开启。

{  
    "compilerOptions":{  
        "experimentalDecorators":true  
    }  
}  

Module '**' has no default export

提示模块代码里没有“export

default”，而你却用“import from ”这种默认导入的形式。对于这个问题，我们需要把tsconfig.json配置项“allowSyntheticDefaultImports”设置为true。允许从没有设置默认导出的模块中默认导入。不过不必担心会对代码产生什么影响，这个仅仅为了类型检查。

{  
    "compilerOptions":{  
        "allowSyntheticDefaultImports":true  
    }  
}  

当然你也可以使用“esModuleInterop”这个配置项，将其设置为true，根据“allowSyntheticDefaultImports”的默认值，如下：

module === "system" or --esModuleInterop 

对于“esModuleInterop”这个配置项的作用主要有两点：

• 提供__importStar和__importDefault两个helper来兼容babel生态
• 开启allowSyntheticDefaultImports

对于“esModuleInterop”和“allowSyntheticDefaultImports”选用上，如果需要typescript结合babel，毫无疑问选“esModuleInterop”，否则的话，个人习惯选用“allowSyntheticDefaultImports”，比较喜欢需要啥用啥。当然“esModuleInterop”是最保险的选项，如果对此拿捏不准的话，那就乖乖地用“esModuleInterop”。

无法识别document和window这种全局对象

（编辑：青岛站长网）

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