如何在create-react-app或craco中使用ts-nameof？

Question

我想在使用create-react-app创建的React应用程序中使用ts-nameof。如何在不强制执行的情况下实现这一点？

提示：我还使用craco，因此涉及craco的解决方案对我也是可接受的。

谢谢！

- stefan.at.wpf

Answer 1

使用babel-macro中的ts-nameof.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;

- Alexandr Tovmach

---

感谢这个出色的回复，赏金已发放！顺便提一下，链接的 babel-macro 文档中指出，create-react-app 已经自带了 babel-macro，我可以确认这一点，我并没有安装它 :-) - stefan.at.kotlin

我将它添加到答案中，因为不确定你的react-scripts版本。是的，如果您的版本高于2.0，则不需要它。 - Alexandr Tovmach

更新的答案附带注释。谢谢。 - Alexandr Tovmach