使用 typescript 的 create-react-app 将函数编译成非常奇怪的东西

Question

我在使用 typescript 的 create-react-app 应用程序 (react-scripts@2.1.1) 中遇到了一些非常非常奇怪的错误（此时并不知道它是否相关 - 错误甚至持续存在如果我将受影响的文件重写为普通 js):

我有一个非常基本的普通实用函数来为 redux 编写操作类型：

// ...../utils.ts
export type Type = string;
export type Types = {
  [key: string]: Type;
};

export const typeWithPrefix = (prefix: string, type: string): string => {
  return `${prefix}/${type}`;
};

export const typesWithPrefix = (prefix: string, types: Array<string>): Types => {
  return types.reduce((result: Types, type) => {
    result[type] = typeWithPrefix(prefix, type);

    return result;
  }, {});
};

export const asyncTypes = (type: string): Array<string> => {
  return [
    type,
    `${type}_START`,
    `${type}_SUCCESS`,
    `${type}_FAIL`,
    `${type}_FINALLY`
   ];
};

用法：

// ....auth/types.ts
import { typesWithPrefix, asyncTypes } from '../../utils';

export default typesWithPrefix('auth', [
    ...asyncTypes('SIGN_IN'), 
    ...asyncTypes('SIGN_OUT')
]);

// nothing fancy, plain object:
// => {SIGN_IN: 'auth/SIGN_IN', SIGN_IN_START: 'auth/SIGN_IN_START'....}

在开发中，它的工作原理与您预期的差不多——导入了一些实用程序，导出了类型常量的普通对象；

但是，一旦我使用 react-scripts build 构建应用程序，我就会在浏览器控制台中看到奇怪的东西：

Uncaught TypeError: Object(...) is not a function

检查编译和缩小的源代码表明 asyncTypes 实际上是一个对象 - see screenshot。就我在构建时的理解而言，其中一个编译器或 minifies 决定将函数调用折叠到常量，但是如何以及为什么 - 超出我的范围，特别是没有从反应脚本中弹出...

因此，如果你们中的任何人有任何想法到底发生了什么以及如何避免它 - 我会非常非常高兴听到，因为坦率地说我没有想法..

Answer 1

好吧，既然没有人有任何线索，我会回答关闭这个问题，因为我确实解决了构建问题，但我不确定如何以及为什么:

上面的代码

// ....auth/types.ts
import { typesWithPrefix, asyncTypes } from '../../utils';

typesWithPrefix(// ...

在开发中有效，但在生产中不；

但是代码

// ....auth/types.ts
import * as utils from '../../utils';

utils.typesWithPrefix(// ...

在开发和生产中都有效，尽管事实上这只是 index.ts 文件中命名导出和再导出的纯函数。

我很想深入挖掘并揭开这个谜团，但这需要弹出，我真的，真的不会不这样做，直到我能避免它...

使用 typescript 的 create-react-app 将函数编译成非常奇怪的东西

create-react-app with typescript compiles functions to something very strange

javascript

typescript

reactjs

create-react-app