reactjs - Typescript-polkujen kartoitus React Native *.android.ts ja *.ios.ts -moduuleille

Käytän Typescriptiä (versio 2.2.1) VSCodessa (versio 1.10.2) React Native -projektissani ja yritän saada kääntäjän kartoittamaan *.android.ts ja *.ios.ts -polut käyttämällä ohjeita osoitteessa:

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

Esimerkiksi:

import ApplicationTabs from './ApplicationTabs';

pitäisi kartoittua

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

seuraavilla tsconfig.json-asetuksilla

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

mutta sen sijaan kääntäjä heittää virheen "[ts] ei löydy moduulia './ApplicationTabs'"

Tiedätkö joku, miten voisin saada kääntäjän kartoittamaan oikein *.android.ts ja *.ios.ts polut?

Minun tsconfig.json-tiedostoni on:

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

Kiitos :-)

Vastaus #1

Näyttää siltä, että kohtaat ongelman, josta on raportoitu täällä: https://github.com/Microsoft/TypeScript/issues/8328

Ongelman mukaan (ja mitä olen löytänyt omissa projekteissani) polun ratkaisu ei toimi suhteellisille poluille, kuten teet yllä olevassa koodissasi. Et myöskään saa tyypintarkistusta .android ja .ios tiedostojesi välillä, joten olen käyttänyt toista lähestymistapaa, josta keskusteltiin ongelmassa:

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

Vastaus #2

Jatkaen asiaa… Työstin samaa ongelmaa, ja yksinkertainen ratkaisuni on käyttää:

import ApplicationTabs from './ApplicationTabs/index';

Tsconfig-tiedostossa sinun ei tarvitse mitään "paths"-osiota.

  1. Tämä saa tscompilerin löytämään moduulin ./ApplicationTabs/index.ts (tämän tiedoston on oltava olemassa). Koska (lähde: https://github.com/Microsoft/TypeScript-Handbook/blob/release-2.0/pages/Module%20Resolution.md#path-mapping): Suhteellinen importti ratkaistaan suhteessa tuovaan tiedostoon. Joten import { b } from "./moduleB" lähdetiedostossa /root/src/folder/A.ts johtaisi seuraaviin hakuun:

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

  2. React-native-paketoija (Metro) löytää ./ApplicationTabs``/index.android.ts tai ./ApplicationTabs/index.ios.ts, koska react-native toimii niin.

Aiheeseen liittyviä artikkeleita