TypeScript Support

[cipolleschi]

Hi all,
I'm opening this thread to discuss about the TypeScript support for Codegen in the context of the New Architecture of React Native.

Context

The React Native’s New Architecture relies on the CodeGen to generate ObjC, C++ and Java code for your application and libraries.

Conceptually the CodeGen accepts in input specification files written with a statically typed JS dialect. This is needed as the target languages (ObjC, C++ and Java) are all statically typed and we need to generate typed code for them.

Historically, our CodeGen supported only Flow out of the box. Our New Architecture Guide on the website also mentioned only Flow: Prerequisites for Libraries · React Native

With react-native-codegen version 0.0.13 and beyond, we now support also TypeScript files as input. React Native version 0.68.0 and beyond already have support for TypeScript specs.

The CodeGen will assume the language based on the file extension of the input file (.js and .jsx will assume is Flow, while .ts and .tsx will assume it's TypeScript).

Note about support

I'd like to stress that TypeScript support is currently in beta. There might be edge cases and types that are not correctly handled by the codegen. If there are any of those, please comment here in this thread.

Sample Specs

To provide support to users using TypeScript for their spec files, we created a sample app that is using the New Architecture and is fully written in TypeScript:

• Android
• iOS

Here you can find a sample spec for a TurboModule and for a Fabric Component that you can use as inspiration:

// NativeCalendar.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  createCalendarEvent(name: string, location: string): void;
}

export default TurboModuleRegistry.get<Spec>('CalendarModule');

// MapViewNativeComponents.ts
import type { ViewProps } from 'ViewPropTypes';
import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

export interface NativeProps extends ViewProps {
  zoomEnabled: boolean,
}

export default codegenNativeComponent<NativeProps>(
  'MapView',
) as HostComponent<NativeProps>;

Relevant resources

• Flow Type Mapping on reactnative.dev
• Update of docs for TypeScript on reactnative.dev

[michbil]

Just piece of missing documentation(or I haven't found it anywhere) related to using typescript module definitions.

1. Number types
   You can not use regular number type, you have to specify either Int32, Float or Double types

import type {
  Float,
  Double,
  Int32,
  // @ts-ignore TODO: remove once there is a .d.ts file with definitions
} from 'react-native/Libraries/Types/CodegenTypes';

type EdgeInsets = Readonly<{
  top: Float;
  right: Float;
  bottom: Float;
  left: Float;
}>;
export interface MapProps extends ViewProps {
...
  legalLabelInsets?: EdgeInsets;
...
}

2. Object and array types - should be immutable same as in flowtype.

type Region = Readonly<{
  latitude: Double;
  longitude: Double;
  latitudeDelta: Double;
  longitudeDelta: Double;
}>;

type MapStyleElement = Readonly<{
  featureType?: string;
  elementType?: string;
  stylers: ReadonlyArray<Readonly<{}>>;
}>;
export interface MapProps extends ViewProps {
...
  region?: Region;
  customMapStyle?: MapStyleElement;
...
}

3. Prop types for event handlers. Use BubblingEventHandler or DirectEventHandler

import type {
  Float,
  Double,
  Int32,
  BubblingEventHandler,
  DirectEventHandler,
  // @ts-ignore TODO: remove once there is a .d.ts file with definitions
} from 'react-native/Libraries/Types/CodegenTypes';

type MapEvent = Readonly<{
  coordinate: {
    latitude: Double;
    longitude: Double;
  };
  position: {
    x: Float;
    y: Float;
  };
  action: string;
  id?: string;
}>;

export interface MapProps extends ViewProps {
  ....
  onMapLoaded?: BubblingEventHandler<MapEvent>;
  onMapReady?: BubblingEventHandler<MapEvent>;
  ...
}

[cipolleschi]

Hi @michbil, thanks for pointing out this missing doc. We are refreshing the whole doc of the New Architecture. I'll make sure your findings will be included!

[Titozzz]

Issues with Codegen

1) Declaring DirectEventHandler and using them via types.

import type { ViewProps } from 'ViewPropTypes';
import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import {DirectEventHandler} from 'react-native/Libraries/Types/CodegenTypes';

type EventTyped = Readonly<{
  a: string;
  b: string;
}>

type DirectEventHandlerWithEventTyped = DirectEventHandler<Readonly<{
  a: string;
  b: string;
}>>

type DirectEventHandlerWithEventTyped2 = DirectEventHandler<EventTyped>

export interface NativeProps extends ViewProps {
  onNotWorkingA: DirectEventHandlerWithEventTyped;
  onNotWorkingB: DirectEventHandlerWithEventTyped2;
  onWorking: DirectEventHandler<EventTyped>;
}

export default codegenNativeComponent<NativeProps>(
  'RNCWebView'
) as HostComponent<NativeProps>;

2) Intersection Types

import type { ViewProps } from 'ViewPropTypes';
import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

type typeA = Readonly<{
  a: string;
}>;
type typeB = Readonly<{
  b: string;
}>;
type typeC = Readonly<{
  a: string;
} & {
  b: string;
}>

export interface NativeProps extends ViewProps {
  propA: typeA;
  propB: typeB;

  // Not Working - fails to codegen
  propAB1: Readonly<typeA & typeB>
  // Not Working - fails to codegen
  propAB2: typeA & typeB

  // Not Working - codegens with only {a: string}
  propC: typeC;
}

export default codegenNativeComponent<NativeProps>(
  'RNCWebView'
) as HostComponent<NativeProps>;

[andrestone]

DirectEventHandler seems not to be working.
related: facebook/react-native#34072