如何为React组件中的Immutable.js对象编写TypeScript接口？

嘿，这个问题我熟！当你把可变的User对象换成Immutable结构时，确实不能直接用Map<string, any>丢了类型检查——咱们可以通过两种方式给Immutable对象定义强类型的TypeScript接口，既保留类型安全，又能享受Immutable带来的不可变性和渲染优化~

Record是Immutable.js里专门用来定义固定键、带默认值的不可变结构的工具，完全贴合你原来的User接口的结构，还能提供最严格的类型检查。

首先先明确你的基础类型（包括Item）：

interface Item {
  id: number;
  name: string;
  // 这里可以补充Item的其他属性
}

interface User {
  id: number;
  name: string;
  bag: Item[];
}

接下来定义对应的Immutable Record：

import { Record, List } from 'immutable';

// 先定义Record的形状，和User接口一一对应，注意把数组换成Immutable.List
type UserRecordShape = {
  id: number;
  name: string;
  bag: List<Item>;
};

// 创建Record类，同时设置每个属性的默认值
const UserRecord = Record<UserRecordShape>({
  id: 0,
  name: '',
  bag: List<Item>()
});

// 定义类型别名，方便在组件里使用
type ImmutableUser = InstanceType<typeof UserRecord>;

然后你的React组件props就可以用这个强类型了：

interface UserComponentProps {
  user: ImmutableUser;
}

class UserComponent extends React.Component<UserComponentProps, {}> {
  render() {
    // 这里访问user.id、user.name、user.bag都会有完整的类型提示和检查
    return (
      <div>
        <p>ID: {this.props.user.id}</p>
        <p>Name: {this.props.user.name}</p>
      </div>
    );
  }
}

这种方式的优势很明显：

• 完全保留了原User结构的类型约束，不会出现任意键的情况
• Immutable.Record自带不可变性，修改时必须返回新对象
• 配合React.PureComponent或者手动的shouldComponentUpdate，可以轻松避免不必要的渲染：

  // 用PureComponent的话，会自动用Immutable.is做结构比较
  class UserComponent extends React.PureComponent<UserComponentProps, {}> {
    // ...组件逻辑
  }
  
  // 或者手动写shouldComponentUpdate
  shouldComponentUpdate(nextProps: UserComponentProps) {
    return !Immutable.is(this.props.user, nextProps.user);
  }
  

如果你确实需要用Map而不是Record，可以给Map的泛型参数指定精确的键和值类型，而不是用any：

import { Map, List } from 'immutable';

// 直接映射原User接口的键，同时把bag的类型从Item[]换成List<Item>
type ImmutableUser = Map<
  Exclude<keyof User, 'bag'> | 'bag',
  User[Exclude<keyof User, 'bag'>] | List<Item>
>;

然后组件props里同样可以用这个类型：

interface UserComponentProps {
  user: ImmutableUser;
}

不过这种方式不如Record严谨，因为Map允许添加任意键，而Record只能拥有你定义的固定键，更贴合原User接口的设计。

内容的提问来源于stack exchange，提问作者Josu Goñi