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

Posted 2023-02-22

【中文标题】React Native *.android.ts 和 *.ios.ts 模块的 Typescript 路径映射

【英文标题】：Typescript path mapping for React Native *.android.ts and *.ios.ts modules

【发布时间】：2017-08-20 21:24:53

【问题描述】：

我在 VSCode（版本 1.10.2）中为我的 React Native 项目使用 Typescript（版本 2.2.1），我试图让编译器映射 *.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] cannot find module './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

谢谢:-)

【问题讨论】：

如果您找到了解决方案，介意发布您的解决方案吗？

嗨，Bijou，我没有找到解决方案。我刚开始学习 React Native，所以我决定现在只用 javascript 编写。

【参考方案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;

【参考方案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）： 相对导入将相对于导入文件进行解析。所以源文件/root/src/folder/A.ts 中的import b from "./moduleB" 将导致以下查找：

/root/src/folder/moduleB.ts
/root/src/folder/moduleB.d.ts

react-native 打包器 (Metro) 会找到 ./ApplicationTabs``/index.android.ts 或 ./ApplicationTabs/index.ios.ts，因为 react-native 就是这样工作的。

【讨论】：

但是我们如何构建它呢？假设在这种情况下moduleB 是ApplicationTabs，实际的moduleB 代码是否进入./ApplicationTabs/index.ts 或./ApplicationTabs/index.ios.ts 和./ApplicationTabs/index.android.ts？我糊涂了。谢谢

【参考方案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

【讨论】：

这似乎是从github.com/Microsoft/TypeScript/issues/… 复制的。正如提问者所指的那样，这仅适用于绝对导入，而不是相对导入。