本文將提供使用typescript高級類型（Record，Partial，Required，Pick , Omit）如何在react中使用的示例。

1. Record

typeScript2.1引入一個內(nèi)置對象類型是Record，他允許創(chuàng)建類型化映射，并且非常適合創(chuàng)建復合接口，變量的類型必須為Record, 我們必須將字符串作為key傳遞，并且對應的值傳遞某種類型，最簡單的情況是當有一個字符串作為值：

const SERVICES = Record<string, string> = {
   doorToDoor: 'delivery at  door',
   airDelivery: 'flying in',
   specialDelivery: 'special delivery', 
   inStore: 'in-store pickup'
}

解析代碼：聲明一個SERVICES的常量，類型是Record<key, value>類型，key必須是string， value值的類型是字符串

使用Record的一種常見情況是將業(yè)務實體的接口作為鍵值保存在字典中。

舉例：創(chuàng)建一個購物車的模型。

export interface ProductInCart {
   id: string,
   name: string,
   amount: number;
   label?：string
}
export class CartNodel {
   products: Record<string, ProductInCart> = {}
   error?:Error = undefined
}

解析代碼：定義了一個ProductInCart接口， 規(guī)定了id,name,label是string類型， amount是number類型，聲明了一個cartNodel類里的products變量是Record<string，ProductInCart>, key是string類型，value的值是ProductInCart類型

另外,ts不允許我們?yōu)橐恍┒x好的形狀創(chuàng)建一個空對象然后用屬性填充它，但是Record可以解決這個問題，也可以使用字符串enum作為類型中的鍵。
例如， 我們將使用ErrorsEnum來保存和訪問可能錯誤值（消息）

export enum ErrorsEnum {
    NetWorkError = 'NetworkError',
    ServerError = 'ServerError',
    FormValidationErrod = 'FormValudationError',
    UnknowError = 'UnkownError'
}
export type CartErrors  = Partial<Record<ErrorsEnum, string>>;

export class CartModel {
   products: Record<string,ProductInCart> = {};
   errors?:CartErrors;
}

解析代碼: 創(chuàng)建了一個ErrorsEnum的枚舉類型， export type CartErrors 定義鍵值對結(jié)構(gòu)的對象 Partial<Record<ErrorsEnum,string>>,Partial的類型是Record<ErrorsEnum, string>, Record里面的key是字符串類型的enum, value的類型是字符串類型

在Material-UI庫中使用Record進行類型增強， 我們可以使用css-in-JS表示法添加自定義樣式，并通過withStyles HOC將其注入，可以把樣式定義一個函數(shù)，我們可以將樣式定義為以theme作為參數(shù)， 并返回className具有對應樣式的函數(shù)，為這個函數(shù)定義類型：

import { Theme } from '@material-ui/core';
import { CSSProperties } from '@material-ui/core/styles/withStyles';
export const styles: (theme: Theme) => Record<string, CSSProperties> = (theme) => ({
  card: {
    ...theme.mixins.flexColumn,
    width:'100%', 
    height: 'auto',
  } as CSSProperties,
 button: {
    margin: theme.spacing.unit,
  } as CSSProperties,
})

解析代碼： 基本的Record格式： const abc：Record<string, string> = {} ,聲明一個styles的常量， 類型是Record<string, CSSProperties>,后面是一個箭頭函數(shù)，參數(shù)為theme, 返回一一個對象， 對象里就是Record value的數(shù)據(jù)類型

你可能會注意到， as CSSProperties 為每個樣式對象添加這些內(nèi)容會比較麻煩?；蛘?，我們可以利用Record類型的優(yōu)點為styles函數(shù)定義類型。

import {  createThemeFunction } from '../../../theme';
export const styles: createThemeFunction = (theme) => ({
   card: {
    ...theme.mixins.flexColumn,
    width:'100%', 
    height: 'auto',
  },
   button: {
    margin: theme.spacing.unit,
  } 
});

export type = StyleProps =  'card' | 'button'

現(xiàn)在，我們可以安全的在每個組件中使用他， 并擺脫樣式中CSS屬性的硬編碼類型。

2. Partial and Required

Patial 類型使對象中的所有屬性為可選， 在許多情況下，她可為我們提供幫助， 例如，當使用組件時數(shù)據(jù)需要在掛載時才能渲染。

// 方法一：
export interface Product {
  id：string;
  name:string;
  price: string;
  description: string;
}
export interface ProductInCart {
   id: string;
   amount:number;
   name: string,
   label?:string   
}
type ModelProps =  Partial<{
   product: Product,
cartContent: Record<string, ProductInCart>;
}>
// 方法二：
export interface Product {
  id?：string;
  name?:string;
  price?: string;
  description?: string;
  author?: string;
  authorLink?: string;
}
export interface ProductInCart {
   id?: string;
   amount?:number;
   name?: string,
   label?:string   
}
type ModelProps =  {
   product: Product,
cartContent: Record<string, ProductInCart>;
}

代碼解析： 方法一和方法二都表示可選參數(shù)

或者我們使用Partial定義一些道具作為組件的默認道具：

type Props  = OwnProps & WithStyles<WithStyleProps>;
export class SnackbarPure extends React.Component<Props> {
   public static defaultProps: Partial<Props> = {
      vertical: 'bottom',
      horizontal: 'left',
      autoDuration: 1000,
  }
}

相反，Typescript v2.8中引入的內(nèi)置類型 Required使所描述對象的所有屬性都必需。

3. Pick and Omit

Pick幫助我們使用已定義的接口，但只從對象中提取您需要的鍵。
Omit它不是Typescript lib.d.ts中預定義的，但很容易用Pick和定義Exclude，它排除了我們不想從接口獲取的屬性。

例如：ProductPhotoProps將包含Product除名稱和描述之外的所有屬性。

// 方法一：
export interface Product {
  id：string;
  name:string;
  price: string;
  description: string;
  author: string;
  authorLink: string;
}
export type PropductPhotoProps = Pick<Product, 'id' | 'author' | 'autoLink' | 'price'>;

// 方法二：
export interface Product {
  id：string;
  name:string;
  price: string;
  description: string;
  author: string;
  authorLink: string;
}
type Omit<T, K extends keyof T> = Pick<T, exclude<keyof T, K>>
export type PropductPhotoProps = Omit<Product, 'name' | 'description'>;

當然，有多種方法可以組合類型并定義它們之間的關(guān)系。
如果從一開始就將大東西分解成小塊，可以嘗試用擴展類型，解決排除對象的屬性的問題。

4.Extending type/interface

擴展接口時，結(jié)果接口中將提供源接口/類型中描述的所有屬性。讓我們看看如何將小型接口組合成與我們的任務相對應的接口：

export interface ProductAuthor {
   author: string,
   authorLink: string,
}

export interface ProductBase {
   id: string, 
   price: string,
}

export interface ProductPhotoProps extends ProductAuthor, ProductBase {}

export interface Product extends ProductAuthor, ProductBase {
    description: string,
     name: string,
}

該方法不太方便，因為您必須預先想象對象的形狀。但是，它既快速又簡單，這使其非常適合用于原型設(shè)計或構(gòu)建簡單的UI，例如將數(shù)據(jù)呈現(xiàn)到只讀塊中。