如何在TypeScript中使用可选链接？

Question

我想改变对象填充属性的方式。

目前我有

export interface INewOffer {
    employment?: IEmployment;
    heightWeight?: IHeightWeight;
}

export interface IEmployment{
    trainings?: string;
    activeEmployment?: string;
    wage?: string;
}

创建对象的函数如下所示：

private dataGenerator(newCustomer: INewCustomer): INewOffer {
    const data: INewOffer = {};
    if (NullCheck.isDefinedOrNonNull(newCustomer.age)) {
        data.employment = {
            trainings: newCustomer.trainings,
            activeEmployment: newCustomer.activeEmployment,
            wage: newCustomer.wage,
        };
    } else {
        data.employment = {
            wage: newCustomer.wage,
            };
        }
    data.heightWeight = {
        height: '180',
        weight: '75',
    };
    return data;
}

我试图将我的代码更改为

private dataGenerator(newCustomer: INewCustomer): INewOffer {
    const data: INewOffer = {};
    if (NullCheck.isDefinedOrNonNull(newCustomer.age)) {
            data.employment.trainings = newCustomer.trainings;
            data.employment.activeEmployment = newCustomer.activeEmployment;
            data.employment.wage = newCustomer.wage
    } else {
           data.employment.wage = newCustomer.wage
    }
    data.heightWeight.height = '180';
    data.heightWeight.weight = '75';

    return data;
}

和VS代码IDE没有看到任何问题，例如：当我鼠标悬停在：

• data.它说const data: INewOffer
• employment. => (property) INewOffer.employment?: IEmployment
• wage => (property) IEmployment.wage?: string

但是当我运行测试时我有错误：

E/launcher - Error: TypeError: Cannot set property 'wage' of undefined

我试过设置它：data.employment!.wage = newCustomer.wage

但它不起作用。然后我发现可选链接的打字稿没有支持。

而我的问题是，为什么IDE没有说出错误？或者我可能需要做一些其他事情来使其发挥作用？

Answer 1

你应该确保启用--strictNullChecks，一个compiler option。据推测，你的项目中有一个tsconfig.json文件;你应该在那里指定它。事实上，我建议使用--strict，其中包括--strictNullChecks以及其他有用的东西。这应该有希望开始警告你这样的错误：

   data.employment.wage // error!
// ~~~~~~~~~~~~~~~ <-- Object is possibly undefined.

添加感叹号无济于事;它是一个non-null assertion，这意味着你告诉编译器即使它认为对象可能是未定义的，你确定它不是。这基本上与你遇到的问题相反。如果你这样做：

   data.employment!.wage // no error now

它会抑制--strictNullChecks打开的错误，但是因为你撒谎到编译器而在运行时爆炸。该断言适用于以下情况：

// this ends up setting data.employment to {} but the compiler doesn't realize it
   Object.assign(data, { employment: {} }); 

   data.employment.wage // error!  but we know it *is* defined
// ~~~~~~~~~~~~~~~ <-- Object is possibly undefined.

   data.employment.wage // no error now

---

TypeScript的类型系统仅在设计时（编写程序时）存在，并且完全来自运行的发出的JavaScript的erased。如果要进行运行时检查，则需要编写运行时检查，并让TypeScript的类型检查器验证您是否已执行此操作：

  data.employment = {}; // set the property in a way the compiler recognizes
  data.employment.wage; // no error now

TypeScript确实尝试为提议的JavaScript功能提供实现，并且最终可能在JavaScript中支持optional chaining，但目前的提议仅在Stage 1上，而TypeScript维护者的一般策略只是在达到阶段3时实现语言添加。因此，从TS3.4开始，TypeScript不支持可选链接yet。

好的，希望有所帮助。祝好运！