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/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;

Answer 2

继续该问题……我正在处理相同的问题，对我来说，简单的解决方案是使用：

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可以这样工作。

Answer 3

此处的建议是使用路径映射支持，请参阅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

React Native * .android.ts和* .ios.ts模块

3 个答案: