打字稿提取模板类型中嵌套对象的类型答案

【问题标题】：Typescript extract type of nested object in template type打字稿提取模板类型中嵌套对象的类型
【发布时间】：2022-01-03 10:03:28
【问题描述】：

我有以下类型：

type field_<T> =
    {
        value: T;
        error:
            {
                error: boolean;
                message: string;
            }
        visited: boolean;
        validate: (value: T) => boolean;
    }

还有一个包含所有字段的表单：

interface form_model_
{
    firstName: field_<string>;
    lastName: field_<string>;
}

等等。

我想以类似于以下方式收集所有 value 字段：

type value_type<form_model_interface_> = {
    [key_ in keyof form_model_interface_]: ?*?;
}

什么会取代 ?*? 或者有更好的方法吗？

【问题讨论】：

标签： reactjs typescript forms

【解决方案1】：

有两种选择。

第一个conditional types:

type field_<T> =
    {
        value: T;
        error:
        {
            error: boolean;
            message: string;
        }
        visited: boolean;
        validate: (value: T) => boolean;
    }

interface form_model_ {
    firstName: field_<string>;
    lastName: field_<string>;
}

type value_type<form_model_interface_> = {
    [key_ in keyof form_model_interface_]: form_model_interface_[key_] extends field_<any> ? form_model_interface_[key_]['value'] : never
}

// type Result = {
//     firstName: string;
//     lastName: string;
// }
type Result = value_type<form_model_>

Playground

在value_type 中对form_model_interface_ 泛型具有适当约束的第二个。请记住，在这种情况下，您需要将form_model_ 定义为type 而不是interface，因为type is indexed by default

type field_<T> =
    {
        value: T;
        error:
        {
            error: boolean;
            message: string;
        }
        visited: boolean;
        validate: (value: T) => boolean;
    }

type form_model_ = {
    firstName: field_<string>;
    lastName: field_<string>;
}

type value_type<form_model_interface_ extends Record<string, field_<any>>> = {
    [key_ in keyof form_model_interface_]: form_model_interface_[key_]['value']
}

// type Result = {
//     firstName: string;
//     lastName: string;
// }
type Result = value_type<form_model_>

Playground

请注意，打字稿中有命名约定。所有类型都应该大写和驼峰式。所以field_应该写成Field。

【讨论】：