Saltar al contenido principal
Versión: 0.82

API estricta de TypeScript (opcional)

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

La API estricta de TypeScript es una vista previa de nuestra futura API JavaScript estable para React Native.

Específicamente, es un nuevo conjunto de tipos de TypeScript para el paquete npm react-native, disponible desde la versión 0.80 en adelante. Estos proporcionan una precisión de tipos más sólida y preparada para el futuro, y nos permitirán evolucionar con confianza la API de React Native hacia una forma estable. Optar por la API estricta de TypeScript conlleva algunas diferencias en la estructura de tipos y, por lo tanto, es un cambio disruptivo único.

Los nuevos tipos:

  1. Generados directamente desde nuestro código fuente: mejoran la cobertura y corrección, por lo que puedes esperar garantías de compatibilidad más sólidas.

  2. Restringidos al archivo índice de react-native: definen de manera más estricta nuestra API pública y significan que no romperemos la API al realizar cambios internos en los archivos.

Cuando la comunidad esté lista, la API estricta de TypeScript se convertirá en nuestra API predeterminada en el futuro, sincronizada con la eliminación de importaciones profundas.

Cómo optar por la API​

Enviamos estos nuevos tipos junto con los tipos existentes, lo que significa que puedes elegir migrar cuando estés listo. Recomendamos a los primeros en adoptar y a las aplicaciones recién creadas que opten por esta API mediante su archivo tsconfig.json.

Optar por esta API es un cambio disruptivo, ya que algunos de nuestros nuevos tipos tienen nombres y formas actualizados, aunque muchas aplicaciones no se verán afectadas. Puedes conocer cada cambio disruptivo en la siguiente sección.

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

Esto indicará a TypeScript que resuelva los tipos de react-native desde nuestro nuevo directorio types_generated/, en lugar del anterior directorio types/ (mantenido manualmente). No es necesario reiniciar TypeScript ni tu editor.

La API estricta de TypeScript sigue nuestro RFC para eliminar las importaciones profundas de React Native. Por lo tanto, algunas API ya no se exportan en la raíz. Esto es intencional, con el fin de reducir la superficie general de la API de React Native.

Comentarios sobre la API

Envío de comentarios: Trabajaremos con la comunidad para finalizar qué API exportamos durante (al menos) las próximas dos versiones de React Native. Comparte tus comentarios en nuestro hilo de comentarios.

Consulta también nuestra publicación de blog de anuncio para obtener más información sobre nuestra motivación y cronogramas.

Guía de migración​

Los tipos de Codegen ahora deben importarse desde el paquete react-native​

Los tipos utilizados para codegen, como Int32, Double, WithDefault, etc., ahora están disponibles bajo un único espacio de nombres CodegenTypes. De manera similar, codegenNativeComponent y codegenNativeCommands ahora están disponibles para importar desde el paquete react-native en lugar de usar la importación profunda.

El espacio de nombres CodegenTypes, así como codegenNativeCommands y codegenNativeComponent, también están disponibles en el paquete react-native cuando la API estricta no está habilitada, para facilitar la adopción por parte de bibliotecas de terceros.

Antes

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',
);

Después

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

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

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

Eliminación de los tipos *Static​

Antes

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

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

Después

import {Linking} from 'react-native';

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

Las siguientes API se denominaban anteriormente como *Static junto con una declaración de variable de dicho tipo. En la mayoría de los casos, había un alias para que el valor y el tipo se exportaran bajo el mismo identificador, pero algunos faltaban.

(Por ejemplo, existía un tipo AlertStatic, una variable Alert de tipo AlertStatic y un tipo Alert que era un alias de AlertStatic. Pero en el caso de PixelRatio, había un tipo PixelRatioStatic y una variable PixelRatio de ese tipo sin alias adicionales.)

APIs afectadas

  • AlertStatic

  • ActionSheetIOSStatic

  • ToastAndroidStatic

  • InteractionManagerStatic (En este caso no existía un alias de tipo InteractionManager relevante)

  • UIManagerStatic

  • PlatformStatic

  • SectionListStatic

  • PixelRatioStatic (En este caso no existía un alias de tipo PixelRatio relevante)

  • AppStateStatic

  • AccessibilityInfoStatic

  • ImageResizeModeStatic

  • BackHandlerStatic

  • DevMenuStatic (En este caso no existía un alias de tipo DevMenu relevante)

  • ClipboardStatic

  • PermissionsAndroidStatic

  • ShareStatic

  • DeviceEventEmitterStatic

  • LayoutAnimationStatic

  • KeyboardStatic (En este caso no existía un alias de tipo Keyboard relevante)

  • DevSettingsStatic (En este caso no existía un alias de tipo DevSettings relevante)

  • I18nManagerStatic

  • EasingStatic

  • PanResponderStatic

  • NativeModulesStatic (En este caso no existía un alias de tipo NativeModules relevante)

  • LogBoxStatic

  • PushNotificationIOSStatic

  • SettingsStatic

  • VibrationStatic

Algunos componentes principales ahora son componentes de función en lugar de componentes de clase​

  • View

  • Image

  • TextInput

  • Modal

  • Text

  • TouchableWithoutFeedback

  • Switch

  • ActivityIndicator

  • ProgressBarAndroid

  • InputAccessoryView

  • Button

  • SafeAreaView

Debido a este cambio, acceder a los tipos de referencia (ref) de estas vistas requiere usar el patrón React.ComponentRef<typeof View>, que funciona correctamente tanto para componentes de clase como de función, por ejemplo:

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

Otros cambios disruptivos​

Cambios en los tipos de Animated​

Los nodos de Animated anteriormente eran tipos genéricos basados en su salida de interpolación. Ahora son tipos no genéricos con un método genérico interpolate.

Animated.LegacyRef ya no está disponible.

Tipos unificados para props opcionales​

En los nuevos tipos, cada prop opcional se tipará como type | undefined.

Eliminación de algunos tipos obsoletos​

All types listed in DeprecatedPropertiesAlias.d.ts are inaccessible under the Strict API.

Eliminación de props residuales de componentes​

Se eliminaron algunas propiedades que estaban definidas en las definiciones de tipos pero que no eran utilizadas por el componente o carecían de una definición (por ejemplo: lineBreakMode en Text, scrollWithoutAnimationTo en ScrollView, estilos de transformación definidos fuera del array de transformación).

Los helpers de tipos privados previamente accesibles ahora pueden eliminarse​

Debido a la configuración de las definiciones de tipos anteriores, cada tipo definido era accesible desde el paquete react-native. Esto incluía tipos que no se exportaron explícitamente y tipos de ayuda que solo se suponía que se usaran internamente.

Ejemplos notables de esto son los tipos relacionados con StyleSheet (como RecursiveArray, RegisteredStyle y Falsy) y Animated (como WithAnimatedArray y WithAnimatedObject).