You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

TypeScript装饰器代码执行异常:实例化无预期输出求助

问题:TypeScript类装饰器编译后实例化无预期输出

我在decorator.ts(原拼写为decolator.ts)中创建了3个User类实例,执行编译后的decolator.js文件时,终端未出现预期输出。

当前终端输出:

Logging...
[class User]

预期输出:

Logging...
[Function: User]
User was created!
User was created!
User was created!

附上相关代码及执行命令:

TypeScript源码(decorator.ts)

function Logging(constructor: Function) {
  console.log('Logging...');
  console.log(constructor);
}
@Logging
class User {
  name = 'Quill';
  constructor() {
    console.log('User was created!');
  }
}

const user1 = new User();
const user2 = new User();
const user3 = new User();

编译后的JavaScript代码(decolator.js)

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
function Logging(constructor) {
    console.log('Logging...');
    console.log(constructor);
}
let User = class User {
    constructor() {
        this.name = 'Quill';
        console.log('User was created!');
    }
};
User = __decorate([
    Logging
], User);

执行命令:node dist/decolator.js


问题原因及解决方法

核心问题

  1. 实例化代码未被编译:当前编译后的JS文件里完全没有const user1 = new User();等三行实例化代码,导致User类从未被实例化,自然不会打印User was created!。这大概率是编译时未正确包含原TS文件的全部代码,或是tsconfig.json配置有误(比如exclude规则排除了部分代码,或include未覆盖目标文件)。
  2. 类显示形式差异:终端显示[class User]而非[Function: User]是正常现象——TypeScript编译目标设为ES6+时,类会被编译成原生class语法,打印时显示[class User];若目标为ES5,类会被转译为构造函数,打印时显示[Function: User],这只是语法形式差异,不影响功能。

解决步骤

  1. 确保编译时包含完整代码:
    • 若使用tsconfig.json,检查include字段是否包含decorator.ts,比如:
      {
        "include": ["decorator.ts"],
        "compilerOptions": {
          "outDir": "./dist"
        }
      }
      
    • 若直接用命令行编译,需明确指定输入文件:
      tsc decorator.ts --outDir dist
      
  2. 验证编译结果:重新编译后打开dist/decolator.js,确认文件末尾存在实例化代码:
    const user1 = new User();
    const user2 = new User();
    const user3 = new User();
    
  3. 重新执行:运行node dist/decolator.js,即可看到预期的全部输出。

内容的提问来源于stack exchange,提问作者Finddd out

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.07 07:14:55