将质子本机记事本从js转换为tsx的问题

Question

我试图将质子本机存储库中的记事本示例转换为类型记录。我遇到了一些我无法解决的问题。

代码： 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之外，我没有更改其他文件中的任何内容。相关的堆栈溢出帖子。我不知道如何将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

Answer 1

您可以检查这里如何设置tsconfig.json。我知道这是为反应本地人，但它仍然应该是有帮助的。