如何将 ts-nameof 与 create-react-app 或 craco 一起使用？

Question

我想在我的 React 应用程序中使用ts-nameofcreate-react-app使用. 我怎样才能做到这一点而不弹出？提示：我也使用craco，所以涉及 craco 的解决方案对我来说也很好。

谢谢！

Answer 1

可以使用名为ts-nameof.macro的babel-macro来实现，而无需弹出。

我已经对使用以下命令生成的新应用程序进行了测试：

npx create-react-app temp --template typescript

# install macro dependecies
yarn add -D ts-nameof.macro
# or
# npm i --save-dev ts-nameof.macro

注意：如果你的react-scripts版本低于2.0，你还需要安装babel-plugin-macros为开发依赖。

更新App.tsx

import React from 'react';
import nameof from "ts-nameof.macro"; // import nameof
import logo from './logo.svg';

import './App.css';

function App() {
  console.log(nameof(window.alert)) // "alert"
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;