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

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

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

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

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

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

オプトイン

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

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

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

内部構造

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

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

APIフィードバック

フィードバックの送信：少なくとも今後2回のReact Nativeリリースにわたって、エクスポートするAPIを最終決定するためにコミュニティと協力します。フィードバックスレッドでフィードバックを共有してください。

モチベーションとタイムラインの詳細については、発表ブログ記事も参照してください。

移行ガイド

コード生成の型は`react-native`パッケージからインポートする必要があります

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

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

変換前

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型の変更

アニメーションノードは以前、補間出力に基づいてジェネリック型でした。現在は、ジェネリックなinterpolateメソッドを持つ非ジェネリック型になっています。

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

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

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

一部の非推奨の型の削除

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

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

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

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

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

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

オプトイン​

移行ガイド​

コード生成の型はreact-nativeパッケージからインポートする必要があります​

*Static型の削除​

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

その他の破壊的変更​

Animated型の変更​

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

一部の非推奨の型の削除​

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

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