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

Question

I am using Typescript (version 2.2.1) in VSCode (version 1.10.2) for my React Native project, and I am trying to get the compiler to display * .android.ts and * .ios. ts using the commands:

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

For instance:

import ApplicationTabs from './ApplicationTabs'; 

should display on

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

with the following tsconfig.json settings

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

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

Does anyone know how I can get the compiler to correctly display the paths of * .android.ts and * .ios.ts?

My 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 } 

Thanks: -)

Answer 1

It looks like you are facing the problem described here: https://github.com/Microsoft/TypeScript/issues/8328

According to the problem (and what I found in my own projects), path resolution does not work for relative paths, for example, what you do in your code above. You also do not check the type between your .android and .ios , so I used the other approach discussed in the problem:

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

The recommendations here are to use path mapping support, see https://github.com/Microsoft/TypeScript-Handbook/blob/release-2.0/pages/Module%20Resolution.md#path-mapping

so your tsconfig.json should contain something like:

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

this will tell the compiler when allowing import to BigButton to see:

BigButton.tsx

BigButton.ios.tsx

BigButton.androdid.tsx