yaoningvital / blog

my blog
31 stars 4 forks source link

error TS1056: Accessors are only available when targeting ECMAScript 5 and higher. #173

Open yaoningvital opened 4 years ago

yaoningvital commented 4 years ago

一、问题场景

对下面这段ts代码进行编译时报错:

// b.js
const fullNameMaxLength = 10;

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (newName && newName.length > fullNameMaxLength) {
            throw new Error("fullName has a max length of " + fullNameMaxLength);
        }

        this._fullName = newName;
    }
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    console.log(employee.fullName);
}

编译时报错如下:

$ tsc b.ts
b.ts:6:9 - error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.

6     get fullName(): string {
          ~~~~~~~~

b.ts:10:9 - error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.

10     set fullName(newName: string) {
           ~~~~~~~~

Found 2 errors.

二、问题分析

这个错误的代码是1056,提示的是:访问器仅在编译为ES5或者更高版本的JavaScript时可用。查看错误信息列表可以知道:

1056 错误 Accessors are only available when targeting ECMAScript 5 and higher. 访问器仅在面向 ECMAScript 5 和更高版本时可用。

因为get/set访问器是ES5才出现的语法,而我们默认是把.ts文件编译为ES3版本的JavaScript,所以就会报错。

三、解决方法

以下方法可选其一。

1、命令行中编译时加上 -t es5 的参数

执行tsc命令,可以查看所有的可选参数: image

-t表示将.ts文件编译为什么版本的 js 代码。默认是编译为ES3的js代码。通过设置 为ES5及以上版本可以解决这个问题。

tsc b.js -t es5

2、修改配置文件

这个方法我还没有实践过。

创建 tsconfig.json,

{
 "compilerOptions":{"module":"commonjs",
    "noImplicitAny":true,
    "removeComments":true,
    "preserveConstEnums":true,
    "sourceMap":true,
    "target":"es2015"  // <- 这里指定要编译为的js版本
 },
 "include":[
     "src/*"   //指定需要编译的ts文件所在目录
 ],
 "exclude":[]   //排除不需要ts编辑的文件或目录
}