javascript - react-native - *.js importando arquivo *.ts

Como permitir que arquivos *.js importem arquivos *.ts no react-native mas sem renomear nenhum dos dois arquivos?

queremos importar o arquivo src/lib/setGlobalStyle.ts abaixo do src/App.js

//MIT LICENSE from: https://github.com/Ajackster/react-native-global-props

import React from 'react'
import { StyleProp, ViewStyle } from 'react-native'


export function setGlobalStyle(obj, customProps) {
 const oldRender = obj.prototype.render;
  const initialDefaultProps = obj.prototype.constructor.defaultProps;
  obj.prototype.constructor.defaultProps = {
    ...initialDefaultProps,
    ...customProps,
  }
  obj.prototype.render = function render() {
    let oldProps = this.props;
    this.props = { ...this.props, style: [customProps.style, this.props.style] };
    try {
      return oldRender.apply(this, arguments);
    } finally {
      this.props = oldProps;
    }
  };
}

mas abaixo do import que está dentro de App.js só funciona quando renomeamos o arquivo setGlobalStyle.ts para setGlobalStyle.js:

import * as Utils from './lib/setGlobalStyle'

e claro que o setGlobalStyle.ts atualmente não contém nenhum tipo de TypeScript, isso porque tivemos que remover todos e renomeá-lo para .js para que possamos continuar no projeto até que isso tenha uma resposta.

nota: a razão pela qual precisamos de TypeScript é permitir o autocomplete de parâmetros no IDE (ou seja, o argumento customProps).

Resposta #1

O suporte a JSDoc no Javascript permite que você importe definições de tipos diretamente. Eu sei que isso não é o mesmo que importar o módulo real (mas eu acho que isso é uma loucura se as definições de tipos existirem):

/**
 * @param {import("./mymodule").customProps } customProps
 */
export function setGlobalStyle(obj, customProps) {
    customProps. // has full auto-completion