React-native:从 javascript 迁移到 typescript

Posted

技术标签:

【中文标题】React-native:从 javascript 迁移到 typescript【英文标题】:React-native: Migration from javascript to typescript 【发布时间】:2022-01-12 20:38:36 【问题描述】:

我正在尝试评估将项目代码库从 javascript 迁移到 typescript 的成本,我们的主要目标主要是不必现在将所有代码库转换为 typescript,而是逐步进行。

我关注了这个https://reactnative.dev/docs/typescript的文档

我尝试将随机文件转换为打字稿

interface Props 
  iconName: string;
  iconType?: string;
  text: string;
  onPress?(evt: GestureResponderEvent): void;
  style?: any;


const ButtonWithBigIconAndSmallText: FC<Props> = (
  iconName, iconType, text, onPress, style,
): ReactElement => (
  <TouchableOpacity onPress=onPress style= ...styles.button, ...style >
    /* Commented it to reduce the error scope */
    /*<HinfactIcon name=iconName type=iconType size=40 />*/
    <HinfactText style=
      textTransform: 'uppercase',
      fontSize: 9,
      fontWeight: 'bold',
    
    >
      text
    </HinfactText>
  </TouchableOpacity>
);

导致这些错误

error TS2786: 'HinfactText' cannot be used as a JSX component. Its instance type 'HinfactText' is not a valid JSX element.
error TS2607:  JSX element class does not support attributes because it does not have a 'props' property.

如果我取消注释 HinfactIcon,我就会有 4 个错误,与 HinfactText 完全相同,但对于 HinfactIcon - 这就是我开始删除无用日志的原因:)

但是现在,如果我将 HinfactText.jsx 中使用的代码复制到文件 Test.jsx 中,但与我的 ButtonWithBigIconAndSmallText.tsx 位于同一文件夹中,那么一切正常!

为什么?内容一模一样!

interface Props 
  iconName: string;
  iconType?: string;
  text: string;
  onPress?(evt: GestureResponderEvent): void;
  style?: any;


const ButtonWithBigIconAndSmallText: FC<Props> = (
  iconName, iconType, text, onPress, style,
): ReactElement => (
  <TouchableOpacity onPress=onPress style= ...styles.button, ...style >
    <Test style=
      textTransform: 'uppercase',
      fontSize: 9,
      fontWeight: 'bold',
    
    >
      text
    </Test>
  </TouchableOpacity>
);

这是架构

src/
   Online/
         ButtonWithBigIconAnsSmallText.tsx
         Test.jsx
   Components/
         HinfactText.jsx

package.json:

"dependencies": 
    "@types/jest": "^27.0.3",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-native": "^0.66.8",
    "@types/react-test-renderer": "^17.0.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-devtools-core": "^4.14.0",
    "react-dom": "^17.0.2",
    "react-native": "^0.66.0",
    "typescript": "^4.5.2",
    //...
  ,
  "devDependencies": 
    "@babel/core": "^7.14.3",
    "@babel/eslint-parser": "^7.14.3",
    "@testing-library/jest-native": "^4.0.2",
    "@testing-library/react-native": "^9.0.0",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    //...
  ,

tsconfig.json:


  "compilerOptions": 
    "target": "es2017",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["es2017"],                        /* Specify library files to be included in the compilation. */
    "allowSyntheticDefaultImports": true,
    "allowJs": true,                          /* Allow javascript files to be compiled. */
    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "outDir": "out",                           /* Redirect output structure to the directory. */
    "skipLibCheck": true,                     /* Do not check libraries */
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
  ,
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "./node_modules",
    "node_modules/*",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]



【问题讨论】:

【参考方案1】:

更新这个,我终于找到了为什么我不能在没有 require 的情况下导入我的组件,这是由于"moduleResolution": "node"。删除该行解决了问题

【讨论】:

以上是关于React-native:从 javascript 迁移到 typescript的主要内容,如果未能解决你的问题,请参考以下文章

javascript 提供用于从React-Native WebView发送和接收消息的示例实现(使用postMessage / onMessage WebVie)

在android中安排后台任务并从任务中调用react-native javascript方法

React-Native系列Android——Native与Javascript通信原理

javascript 基本的React-Native组件

react-native 应用程序是不是应该针对 JavaScript 的特定版本或子集?

Firebase:通过设备 ID 向 JavaScript 客户端(react-native)发送消息