打字稿检查输入必填字段的类型字段是否可选

Question

我想检查打字稿类型或接口的字段是否可选（或不可选）。

export type Recommendation = {
    id?: string,
    name: string,
    type?: string,
    tt: string,
    isin?: string,
    issuer: string,
    quantity?: number,
    recDate: string,
    createDate: string,
    buyPrice?: number,
    currentPrice?: number,
    performance?: number,
    comment?: string,
    updateDate?: string,
    updateRec?: string,
    recentRec?: string,
}

例如姓名和发行人不是可选的，大多数其他字段是。

我现在创建了动态输入字段（用于提交表单），我想根据是否需要 Recommendation 类型来设置这些输入的“必需”属性。

        <Table responsive>
            <thead>
                <tr>
                    <th>#</th>
                    <th colSpan={10}>Create new data</th>
                </tr>
            </thead>
        
            <tbody>
                <tr>
                    <td>1</td>
                    {Array.from(Object.keys(sr)).map((colName, index) => (
                        <td key={index}><input required={ checkRequired ? true : false} name={colName} style={{width: "150px"}} type="text" placeholder={JSON.stringify(colName)} onChange={e => setFieldObj(e)} value={inputValue[colName]}></input></td>
                    ))}
                </tr>
            </tbody>
        </Table>
      <button onClick={submitNewRecord}>Submit</button>

如何使用打字稿类型required={ checkRequired ? true : false}？

Answer 1

正如@AlekseyL 在评论中提到的，您无法在运行时访问类型信息。但在某些情况下，您可以在编译时访问数据。

如果您将类型拆分为必填字段的 const 数组，以及 none 个字段可选的类型：

export const RequiredFields = ['name', 'tt', 'issuer', 'recDate', 'createDate'] as const;
type RecommendationFields = {
    id: string,
    name: string,
    type: string,
    tt: string,
    isin: string,
    issuer: string,
    quantity: number,
    recDate: string,
    createDate: string,
    buyPrice: number,
    currentPrice: number,
    performance: number,
    comment: string,
    updateDate: string,
    updateRec: string,
    recentRec: string,
};

您可以使用该信息重建 Recommendation:

type OptionalFields = Exclude<keyof RecommendationFields, typeof RequiredFields[number]>;
type RecommendationOptional = { [key in OptionalFields]?: RecommendationFields[key] };
type RecommendationRequired = { [key in typeof RequiredFields[number]]: RecommendationFields[key] };
export type Recommendation = RecommendationOptional & RecommendationRequired;

然后在运行时，您可以通过检查该数组来测试字段是否可选：

function isFieldRequired(name: string) {
  return RequiredFields.includes(name);
}

打字稿检查输入必填字段的类型字段是否可选

Typescript check if type field is optional or not for input required fields

forms

validation

input

required

typescript