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

这个仅限于第三方包，如果是项目自己的模块提示缺少声明文件，那就需要你自己写对应的声明文件了。比如你在window这个全局对象上挂载了一个对象，如果需要使用它的话，就需要做一下声明，否则就会报错。至于具体怎么写，这得看typescript的文档，这里就不展开说明了。

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

Cannot find type definition file for '**'

这些并没有在我们的业务代码里直接用到，而是第三方包用到的，遇到这种情况，需要检查一下tsconfig.json中的typeRoots这个配置项有没有配置错误。一般来说是不用配置typeRoots，但是如果需要加入额外的声明文件路径，就需要对其进行修改。typeRoots是有一个默认值，有人会误以为这个默认值是“["node_modules"]”，因此会有人这样配置：

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

实际上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这种全局对象

（编辑：ASP站长网）