高级TypeScript类型

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

Record

typeScript2.1引入一个内置对象类型是Record，他允许创建类型化映射，并且非常适合创建复合接口，变量的类型必须为Record, 我们必须将字符串作为key传递，并且对应的值传递某种类型，最简单的情况是当有一个字符串作为值：

   doorToDoor: 'delivery at  door',
   airDelivery: 'flying in',
   specialDelivery: 'special delivery', 
   inStore: 'in-store pickup'
}

解析代码：声明一个SERVICES的常量，类型是Record<key, value>类型，key必须是string， value值的类型是字符串

使用Record的一种常见情况是将业务实体的接口作为键值保存在字典中。

举例：创建一个购物车的模型。

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

解析代码：定义了一个ProductInCart接口， 规定了id,name,label是string类型， amount是number类型，声明了一个cartNodel类里的products变量是Record<string，ProductInCart>, key是string类型，value的值是ProductInCart类型

另外,ts不允许我们为一些定义好的形状创建一个空对象然后用属性填充它，但是Record可以解决这个问题，也可以使用字符串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;
}

解析代码: 创建了一个ErrorsEnum的枚举类型， export type CartErrors 定义键值对结构的对象 Partial<Record<ErrorsEnum,string>>,Partial的类型是Record<ErrorsEnum, string>, Record里面的key是字符串类型的enum, value的类型是字符串类型

在Material-UI库中使用Record进行类型增强， 我们可以使用css-in-JS表示法添加自定义样式，并通过withStyles HOC将其注入，可以把样式定义一个函数，我们可以将样式定义为以theme作为参数， 并返回className具有对应样式的函数，为这个函数定义类型：

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>,后面是一个箭头函数，参数为theme, 返回一一个对象， 对象里就是Record value的数据类型

你可能会注意到， as CSSProperties 为每个样式对象添加这些内容会比较麻烦。或者，我们可以利用Record类型的优点为styles函数定义类型。

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'

现在，我们可以安全的在每个组件中使用他， 并摆脱样式中CSS属性的硬编码类型。

Partial and Required

Patial 类型使对象中的所有属性为可选， 在许多情况下，她可为我们提供帮助， 例如，当使用组件时数据需要在挂载时才能渲染。

// 方法一：
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>;
}

代码解析： 方法一和方法二都表示可选参数

或者我们使用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中引入的内置类型 Required使所描述对象的所有属性都必需。

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'>;

当然，有多种方法可以组合类型并定义它们之间的关系。
如果从一开始就将大东西分解成小块，可以尝试用扩展类型，解决排除对象的属性的问题。

Extending type/interface

扩展接口时，结果接口中将提供源接口/类型中描述的所有属性。让我们看看如何将小型接口组合成与我们的任务相对应的接口：

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,
}

该方法不太方便，因为您必须预先想象对象的形状。但是，它既快速又简单，这使其非常适合用于原型设计或构建简单的UI，例如将数据呈现到只读块中。