厳密なTypeScript API (オプトイン)

厳格なTypeScript APIは、React Nativeの将来の安定したJavaScript APIのプレビューです。

具体的には、これはreact-native npmパッケージ用の新しいTypeScript型セットで、0.80以降で利用可能です。これらは、より強力で将来にわたって正確な型精度を提供し、React NativeのAPIを安定した形に自信を持って進化させることを可能にします。厳格なTypeScript APIへのオプトインは、いくつかの構造的な型違いをもたらすため、一度限りの破壊的変更となります。

新しい型は以下の通りです。

ソースコードから直接生成される — カバレッジと正確性を向上させ、より強力な互換性保証を期待できます。
react-nativeのインデックスファイルに限定される — 公開APIをより厳密に定義し、内部ファイルの変更時にもAPIが壊れることがないようにします。

コミュニティの準備が整い次第、厳格なTypeScript APIは将来的にデフォルトのAPIとなり、ディープインポートの削除と同期されます。

オプトイン

これらの新しい型は既存の型と並行して提供されるため、準備ができたときに移行を選択できます。早期導入者や新しく作成されたアプリは、tsconfig.jsonファイルからオプトインすることをお勧めします。

新しい型の中には名前や形状が更新されたものがあるため、オプトインは破壊的変更となりますが、多くのアプリは影響を受けないでしょう。各破壊的変更については次のセクションで学ぶことができます。

tsconfig.json
{
  "extends": "@react-native/typescript-config",
  "compilerOptions": {
    ...
    "customConditions": ["react-native-strict-api"]
  }
}

内部的な仕組み

これにより、TypeScriptは以前のtypes/ディレクトリ（手動で保守されていたもの）の代わりに、新しいtypes_generated/ディレクトリからreact-nativeの型を解決するように指示されます。TypeScriptやエディタの再起動は不要です。

厳格なTypeScript APIは、React Nativeからディープインポートを削除するためのRFCに従っています。そのため、一部のAPIはルートでエクスポートされなくなりました。これは、React NativeのAPIの全体的な表面積を減らすための意図的なものです。

APIフィードバック

フィードバックの送信：私たちは、少なくとも次の2つのReact NativeリリースにわたってどのAPIをエクスポートするかを確定するために、コミュニティと協力していきます。皆様からのフィードバックは、フィードバックスレッドで共有してください。

また、私たちの動機とタイムラインの詳細については、発表ブログ記事も参照してください。

移行ガイド

Codegen型は`react-native`パッケージからインポートされるべきです

Int32、Double、WithDefaultなどのcodgenに使用される型は、単一のCodegenTypes名前空間の下で利用できるようになりました。同様に、codegenNativeComponentとcodegenNativeCommandsは、ディープインポートを使用する代わりに、react-nativeパッケージからインポートできるようになりました。

厳格なAPIが有効になっていない場合でも、react-nativeパッケージから名前空間付きのCodegenTypes、codegenNativeCommands、およびcodegenNativeComponentが利用できるようになり、サードパーティライブラリの採用が容易になります。

変換前

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type {
  Int32,
  WithDefault,
} from 'react-native/Libraries/Types/CodegenTypes';

interface NativeProps extends ViewProps {
  enabled?: WithDefault<boolean, true>;
  size?: Int32;
}

export default codegenNativeComponent<NativeProps>(
  'RNCustomComponent',
);

変換後

import {CodegenTypes, codegenNativeComponent} from 'react-native';

interface NativeProps extends ViewProps {
  enabled?: CodegenTypes.WithDefault<boolean, true>;
  size?: CodegenTypes.Int32;
}

export default codegenNativeComponent<NativeProps>(
  'RNCustomComponent',
);

`*Static`型の削除

変換前

import {Linking, LinkingStatic} from 'react-native';

function foo(linking: LinkingStatic) {}
foo(Linking);

変換後

import {Linking} from 'react-native';

function foo(linking: Linking) {}
foo(Linking);

以下のAPIは以前、*Staticとそれに続く当該型の変数宣言として命名されていました。ほとんどの場合、値と型が同じ識別子の下でエクスポートされるようにエイリアスがありましたが、一部のエイリアスは欠落していました。

(例えば、AlertStatic型、AlertStatic型のAlert変数、そしてAlertStaticのエイリアスであるAlert型がありました。しかし、PixelRatioの場合、PixelRatioStatic型と、その型のPixelRatio変数はありましたが、追加の型エイリアスはありませんでした。)

影響を受けるAPI

AlertStatic
ActionSheetIOSStatic
ToastAndroidStatic
InteractionManagerStatic (この場合、関連するInteractionManager型エイリアスはありませんでした)
UIManagerStatic
PlatformStatic
SectionListStatic
PixelRatioStatic (この場合、関連するPixelRatio型エイリアスはありませんでした)
AppStateStatic
AccessibilityInfoStatic
ImageResizeModeStatic
BackHandlerStatic
DevMenuStatic (この場合、関連するDevMenu型エイリアスはありませんでした)
ClipboardStatic
PermissionsAndroidStatic
ShareStatic
DeviceEventEmitterStatic
LayoutAnimationStatic
KeyboardStatic (この場合、関連するKeyboard型エイリアスはありませんでした)
DevSettingsStatic (この場合、関連するDevSettings型エイリアスはありませんでした)
I18nManagerStatic
EasingStatic
PanResponderStatic
NativeModulesStatic (この場合、関連するNativeModules型エイリアスはありませんでした)
LogBoxStatic
PushNotificationIOSStatic
SettingsStatic
VibrationStatic

一部のコアコンポーネントがクラスコンポーネントから関数コンポーネントになりました

View
Image
TextInput
Modal
Text
TouchableWithoutFeedback
Switch
ActivityIndicator
ProgressBarAndroid
InputAccessoryView
Button
SafeAreaView

この変更により、これらのビューのref型にアクセスするには、クラスコンポーネントと関数コンポーネントの両方で期待通りに機能するReact.ComponentRef<typeof View>パターンを使用する必要があります。例：

const ref = useRef<React.ComponentRef<typeof View>>(null);

その他の破壊的変更

Animated型の変更

Animatedノードは以前、補間出力に基づくジェネリック型でした。現在は、ジェネリックなinterpolateメソッドを持つ非ジェネリック型です。

Animated.LegacyRefは利用できなくなりました。

オプションプロパティの統一された型

新しい型では、すべてのオプションプロパティはtype | undefinedとして型付けされます。

いくつかの非推奨型の削除

DeprecatedPropertiesAlias.d.tsに記載されているすべての型は、厳格なAPIの下ではアクセスできません。

残存するコンポーネントプロパティの削除

型定義で定義されていたがコンポーネントで使用されていなかった、または定義が欠けていたいくつかのプロパティが削除されました（例：TextのlineBreakMode、ScrollViewのscrollWithoutAnimationTo、transform配列外で定義されたtransformスタイル）。

以前アクセス可能だったプライベートな型ヘルパーが削除される可能性があります

以前の型定義の設定により、定義されたすべての型がreact-nativeパッケージからアクセス可能でした。これには、明示的にエクスポートされていない型や、内部でのみ使用されることを意図したヘルパー型も含まれていました。

これの注目すべき例としては、StyleSheetに関連する型（RecursiveArray、RegisteredStyle、Falsyなど）やAnimatedに関連する型（WithAnimatedArray、WithAnimatedObjectなど）があります。

オプトイン​

移行ガイド​

Codegen型はreact-nativeパッケージからインポートされるべきです​

*Static型の削除​

一部のコアコンポーネントがクラスコンポーネントから関数コンポーネントになりました​

その他の破壊的変更​

Animated型の変更​

オプションプロパティの統一された型​

いくつかの非推奨型の削除​

残存するコンポーネントプロパティの削除​

以前アクセス可能だったプライベートな型ヘルパーが削除される可能性があります​