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通信原理