标签: optional-chaining

我有一个深度嵌套的数据结构，我希望能够引用其中的内部类型，但该类型没有自己的名称/定义。例如：

MyQuery['system']['errors']['list'][number]

MyQuery我使用 graphql-codegen 从 graphql 查询自动生成类型。我想要 single 的类型error，但有两个问题：

1. 中间的所有值都可以为空
2. 我的自动生成类型中的错误没有唯一的名称

我尝试了以下方法：

1. 有效，但确实很难阅读：

type Error = NonNullable<NonNullable<NonNullable<MyQuery>['system']>['errors']>['list'][number]

2. 不起作用（?.['field']也不起作用）

type Error = MyQuery?['system']?['errors']?['list']?[number]

3. 有效但会创建不必要的变量：

const error = queryResult?.system?.errors?.list?.[0]
type Error: typeof error

4. 有点工作，但错误内的字段也变得不为空，这是我不想要的

import { DeepNonNullable } from 'utility-types'

type Error = DeepNonNullable<MyQuery>['system']['errors']['list'][number]

基本上我要问的是是否有一种更简单的方法可以在打字稿中进行“类型的可选链接”。我的 API 很容易出现空值，如果我能比使用多个 API 更容易地做到这一点，那将会非常有用NonNullable<T>

项目设置：

• Vuejs 3
  • 网页包 4
  • 巴别塔
  • TS

我们使用创建了项目vue-cli并将依赖项添加到库中。

然后我们导入了一个使用可选链的项目（ VueCurrencyInputv2.0.0 ）。但是我们在执行脚本时出现以下错误serve：

error  in ./node_modules/vue-currency-input/dist/index.esm.js

Module parse failed: Unexpected token (265:36)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     getMinValue() {
|         let min = this.toFloat(-Number.MAX_SAFE_INTEGER);
>         if (this.options.valueRange?.min !== undefined) {
|             min = Math.max(this.options.valueRange?.min, this.toFloat(-Number.MAX_SAFE_INTEGER));
|         }

我读到 Webpack 4 默认不支持可选链。因此，我们添加了 Babel 插件用于可选链接。这是我们的babel.config.js文件：

module.exports = {
  presets: …

当反序列化深层嵌套结构（例如，从 JSON）时，必须遍历多种Option类型的情况并不少见。

例如：

let foo = Foo {
    x: Some(Bar {
        y: Some(Baz {
            z: Some(42),
        })
    })
};

是否有一种惯用的方式来链接 Option 来访问深度嵌套的值？

到目前为止，我有以下内容，但都不像foo.x?.y?.z支持可选链的其他语言那样简洁：

let z = foo.x.as_ref().and_then(|x| x.y.as_ref()).and_then(|y| y.z);
let z = foo.x.as_ref().and_then(|x| x.y.as_ref()?.z);
let z = (|| foo.x.as_ref()?.y.as_ref()?.z)();

看起来这个try_block功能可能很合适，但目前还不稳定。

let z = try { foo.x.as_ref()?.y.as_ref()?.z };

看起来 Expo Webpack 没有optional chaining。

当我尝试将UI Kitten安装到 Expo Web 应用程序时，我发现了这一点。

这是我将 UI Kitten 添加到新创建的 Expo 应用程序后的编译错误

node_modules/@ui-kitten/components/ui/input/input.component.js 104:38
Module parse failed: Unexpected token (104:38)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         this.webEventResponder = devsupport_1.WebEventResponder.create(this);
|         this.focus = () => {
>             this.textInputRef.current?.focus();
|         };
|         this.blur = () => {

Deps 版本（我在这里写的那一刻的最新版本。）

• expo@37.0.6
• @ui-kitten/components@5.0.0-alpha.1

有什么技巧可以解决这个问题？

可选链接在 Node 14.17 上的 Vue.js (v2) 项目中不起作用。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

我收到以下错误：

 ERROR  Failed to compile with 1 error                                                                                                                                                                                                                                                                              11:04:50
 error  in ./src/components/Thing.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (497:39)
File was processed with these loaders:
 * ./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.  
|             }
|         };
>         const …

我尝试在 javascript 中使用可选链接，但我的 eslint 规则导致错误。

错误：可选链的使用不安全。如果它与“未定义”短路，则评估将抛出 TypeError no-unsafe-optical-chaining

const { homeAddress, officeAddress} = Employee?.addresses;

错误：可选链上的算术运算不安全。它可能会导致 NaN no-unsafe-Optional-chaining

const AddressesCount = homeAddress?.length + officeAddress?.length 

我该如何解决这个问题？我不想违反规则

WebStorm 认为它是一个三元运算符，接下来需要表达式和冒号。也许它认为这是一个 TS 代码，而这是 .js 文件中的 JS 代码，我不确定。

如何关闭此检查？

刚刚从 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", …

在 vue/vuetify 项目中，尝试让可选链（https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining）工作时，总是遇到错误：

./src/App.vue?vue&type=script&lang=ts& (./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&) 155:24
Module parse failed: Unexpected token (155:24)
File was processed with these loaders:
 * ./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.
|         }
| 
>         const baz = obj?.foo?.bar?.baz // 42
| 
|         const safe = obj?.qux?.baz // undefined

我已经@babel/plugin-proposal-optional-chaining使用yarn add @babel/plugin-proposal-optional-chaining --dev命令添加了

在我的 App.vue我有这个代码，在created()：

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  }, …

所以，我正在阅读 JavaScript 中的可选链，一个问题突然出现在我的脑海中。

考虑下面的代码：

let person = null
let street = person?.street // returns undefined

我的问题是，如果变量person是null从变量开始的，那么为什么要进行可选链接结果将变量设置为undefined而不是null？

如果这个人是undefined，那么我想，对我来说，将其设置为undefined是合理的，因为变量当然是undefined，如下所示：

let person
let street = person?.street // returns undefined 

PS：如果这是一个愚蠢的问题，我很抱歉，如果有人同意我会删除它。:)

PPS：如果这个问题重复，请删除链接，我会尝试一下。非常感谢。