时间戳

首页 > 解决方案 > 如何在 React 应用程序中手动本地测试打字稿功能？

javascript - 如何在 React 应用程序中手动本地测试打字稿功能？

问题描述

对不起一个菜鸟问题，我正在使用 react 和 typescript（通过 create-react-app），如果我有一些完全非 UI 的 javascript 代码（我正在开发的一个模块与一些 REST api 一起工作），类似于这个：

src/lib/rest.tsx


export const getUser = async function (
    username: string,
) {
    let response = await fetch(`http://localhost:3000/api/auth/`, {
        username
    });
    return response;
};

我想知道如何在 REPL 或浏览器的开发工具中本地测试此功能，然后再将其投入实际使用。我想我现在有两个困难：

  1. webpack 现在似乎甚至没有将这个模块打包到代码中，如果我打开 Chrom 的开发工具，我可以看到其他 tsx 文件，但看不到这个，只是因为我没有在任何我想的地方导入这个模块。
  2. 即使它被打包，我也不知道如何import在 REPL 或开发工具控制台中使用这个模块，因为首先我不知道这里的正确语法是什么，会是import src/lib/rest.tsx吗？似乎我无法在 REPL 中导入任何模块，因为导入只能在模块内部进行。

这里的工作流程只是我编写了一些简单的打字稿功能，我想在类似环境的 REPL 中运行它们，这样我可以确保它们在任何地方使用它或开始针对它们编写单元/集成测试之前都在工作。

谢谢！

标签： javascriptreactjstypescriptecmascript-6es6-modules

解决方案

1 是正确的，你的新模块没有被导入，因此没有被 webpack 捆绑。

我认为您不能import在控制台 atm 中使用语法。但是您可以尝试两种方法。

只需将您的代码导入捆绑文件之一，如果您使用的是开发服务器，更改将自动反映到浏览器：

import { getUser } from '../../lib/rest';

getUser().then(console.log);

或将其附加到窗口，以便您可以在控制台中使用它：

import { getUser } from '../../lib/rest';

if (typeof window !== 'undefined') {
  window.getUser = getUser;
}

推荐阅读