ESLint 报错：'readonly' is not defined（只读属性未定义）

ESLint 报错：'readonly' is not defined（只读属性未定义）

在使用ESLint检测代码时，有时会出现这样一个报错：'readonly' is not defined，这是因为我们给一个变量或对象属性添加了只读修饰符，但在代码中未定义该修饰符。本篇文章将详细讲解这个报错的意义以及如何避免或解决它。

什么是只读修饰符？

只读修饰符是JavaScript中一个比较新的语法特性，可以用于声明一个属性或变量只可读，不可修改。只读修饰符使用关键字readonly定义。

-- -------------------- ---- -------
----- ------ -
  -------- ----- -------
  ----------------- ------- -
    --------- - -----
  -
-

--- ------ - --- -------------
----------- - ----- -- ----------- ------ -- ------ ------- -- -- - --------- ---------

在这个例子中，我们给属性name添加了只读修饰符，这意味着无法在类外修改该属性值。

为什么会报错'onlyread' is not defined？

只读修饰符是ES6之后才加入JavaScript中的一个新特性，某些浏览器版本可能不支持这个特性，所以在使用只读修饰符时，需在代码中导入对应的类型声明文件，否则会报错'onlyread' is not defined。

例如，在TypeScript中，可以通过以下方式导入类型声明文件：

import { readonly } from 'core-decorators';

在JavaScript中，可以通过以下方式导入类型声明文件：

import { readonly } from 'core-decorators/es/readonly';

如何解决'util' is not defined？

如果在代码中用到了只读修饰符，但未导入对应的类型声明文件，会在执行ESLint时报错，提示'util' is not defined。

首先，需要安装core-decorators：

npm install core-decorators --save-dev

然后，在代码中导入相关的类型声明文件：

// TypeScript
import { readonly } from 'core-decorators';

// JavaScript
import { readonly } from 'core-decorators/es/readonly';

以上两种方式可根据实际情况选择。

如何避免'util' is not defined？

除了安装类型声明文件之外，我们还可以在.eslintrc.js文件中添加以下配置：

{
  "globals": {
    "readonly": "readonly"
  }
}

这样，在代码中使用只读修饰符时，ESLint就会默认识别它，不会出现报错'onlyread' is not defined。

总结

只读修饰符是JavaScript中一个新特性，可以用于声明一个属性或变量只可读，不可修改。在使用只读修饰符时，需要导入对应的类型声明文件，否则会报错'onlyread' is not defined。如果不想导入类型声明文件，可以在.eslintrc.js文件中添加globals配置，让ESLint默认识别只读修饰符。

希望本文能帮助大家解决ESLint报错'onlyread' is not defined的问题，避免出现类似的错误。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ccbfc05ad90b6d042b70c4