将质子原生的记事本示例从js转换为tsx的问题

Posted 2023-03-13

【中文标题】将质子原生的记事本示例从js转换为tsx的问题

【英文标题】：Problems with converting the notepad example of proton-native from js to tsx

【发布时间】：2021-07-09 07:53:47

【问题描述】：

我尝试将 Notepad 示例从原生质子 repository 转换为 Typescript。我遇到了一些我无法解决的问题。

代码： TSConfig：

"compilerOptions": 
"strict": true,
"target": "es6",
"module": "ES2015"

package.json：

"name": "notepad",
"version": "1.0.0",
"type": "module",
"description": "a notepad app built using proton-native",
"main": "index.tsx",
"scripts": 
"start": "babel-node index.tsx"
,
"dependencies": 
"@types/jest": "^26.0.22",
"@types/node": "^14.14.37",
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"proton-native": "^2.0.0",
"typescript": "^4.2.4"
,
"devDependencies": 
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.4",
"@babel/node": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-0": "^7.0.0"
,
"author": "",
"license": "ISC"

index.tsx

import React,  Component  from 'react';
import fs from 'fs';
import  App, AppRegistry, Window, TextInput, View  from 'proton-native';

class Notepad extends Component 
  state =  text: '' ;

  shouldComponentUpdate(nextProps, nextState) 
    if (typeof nextState.text === 'string') return false;
    // nextState is set from input
    else return true; // nextState is set from file
  

  render() 
    return (
      <App>
        <Window>
          <View style= flex: 1 >
            <TextInput
              onChangeText=text => this.setState( text )
              value=this.state.text
              style= flex: 1 
              multiline
            />
          </View>
        </Window>
      </App>
    );
  


AppRegistry.registerComponent('notepad', <Notepad />);

除了将 index.js 更改为 index.tsx 之外，我没有更改其他文件中的任何内容。相关的堆栈溢出post。我不知道如何将 index.js（现在的 index.tsx 代码）更改为 ES2015 格式。 （如2 建议的那样）

错误：

babel-node index.tsx

internal/process/esm_loader.js:74
internalBinding('errors').triggerUncaughtException(
^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".tsx" for C:\xxx\Notepad\index.tsx
at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15)
at Loader.getFormat (internal/modules/esm/loader.js:102:42)
at Loader.getModuleJob (internal/modules/esm/loader.js:231:31)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Loader.import (internal/modules/esm/loader.js:165:17)
at async Object.loadESM (internal/process/esm_loader.js:68:5) 
code: 'ERR_UNKNOWN_FILE_EXTENSION'

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! notepad@1.0.0 start: babel-node index.tsx
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the notepad@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\xxx\2021-04-14T08_50_04_846Z-debug.log

【参考方案1】：

您可以查看here，了解如何设置您的 tsconfig.json。我知道它适用于 React Native，但它应该仍然有用。