Vyhledávání na webu

reactjs - Mapování cest v Typescriptu pro moduly React Native *.android.ts a *.ios.ts

Používám Typescript (verze 2.2.1) ve VSCode (verze 1.10.2) pro svůj projekt React Native a snažím se, aby kompilátor mapoval cesty *.android.ts a *.ios.ts pomocí pokynů na:

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

Například:

import ApplicationTabs from './ApplicationTabs';

mělo by odpovídat

import ApplicationTabs from './ApplicationTabs/index.ios';

s následujícím nastavením tsconfig.json

{
    "compilerOptions": {
        "paths": {
            "*": ["*", "*.ios", "*.android"]
        }
   }
}

ale místo toho kompilátor vyhodí chybu „[ts] nelze najít modul './ApplicationTabs'“

Nikdo neví, jak bych mohl přimět kompilátor, aby správně mapoval cesty *.android.ts a *.ios.ts?

Můj tsconfig.json je:

{
    "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
}

Díky :-)

Odpověď č. 1

Vypadá to, že narážíte na problém hlášený zde: https://github.com/Microsoft/TypeScript/issues/8328

Podle problému (a toho, co jsem zjistil ve svých vlastních projektech) řešení cest nefunguje pro relativní cesty, jako to, co děláte ve svém kódu výše. Také nedostáváte kontrolu typů mezi svými soubory .android a .ios, takže jsem používal jiný přístup diskutovaný v problému:

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

Odpověď č. 2

Pokračování problému… Pracoval jsem na stejném problému a jednoduché řešení pro mě je použít:

import ApplicationTabs from './ApplicationTabs/index';

V tsconfig nepotřebujete žádnou sekci "paths".

  1. To způsobí, že tscompiler najde modul ./ApplicationTabs/index.ts (tento soubor musí existovat). Protože (z https://github.com/Microsoft/TypeScript-Handbook/blob/release-2.0/pages/Module%20Resolution.md#path-mapping): Relativní import bude vyřešen vůči souboru, který importuje. Takže import { b } from "./moduleB" v souboru /root/src/folder/A.ts by vedl k následujícím hledáním:

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

  2. Balíčkovač react-native (Metro) najde ./ApplicationTabs``/index.android.ts nebo ./ApplicationTabs/index.ios.ts, protože react-native funguje takto.

Související články