TypeScript类型-Partial、Omit

最新推荐文章于 2025-10-23 12:06:53 发布

原创最新推荐文章于 2025-10-23 12:06:53 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

TypeScript-React 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了TypeScript中Partial和Omit类型的基本概念及其应用场景。Partial类型使对象的所有属性变为可选，而Omit类型则用于从对象类型中移除指定属性。通过具体示例展示了如何使用这两种类型来优化代码结构。

Partial 类型的定义

/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

interface IUser {
  name: string
  age: number
  department: string
}

使用Partial

type optional = Partial<IUser>

// optional的结果如下
type optional = {
    name?: string | undefined;
    age?: number | undefined;
    department?: string | undefined;
}

Omit<K,T>类型让我们可以从另一个对象类型中剔除某些属性，并创建一个新的对象类型：
K：是对象类型名称，T：是剔除K类型中的属性名称

type  UserProps =  {
  name?:string;
  age?:number;
  sex?:string;
}
// 但是我不希望有sex这个属性我就可以这么写
type NewUserProps =  Omit<UserProps,'sex'> 
// 等价于
type  NewUserProps =  {
  name?:string;
  age?:number;
}

运用场景：
忽略类型中的某个属性值的时候，例如一个自定的InputProps类型，要继承input元素的所有属性和方法，但是InputProps中也有和input元素属性一样的类型，此时，我们想用InputProps类型里的属性，就可以选择Omit类型移除input元素里相同的类型；

import React, { ReactElement, InputHTMLAttributes } from 'react'

type InputSize = 'lg' | 'sm'
export interface InputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
    disabled?: boolean;
    size?: InputSize;
}