typescript “类构造函数[]无法在没有'new'的情况下调用”在Vite项目中示例化自己的类

pn9klfpd 于 2023-10-22 发布在 TypeScript

关注(0)|答案(1)|浏览(198)

在一个使用Vite搭建的小型Vue 3项目中，我遇到了Class constructor XX cannot be invoked without 'new'问题。我的Google搜索表明，问题是一个转译类扩展了一个本机类，但我的代码中没有这样的结构。我对JavaScript/Typescript/transilation/ESXXXX-whatever不够熟练，无法理解它。
这里有一个最小的可行设置来演示这个问题：

npm init vue@latest
1.添加Typescript支持，保留所有其他问题为默认。
cd vue-project; npm-install
1.将App.vue的内容替换为：

<script setup lang="ts">
import { Credentials } from './creds'

function logIn( creds: Credentials ) {
  // presumably log in here
}
</script>

<template>
  <button @click="logIn(new Credentials( 'aaa', 'bbb' ))">CLICK ME</button>
</template>

1.添加一个新文件creds.ts，包含以下内容：

export class Credentials {
  constructor(
    public readonly username: string,
    public readonly password: string
  ) {}
  toString = (): string => `${this.username}:${this.password}`;
}

npm run build; npm run preview
1.打开浏览器到127.0.0.1:4173并打开浏览器的开发工具
1.点击按钮，检查JavaScript控制台：index.b42911a0.js:1 TypeError: Class constructor XX cannot be invoked without 'new'
两件怪事：
1.在开发（npm run dev）中没有看到这样的错误，只有在预览生产构建时才看到。
1.如果将Credentials类移动到App.vue的脚本部分，则生产构建不再抛出错误。
在生产环境中，在事件处理程序中，从不同的文件示例化一个类会导致这个神秘的错误，这是怎么回事？
编辑2：我已经删除了原来的问题，因为它是所有无关紧要的。

typescript

来源：https://stackoverflow.com/questions/74069642/class-constructor-cannot-be-invoked-without-new-instantiating-own-class-i

1条答案

按热度按时间

olhwl3o21#

(10/2023）我最近在Vue 3中使用组合API时遇到了这个问题。我发现，事实上，如果我们在标记中使用对象示例的赋值或类似的东西，这将导致错误。
在开发（调试）中，您将无法理解为什么不会发生这种情况，但如果您在（预览）模式下运行应用程序，则会发生这种故障。
解决方案是你必须调用一个函数，在这个函数中你可以做任何你想做的事情。
在下面的代码中，我做了一个CRUD过滤器，并借此机会在这里向大家公开它。在我调用“clear”方法的“clear”按钮上，一切正常，但是如果我单击直接在事件中分配变量的“clear”按钮，这将在生产中生成错误。

<div class="row container-button">
    <span class="col-md-2">
      <button
        id="btn-filter"
        class="btn btn-primary btn-sm"
        @click="emits('filter', item)"
      >
        Filter
      </button>
      
      <!-- this way works well -->
      <button id="btn-clear" class="btn btn-secondary btn-sm" @click="clear"> Clear </button>
      
      <!-- This form of use presents an error in production! -->
      <button id="btn-clear" class="btn btn-secondary btn-sm" @click="(() => filter = new QueryFilter())"> Clear </button>
    </span>
</div>

<script setup lang="ts">
let filter = ref<QueryFilter>(
  new QueryFilter()
);

const emits = defineEmits<{
  (event: "filter", value: any): QueryFilter;
}>();

function clear(){
  filter.value = new QueryFilter()
}
</script>

赞(0）回复(0）举报 2023-10-22

我来回答

typescript “类构造函数[]无法在没有'new'的情况下调用”在Vite项目中示例化自己的类

1条答案

相关问题

热门标签

最新问答