访问统一的 TypeScript 字段答案

【问题标题】：Access unitiliazied TypeScript field访问统一的 TypeScript 字段
【发布时间】：2018-06-01 02:30:42
【问题描述】：

我有一个异步加载数据的 JavaScript 类，但我想从

interface Header {
    id: number;
    name: string;
}

class RecordWithHeader {
    header: PossiblyUninitialized<Header> = {};

    constructor(private dataService) { }

    loadData() {
        this.dataService.getHeader()
            .then((header: Header) => this.header = header);
    }

    print() {
        // want to print possibly undefined value without checking if initialized
        console.log('The id is', this.header.id);
    }
}

我尝试了几种方法来定义PossiblyUninitialized，但不使用任何方法都无法让访问器工作。

尝试1：地图键

type PossiblyUninitialized<T> = T | { [key in keyof T]: undefined };

类型“{}”不可分配给类型“PossiblyUninitialized”。

类型 '{}' 不能分配给类型 '{ id: undefined;名称：未定义； }'。

类型“{}”中缺少属性“id”。

尝试将空对象分配给属性时会引发错误。这与this keyof question有关。

尝试 2：基本地图

type PossiblyUninitialized<T> = T | { [key: string]: undefined };

“PossiblyUninitialized”类型上不存在属性“id”。

类型 '{ [key: string]: undefined; 上不存在属性 'id' }'。

type PossiblyUninitialized<T> = T | { [key: string]: any };

“PossiblyUninitialized”类型上不存在属性“id”。

类型 '{ [key: string]: any; 上不存在属性 'id' }'。

这是尝试使用没有keyof 限制的更简单的地图。但是 TypeScript 不喜欢属性访问器。注意：这适用于console.log('ID', this.header['id'])，但这不是我想要做的。

【问题讨论】：

标签： typescript

【解决方案1】：

因此，让 TypeScript 仅使用类型注释来处理这个用例似乎是不可能的。但是，您可以使用类型转换来强制 TypeScript 理解空对象。

使用类型

type PossiblyUninitialized<T> = T | { [key in keyof T]: undefined };

或者使用 TypeScript 的 Record 类型定义

type PossiblyUninitialized<T> = T | Record<keyof T, undefined>;

然后可以通过转换为该类型来定义标头属性。

header = <PossiblyUninitialized<Header>> {};

或以与 TSX 兼容的方式

header = {} as PossiblyUninitialized<Header>;

这会保留标题属性的语法突出显示。此外，如果您打开了严格的空检查，TypeScript 会将id 属性识别为number | undefined 类型，并将name 属性识别为string | undefined。要查看此功能，请view it in the TypeScript Playground。

【讨论】：

【解决方案2】：

我猜你需要的是以下内容：

type PossiblyUninitialized<T> = { [key in keyof T]?: T[key] };

【讨论】：