在 ionic-react 中一直使用 .jsx 而不是 .tsx 有什么缺点吗？

Question

如果我们在 ionic-react 中编写 jsx 语法会发生什么？是 state={} 对象和 props 在 .tsx 文件中有效。我通过使用 .jsx 文件而不是 .tsx 创建前端，它会不会在部署中造成麻烦，如果是这样的话。我如何在不依赖打字稿的情况下克服这个问题？

import React, { Component } from "react";
import { IonGrid, IonRow, IonCol, IonButton } from "@ionic/react";
import LocationComp from "../comon/locationComp";

class Tab1_react extends Component {
  state = {
    province: [{ id: 1, name: "Western province" }],

    district: [
      { id: 1, name: "Kaluthara" },
      { id: 2, name: "Colombo" },
      { id: 3, name: "Gampaha" },
    ],
  };

  render() {
    return (
      <IonGrid>
        {/* 1 row */}
        <IonRow>
          <IonCol>
            <LocationComp
              data={this.state.province}
              type="Province"
              name="name"
              id="id"
            />
          </IonCol>
        </IonRow>

        {/* 2 row */}
        <IonRow>
          <IonCol>
            <LocationComp
              data={this.state.district}
              type="District"
              name="name"
              id="id"
            />
          </IonCol>
        </IonRow>

        {/* 3 row */}
        <IonRow>
          <IonCol>
            <LocationComp
              data={[{ id: 1, name: "Not Yet" }]}
              type="Town"
              name="name"
              id="id"
            />
          </IonCol>
        </IonRow>

        {/* 4 row */}
        <IonRow>
          <IonCol>
            <IonButton fill="outline" expand="block" color="primary">
              Search
            </IonButton>
          </IonCol>
        </IonRow>

      </IonGrid>
    );
  }
}

export default Tab1_react;

我做了一个 react 组件调用 locationComp

import React, { Component } from "react";
import {
  IonButton,
  IonSelect,
  IonSelectOption,
  IonItem,
  IonLabel,
} from "@ionic/react";

class LocationComp extends Component {
  state = {};


  render() {

    const {data,name,id,type} = this.props;

    return (
      <IonItem>
        <IonLabel>{type}</IonLabel>
        <IonSelect
          //value={gender}
          placeholder="Select One"
          //   onIonChange={(e) => setGender(e.detail.value)}
        >
            {data.map(e=>(
                <IonSelectOption key={e["id"]} value="female">{e["name"]}</IonSelectOption>
            ))}

        </IonSelect>
      </IonItem>
    );
  }
}

export default LocationComp;

Answer 1

由于 ionic 默认使用 TypeScript，如果您希望坚持使用纯 JavaScript，有几个选项可供您选择：

1) 无需将所有.tsx/.tx 文件分别重命名为.jsx/.js -

在您的tsconfig.json 上，您只需将strict 选项设置为false，这实际上将禁用类型检查。

"strict": false 

2) 明确告诉 TypeScript 应该允许 JavaScript 文件 -

一个看似简单的选项是在您的tsconfig.json 上将allowJs 设置为true

"allowJs": true

根据您的项目，您可以选择使用上述选项中的一个或两个。归根结底，TypeScript 是 JavaScript 的超集，只要您禁用伴随使用 TypeScript 的附加功能，常规 JavaScript 就应该在 TypeScript 文件上运行。