React-ts开发备忘——在tsx中使用js的模块引入方式

我们初次使用tsx开发react项目时，肯定会对他的模块引入方式觉得很奇怪吧

在tsx里面，我们需要这样引入React：

import * as React from 'react'

而 在js 中我们可以这样引入：

import React,{Component, useState} from 'react'

 

从上面可以看出，其实使用tsx的方式引入不是很方便，因为React使我们每个React组件都必须要引入的,因为jsx语法需要依赖React,而当我们要实现类式组件或者使用hook时，我们需要用到Component和useState等，如果使用tsx的方法，我们需要这样写：

import * as React from "react";

class Demo extends React.Component{
    // ....
}

function Demo1(){
    const [name,setName] = React.useState("kiner");
    // ....
}

这样是比较繁琐的，那么，有没有什么办法可以让我们在tsx中使用js的模块引入方式来引入模块呢 ？

答案是肯定的，我们只需要再tscofing.json的“compilerOptions”配置下面加入如下选项即可

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}