TypeScript 数据模型层编程的最佳实践

虽然 TypeScript 主要用于客户端，而数据模型的设计主要是服务端来做的。 但是要写出优雅的代码，也还是有不少讲究的。

让我们从一个简单的我的文章列表 api 返回的数据开始，返回的文章列表的信息如下：

 {
    "id": 2018,
    "title" : "TypeScript 数据模型层的编程最佳实践",
    "created" : 1530321232,
    "last_modified" : 1530320620,
    "status": 1
}
复制代码

同时服务端告诉我们说：

status 各值的意思 0/未发布， 1/已发布， 2/已撤回

最佳实践一： 善用枚举，No Magic constant

对于 status 这种可枚举的值，为了避免写出 status === 1 这种跟一个魔法常量的比较的代码，最佳的做法是写一个枚举，并配套一个格式化为字符串表示的函数，如下:

/**
 * 文章状态
 */
const enum PostStatus {
  /**
   * 草稿
   */
  draft = 0,
  /**
   * 已发布
   */
  published = 1,

  /**
   * 已撤回
   */
  revoked = 2
}

function formatPostStatus(status: PostStatus) {
  switch (status) {
    case PostStatus.draft:
      return "草稿";
    case PostStatus.published:
      return "已发布";
    case PostStatus.revoked:
      return "已撤回";
  }
}

复制代码

如果 PostStatus 状态比较多的话，根据喜好可以写成下面的这样。

function formatPostStatus(status: PostStatus) {
  const statusTextMap = {
    [PostStatus.draft]: "草稿",
    [PostStatus.published]: "已发布",
    [PostStatus.revoked]: "已撤回"
  };
  return statusTextMap[status];
}

复制代码

考虑到返回的 created 是时间戳值，我们还需要添加一个格式化时间戳的函数:

const enum TimestampFormatterStyle {
  date,
  time,
  datetime
}

function formatTimestamp(
  timestamp: number,
  style: TimestampFormatterStyle = TimestampFormatterStyle.date
): string {
  const millis = timestamp * 1000;
  const date = new Date(millis);
  switch (style) {
    case TimestampFormatterStyle.date:
      return date.toLocaleDateString();
    case TimestampFormatterStyle.time:
      return date.toLocaleTimeString();
    case TimestampFormatterStyle.datetime:
      return date.toLocaleString();
  }
}
复制代码

最佳实践二：如非必要，不要使用类

上来就搞个数据类

一开始的时候，由于之前的编程经验的影响，我一上来就搞一个数据类。如下：

class Post {
  id: number;
  title: string;
  created: number;
  last_modified: number;
  status: number;

  constructor(
    id: number,
    title: string,
    created: number,
    last_modified: number,
    status: number
  ) {
    this.id = id;
    this.title = title;
    this.created = created;
    this.last_modified = last_modified;
    this.status = status;
  }
}
复制代码

这可谓分分钟就写了 20 行代码。 然后如果你想到了 TS 提供了简写的方式的话，可以将上面的代码简写如下。

class Post {
  constructor(
    readonly id: number,
    readonly title: string,
    readonly created: number,
    readonly last_modified: number,
    readonly status: number
  ) {}
}
复制代码

也就是说在构造函数中的参数前面添加如 readonly,public,private 等可见性修饰符的话，即可自动创建对应字段。 因为我们是数据模型，所以我们选择使用 readonly。

一般再在 Post 添加几个 Getter ，用于返回格式化好的要显示的属性值。 如下:

class Post{
 // 构造函数同上
 
 get createdDateString(): string {
    return formatTimestamp(this.created, TimestampFormatterStyle.date);
  }
  
  get lastModifiedDateString(): string {
    return formatTimestamp(this.last_modified, TimestampFormatterStyle.date);
  }

  get statusText(): string {
    return formatPostStatus(this.status);
  }
}
复制代码

麻烦的开始

好了现在数据类写好，准备请求数据，绑定数据了。 一开始我们写出如下代码:

const posts:Post[] = resp.data
复制代码

然后 TS 报如下错误：

[ts]
Type '{ id: number; title: string; created: number; last_modifistatic fromJson(json: JsonObject): Post {
    return new Post(
      json.id,
      json.title,
      json.created,
      json.last_modified,
      json.status
    );
  }ed: number; status: number; }[]' is not assignable to type 'Post[]'.
  Type '{ id: number; title: string; created: number; last_modified: number; status: number; }' is not assignable to type 'Post'.
    Property 'createdDateString' is missing in type '{ id: number; title: string; created: number; last_modified: number; status: number; }'.
复制代码

此时我们开始意识到，请求回来的json 的 data 列表是普通的 object 不能直接给 Post 赋值。 由于一些编程惯性，我们开始想着，是不是反序列化一下，将json 对象反序列化成 Post. 于是我们在 Post 类中添加如下的反序列化方法。

type JsonObject = { [key: string]: any };
class Post{
   // 其他代码同上 
   
  static fromJson(json: JsonObject): Post {
    return new Post(
      json.id,
      json.title,
      json.created,
      json.last_modified,
      json.status
    );
  }
}
复制代码

然后在请求结果处理上增加一过 map 用于反序列化的转换。如下:

const posts: Post[] = resp.data.map(Post.fromJson);
复制代码

代码写到这里，思考一下，原来 json 就是一个原生的 JavaScript 对象了。但是我们又再一步又用来构造出 Post 类。这一步显得多余。 另外虽然一般我们的模型代码比如 Post 其实可以根据 api 文档自动生成， 但是也还是增加不少代码。

开始改进

怎么改进呢？ 既然我们的 json 已经是 JavaScrit 对象了，我们只是缺少类型声明。 那我们直接加上类型声明的，而且 TS 中的类型声明，编译成 js 代码之后会自动清除的，这样可以减少代码量。这对于小程序开发来说还是很有意义的。

自然我们写出如下代码。

interface Post {
  id: number;
  title: string;
  created: number;
  last_modified: number;
  status: number;
}
复制代码

此时，为了 UI 模板数据上的绑定。 我们双增加了一个叫 PostInfo 的接口。然后将代码修改如下:

interface PostInfo {
  statusText: string;
  createdDateString: string;
  post: Post;
}

function getPostInfoFromPost(post: Post): PostInfo {
  const statusText = formatPostStatus(post.status);
  const createdDateString = formatTimestamp(post.created);
  return { statusText, createdDateString, post };
}

const postInfos: PostInfo[] = (resp.data as Post[]).map(getPostInfoFromPost);

复制代码

其实你已知知道猫的样子

其实我想说的是，我们上面的代码中 Post 接口是多余的。 直接看代码:

const postDemo = {
  id: 2018,
  title: "TypeScript 数据模型层的编程最佳实践",
  created: 1530321232,
  last_modified: 1530320620,
  status: 1
};

type Post = typeof postDemo;
复制代码

当把鼠标放到 Post 上时，可以看到如下类型提示：

所以在开发开始时，可以先直接用 API 返回的数据结构当作一个数据模型实例。然后使用 typeof 来得到对应的类型。

把套去掉

PostInfo 这样包装其实挺丑陋的， 因为在我们心里这里其实应该是一个 Post 列表，但是为了格式化一些数据显示，我们弄一个 PostInfo 的包装，这样在使用上带来很多不方便。因为当你要使用 Post 的其他的值时，你总需要多一次间接访问比如这样 postInfo.post.id。 这就PostInfo 是我们在使用 Post 实例时的一个枷锁，一个套， 现在我们来将这个套去掉。而去掉这个套的方法使用了两项技术。 一个是 TS 中接口的继承，一个是 Object.assign 这个方法。 直接用代码说话:

interface PostEx extends Post {
  statusText: string;
  createdDateString: string;
}

function getPostExFromPost(post: Post): PostEx {
  const statusText = formatPostStatus(post.status);
  const createdDateString = formatTimestamp(post.created);
  return Object.assign(post, { statusText, createdDateString });
}

const posts: PostEx[] = (resp.data as Post[]).map(getPostExFromPost);

复制代码

即保证了类型安全，使用上又方便，代码也不失优雅。