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
问题原因及解决方法
核心问题
- 实例化代码未被编译:当前编译后的JS文件里完全没有
const user1 = new User();等三行实例化代码,导致User类从未被实例化,自然不会打印User was created!。这大概率是编译时未正确包含原TS文件的全部代码,或是tsconfig.json配置有误(比如exclude规则排除了部分代码,或include未覆盖目标文件)。 - 类显示形式差异:终端显示
[class User]而非[Function: User]是正常现象——TypeScript编译目标设为ES6+时,类会被编译成原生class语法,打印时显示[class User];若目标为ES5,类会被转译为构造函数,打印时显示[Function: User],这只是语法形式差异,不影响功能。
解决步骤
- 确保编译时包含完整代码:
- 若使用
tsconfig.json,检查include字段是否包含decorator.ts,比如:{ "include": ["decorator.ts"], "compilerOptions": { "outDir": "./dist" } } - 若直接用命令行编译,需明确指定输入文件:
tsc decorator.ts --outDir dist
- 若使用
- 验证编译结果:重新编译后打开
dist/decolator.js,确认文件末尾存在实例化代码:const user1 = new User(); const user2 = new User(); const user3 = new User(); - 重新执行:运行
node dist/decolator.js,即可看到预期的全部输出。
内容的提问来源于stack exchange,提问作者Finddd out
相关产品推荐
相关产品推荐

