Typescript path mapping for React Native *.android.ts and *.ios.ts modules

Question

I'm using Typescript (version 2.2.1) in VSCode (version 1.10.2) for my React Native project and I'm trying to get the compiler to map *.android.ts and *.ios.ts paths by using the instructions at:

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

For example:

import ApplicationTabs from './ApplicationTabs';

should map to

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

with the following tsconfig.json settings

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

but instead throws the compiler throws the error "[ts] cannot find module './ApplicationTabs'"

Does anyone know how I might get the compiler to map to *.android.ts and *.ios.ts paths correctly?

My tsconfig.json is:

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

Thanks :-)

Answer 1

Looks like you're running into the issue reported here: https://github.com/Microsoft/TypeScript/issues/8328

According to the issue (and what I've found in my own projects) path resolution doesn't work for relative paths, like what you're doing in your code above. You also don't get type-checking between your .android and .ios files, so I've been using the other approach discussed in the issue:

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