Question

目前，我正在尝试通过创建简单的网页来通过离子反应学习打字稿。我遇到了这个有趣的导航栏，但是它是用jsx编写的。因此，我想在这个网站的帮助下用tsx编写。

jsx中的代码

import { enquireScreen } from 'enquire-js';

let isMobile;

enquireScreen((b) => {
  isMobile = b;
});

class Home extends React.PureComponent {
  state = {
    isMobile,
  }
  componentDidMount() {
    enquireScreen((b) => {
      this.setState({
        isMobile: !!b,
      });
    });
  }

如何用打字稿写这个？我曾尝试更改变量声明之类的内容，但无法使其正常工作。谢谢。

Answer 1

您真正要做的就是在变量中添加类型。

let isMobile: boolean;

enquireScreen((b: boolean) => {
  isMobile = b;
});

export class Home extends React.PureComponent {
  state = {
    isMobile,
  }
  componentDidMount() {
    enquireScreen((b: boolean) => {
      this.setState({
        isMobile: !!b,
      });
    });
  }
}

由于enquire-js不附带类型声明，并且都没有发布到@types，因此您需要创建一个本地声明文件，然后自己编写声明，或者使用以下方法声明模块：排除所有其他声明，它将消除can't find module错误。

将为jsx编写的“ enquireScreen” js转换为打字稿？

1 个答案: