我在 VSCode(版本 1.10.2)中使用 Typescript(版本 2.2.1)用于我的 React Native 项目,并且我试图让编译器通过使用来映射 *.android.ts 和 *.ios.ts 路径说明位于:
例如:
import ApplicationTabs from './ApplicationTabs';
应该映射到
import ApplicationTabs from './ApplicationTabs/index.ios';
使用以下 tsconfig.json 设置
{
"compilerOptions": {
"paths": {
"*": ["*", "*.ios", "*.android"]
}
}
}
而是抛出编译器抛出错误“[ts]找不到模块'./ApplicationTabs'”
有谁知道如何让编译器正确映射到 *.android.ts 和 *.ios.ts 路径?
我的 tsconfig.json 是:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"moduleResolution": "node",
"jsx": "react",
"outDir": "build",
"rootDir": "src",
"removeComments": true,
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"experimentalDecorators": true,
"preserveConstEnums": true,
"allowJs": true,
"inlineSourceMap": true,
"sourceRoot": "src",
"baseUrl": ".",
"paths": {
"*": [
"*",
"*.ios",
"*.android"
]
}
},
"filesGlob": [
"typings/**/*.d.ts",
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.tsx"
],
"exclude": [
"index.android.js",
"index.ios.js",
"build",
"node_modules"
],
"compileOnSave": false
}
谢谢:-)
看起来您遇到了此处报告的问题:https://github.com/Microsoft/TypeScript/issues/8328
根据问题(以及我在自己的项目中发现的内容),路径解析不适用于相对路径,就像您在上面的代码中所做的那样。您也不会在
.android
和 .ios
文件之间进行类型检查,因此我一直在使用本问题中讨论的其他方法:
./ApplicationTabs.d.ts
// This file exists for two purposes:
// 1. Ensure that both ios and android files present identical types to importers.
// 2. Allow consumers to import the module as if typescript understood react-native suffixes.
import DefaultIos from './ApplicationTabs.ios';
import * as ios from './ApplicationTabs.ios';
import DefaultAndroid from './ApplicationTabs.android';
import * as android from './ApplicationTabs.android';
declare var _test: typeof ios;
declare var _test: typeof android;
declare var _testDefault: typeof DefaultIos;
declare var _testDefault: typeof DefaultAndroid;
export * from './ApplicationTabs.ios';
export default DefaultIos;
继续这个问题......我正在解决同样的问题,对我来说简单的解决方案是使用:
import ApplicationTabs from './ApplicationTabs/index';
在
tsconfig
中,您不需要任何“路径”部分。
这使得tscompiler找到模块
./ApplicationTabs/index.ts
(这个文件必须存在)。
因为(来自https://github.com/Microsoft/TypeScript-Handbook/blob/release-2.0/pages/Module%20Resolution.md#path-mapping):
相对导入将相对于导入文件进行解析。因此,源文件 import { b } from "./moduleB"
中的 /root/src/folder/A.ts
将导致以下查找:
/root/src/folder/moduleB.ts
/root/src/folder/moduleB.d.ts
react-native 打包器(Metro)会找到
./ApplicationTabs``/index.android.ts
或 ./ApplicationTabs/index.ios.ts
,因为 React-native 就是这样工作的。我遇到了同样的问题,我可以通过将此配置添加到“compilerOptions”内的
tsconfig.json
来修复
“模块后缀”:[“.ios”,“.android”,“.native”,“”],
这里建议使用路径映射支持,请参阅https://github.com/Microsoft/TypeScript-Handbook/blob/release-2.0/pages/Module%20Resolution.md#path-mapping
所以你的 tsconfig.json 应该包含类似的内容:
{
"compilerOptions": {
"paths": {
"*": ["*", "*.ios", "*.android"]
}
}
}
这将告诉编译器在解析 BigButton 的导入时查看:
BigButton.tsx
BigButton.ios.tsx
BigButton.androdid.tsx