🐻

ReactNative で TypeScript と共に Platform-specific extension を使う

2023/08/15に公開

React Native

React

TypeScript

tech

Platform-specific extension とは

ReactNative では、プラットフォーム(iosやandroid)に応じて実装内容を変更したい場合に、拡張子を利用することができます。

以下のようにファイルを分けて...

BigButton.ios.js
BigButton.android.js

以下のように import

import BigButton from './BigButton';

するとビルド時にビルドのプラットフォームに応じて利用するファイルを選択してくれます。

TypeScript で活用するには

愚直に ts でこれをやろうとすると、import で該当箇所にエラーがでてしまいます。

// Cannot find module './BigButton' or its corresponding type declarations.ts(2307)
import BigButton from './BigButton';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

この場合は以下のように、 実装内容の型定義のみを宣言するファイル をエントリーポイントとして用意してやるとキレイにまとまります。

BigButton.d.ts

export type BigButtonProps = {
  onPress: () => void;
};

// declare で型情報のみ宣言する
declare function BigButton(props: BigButtonProps): JSX.Element;
export default BigButton;

BigButton.ios.tsx

import { Button } from 'react-native';
import type { BigButtonProps } from './BigButton';

export default function BigButton(props: BigButtonProps) {
  return <Button title="iosだよ!" {...props} />;
}

BigButton.android.tsx

import { Button } from 'react-native';
import type { BigButtonProps } from './BigButton';

export default function BigButton(props: BigButtonProps) {
  return <Button title="androidだよ!" {...props} />;
}

参考になれば幸いです :)

Platform-specific extension とは

TypeScript で活用するには

Discussion