标签: ecmascript-2020

我有一个用 typescript 编写的 Express 服务器，并"module": "es2020"在其 tsconfig.xml 中。

我还es2020为我的 graphql API 开发了另一个模块，仍然是 typescript，这个模块使用 mongoose 和这样的命名导入：

import { Types } from 'mongoose'

当我用 编译我的 graphql 模块时，一切正常tsc。但是运行的快递服务器

nodemon --watch './**/*.ts' --exec 'node --experimental-specifier-resolution=node --loader ts-node/esm' src/index.ts

无法处理名为 import 的猫鼬。

import { Types } from 'mongoose';
         ^^^^^
SyntaxError: Named export 'Types' not found. The requested module 'mongoose' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via …

我已经使用 @vue/cli-service 4.2 创建了 vue 和电子应用程序，因为我面临着可选链接的问题。

我不能用？用于验证条件，如 (@babel/plugin-proposal-optional-chaining)

例如。a?.b?.c 这意味着它检查天气 a 是否存在然后检查 b 否则返回 false 与 angular 中的模板表达式相同。

任何人都知道如何在 vuejs 中配置可选链。

刚刚从 9.0 更新到 Angular 10

在我的代码中每次使用 Optional Chaining ( https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining ) 现在都会导致以下错误的实例

ERROR in ./src/app/app.component.ts 39:18
Module parse failed: Unexpected token (39:18)
File was processed with these loaders:
 * ./node_modules/@ngtools/webpack/src/index.js
You may need an additional loader to handle the result of these loaders.
|         this.title = 'my-app';
|         const x = this.GetObject();
>         let y = x?.myvar;
|     }

我确认此错误仅在按照我的 tsconfig.base.json 文件中的以下内容定位 es2020 时发生，但在定位 es2019 时没问题

"target": "es2020",  //If set to es2019 then all OK
"module": "es2020",
"lib": [
   "es2018", …

我想在我的react应用程序中使用es2020的新功能。尝试安装npm install --save-dev babel-preset-es2020并添加.babelrc文件

{
  "presets": ["es2020"]
}

然而它仍然不起作用。如何使用react应用程序设置es2020的新功能？

ES2020 introduced the nullish coalescing operator (??) which returns the right operand if the left operand is null or undefined. This functionality is similar to the logical OR operator (||). For example, the below expressions return the same results.

const a = undefined
const b = "B"

const orOperator = a || b
const nullishOperator = a ?? b
  
console.log({ orOperator, nullishOperator })

result:

{
    orOperator:"B",
    nullishOperator:"B"
}

So how is the nullish operator different …

来自MDN：

空合并运算符 ( ??) 是一个逻辑运算符，当其左侧操作数为nullor时，它返回其右侧操作数undefined，否则返回其左侧操作数。

但是，如果未声明变量，则以下语句似乎不起作用：

console.log(foobar ?? 555);
// Uncaught ReferenceError: foobar is not defined

如果我显式声明该变量，它就会起作用：

let foobar;
console.log(foobar ?? 555);
// 555

唯一的选择似乎是：

console.log(typeof foobar !== 'undefined' ? foobar : 555)
// 555

是否有更干净的方法来检查某些内容是否未声明并返回后备值？

我知道有人反对为什么代码会检查未声明的变量。例如，以下函数接受一个参数而不为其分配默认值，这??看起来很有用：

const baz = (foobar) => (`${foobar ?? 555}baz`) // same as: const baz = (foobar = 555) => (`${foobar}baz`);
baz()
// 555baz

这个场景是这个操作符的预期用途吗？如果是，那么还可以通过在签名中为参数分配默认值来提供服务，那么空合并运算符本身在有用性方面有何不同？

注意：上述语句在 Node.js 14 和 Chrome 88 中运行。

我有一个 Vue 2.6 项目，我想在我的项目中使用 es2020 特性，如可选链，但我无法让它在我的项目中工作。我收到以下错误。

> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                           12:59:10

 error  in ./src/components/list/columns/lastUpdate.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (15:20)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       if (!this.data.ObjInst || !this.data.ObjInst.Last_Update) return '';
| 
>       if (this.data?.ObjInst) {
|         console.log("Hello");
|       }

 @ ./src/components/list/columns/lastUpdate.vue?vue&type=script&lang=js& 1:0-349 …

ES2020 包含一个新String.prototype.matchAll方法，它返回一个迭代器。我确定我错过了一些愚蠢/明显的东西，但我不明白为什么它不只是返回一个数组。

有人可以解释一下那里的逻辑吗？

编辑：只是为了澄清评论中的一些内容，我假设迭代器并没有简单地替换数组，因为所有 JS API 的新方式都会返回多个值。如果我错过了那个备忘录，并且所有新的 JS 函数都返回迭代器，那么指向所述备忘录的链接将 100% 成为有效答案。

但同样，我怀疑没有进行这样的全面更改，并且 Javascript 的制造商为这个特定的方法做出了一个特定的选择，让它返回一个迭代器......而这个选择的逻辑就是我'我试图理解。

这是我的 tsconfig.json 文件：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

当我将 lib 和目标版本更改为 es2020 时，它给了我以下错误：

tsconfig.json(13,15)：错误 TS6046：“--target”选项的参数必须是：“es3”、“es5”、“es6”、“es2015”、“es2016”、“es2017”、“es2018” ，'esnext'。