React-native：从 javascript 迁移到 typescript

Question

我正在尝试评估将项目代码库从 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"
  ]
}

Answer 1

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