React Native*.android.ts和*.ios.ts模块的Typescript路径映射

Question

我在VSCode(版本1.10.2)中使用Typescript(版本2.2.1)作为我的React Native项目,我正在尝试让编译器使用以下方法映射*.android.ts和*.ios.ts路径说明:

https://github.com/Microsoft/TypeScript-Handbook/blob/release-2.0/pages/Module%20Resolution.md#path-mapping

例如:

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
}

谢谢 :-)

Answer 1

这里建议使用路径映射支持，请参阅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