繁体   English   中英

使用TypeScript更好的声明是哪一个?

[英]Which will be better declaration go to with TypeScript?

这是一个简单的问题,但是在我迁移到TypeScript的过程中,我发现在许多情况下,我的代码可以遵循这两个方向...哪个方向更好: class.tsinterface.ts

export class ActionSet {   
  constructor(private name: string) {}

  get ACTION(): string {
    return this.name;   
  }

  get PENDING(): string {
    return `${this.name}_PENDING`;   
  }

  get FULFILLED(): string {
    return `${this.name}_FULFILLED`;   
  }

  get REJECTED(): string {
    return `${this.name}_REJECTED`;   
  }
}

export function createActionSet(name: string): ActionSet {   
  return new ActionSet(name); 
}

接口

export interface IActionSet {
  ACTION: string;
  PENDING: string;
  FULFILLED: string;
  REJECTED: string;
}

export function createActionSet(name: string): IActionSet {
  return {
    ACTION: name,
    PENDING: `${name}_PENDING`,
    FULFILLED: `${name}_FULFILLED`,
    REJECTED: `${name}_REJECTED`
  };
}

更直观的方式:

在此处输入图片说明

由于ActionSet不在许多地方使用,是否值得为其创建一个类? 还是这种实施方式过于矫kill过正?

两种解决方案都很好。 这里没有不好的选择。 因此,这里不是真正的答案,而是评论。

为什么喜欢class

  1. 在运行时,您可以使用instanceof
  2. 是干的。 您不必分别编写合同( interface )和实现(工厂);
  3. 更多的是面向对象的;
  4. 内存占用空间较小。

为什么偏爱interface

  1. 在编译时,可以在接口上使用交集,并集, Pick等。
  2. 在运行时,可以在对象上使用Object.keysObject.assign等。
  3. 性能:因为在类版本中,与仅读取属性相比,getter和字符串连接的性能较低;
  4. 捆绑的尺寸。

一个小技巧:不要在接口中使用前缀I 否则,将为以下类型使用哪个前缀:

type WhichPrefixForThatType = MyInterface | boolean;

最后考虑:考虑JavaScript

TypeScript是具有类型的JavaScript。 它不是独立的语言。 因此,要评估TypeScript的良好做法,请记住查看等效的JavaScript代码。

您可以将版本与类进行比较:

export class ActionSet {   
  constructor(name) {
    this.name = name;
  }

  get ACTION() {
    return this.name;   
  }

  get PENDING() {
    return `${this.name}_PENDING`;   
  }

  get FULFILLED() {
    return `${this.name}_FULFILLED`;   
  }

  get REJECTED() {
    return `${this.name}_REJECTED`;   
  }
}

export function createActionSet(name) {   
  return new ActionSet(name); 
}

具有接口的版本:

export function createActionSet(name) {
  return Object.freeze({
    ACTION: name,
    PENDING: `${name}_PENDING`,
    FULFILLED: `${name}_FULFILLED`,
    REJECTED: `${name}_REJECTED`
  });
}

在您的示例中,第二个似乎更易于编写和阅读。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM