TypeScript Interface vs type alias All In One

TypeScript Interface vs type alias All In One

Type aliases and interfaces are very similar and you can choose freely between them.
Personally, I use type aliases when defining primitive, union, intersection, function, or tuple types.
However, I make use of interfaces when defining object types or taking advantage of declaration merging.

类型别名和接口非常相似，您可以在它们之间自由选择。
就个人而言，我在定义基元、联合、交集、函数或元组类型时使用类型别名。
但是，我在定义对象类型或利用声明合并时使用接口。

不同点

1. Other Types

Unlike an interface, the type alias can also be used for other types such as primitives, unions, and tuples.

primitives, unions, and tuples

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };


// primitive
type Name = string;

// union
type PartialPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];

2. implement / extend

however that a class and interface are considered static blueprints. Therefore, they can not implement / extend a type alias that names a union type.

interface Point {
  x: number;
  y: number;
}

class SomePoint implements Point {
  x = 1;
  y = 2;
}

type Point2 = {
  x: number;
  y: number;
};

class SomePoint2 implements Point2 {
  x = 1;
  y = 2;
}

type PartialPoint = { x: number; } | { y: number; };

// FIXME: can not implement a union type
class SomePartialPoint implements PartialPoint {
  x = 1;
  y = 2;
}

3. Declaration merging

Unlike a type alias, an interface can be defined multiple times and will be treated as a single interface (with members of all declarations being merged).

同名的 interface 会自动合并成一个

interface Point { x: number; }
interface Point { y: number; }
// These two declarations become:
// interface Point { x: number; y: number; }

const point: Point = { x: 1, y: 2 };

同名的 type alias 后面定义的会覆盖前面的

type Types = { x: number; }
type Types = { y: number; }
// These two declarations become:
// type Types = { y: number; }

相同点

1. interface 和 type alias 都不会生成 js 代码，仅用于类型校验

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2022-02-07
 * @modified
 *
 * @description interface-vs-type-alias
 * @augments
 * @example
 * @link
 *
 */

const log = console.log;

// export {};
interface Point { x: number; }
interface Point { y: number; }

const funcI = (obj: Point): void => {
  log('Types', obj);
}

// funcI();
funcI({
  x: 1,
  y: 1,
});

type Types = { x: number; }
type Types = { y: number; }

const funcT = (obj: Types): void => {
  log('Types', obj);
}

// funcT();
funcT({
  x: 1,
  y: 1,
});
/*
Argument of type '{ x: number; y: number; }' is not assignable to parameter of type 'Types'.
  Object literal may only specify known properties, and 'y' does not exist in type 'Types'.ts(2345)
*/

export {
  // Point,
  // Types,
  funcI,
  funcT,
};

"use strict";
exports.__esModule = true;
exports.funcT = exports.funcI = void 0;
/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2022-02-07
 * @modified
 *
 * @description interface-vs-type-alias
 * @augments
 * @example
 * @link
 *
 */
var log = console.log;
var funcI = function (obj) {
    log('Types', obj);
};
exports.funcI = funcI;
// funcI();
funcI({
    x: 1,
    y: 1
});
var funcT = function (obj) {
    log('Types', obj);
};
exports.funcT = funcT;
// funcT();
funcT({
    x: 1,
    y: 1
});

https://www.typescriptlang.org/play

https://www.typescriptlang.org/play?ssl=7&ssc=1&pln=5&pc=1#code/PTAEFMA8AcHsCcAuoDeBfA3AKAJYDtFx4AzAQwGNxQAFWfZFUSALlDwFcBbAIyI1DS4CRMpRp0CqUAE9WHHnwFYsiadCoAVNeADOoALxSWbLr3j9Bq9aC3q9hxrJMLzSrFDhJUWUL-H0AGh8-W10gzCwgA

Property Modifiers / 属性修饰符

https://www.typescriptlang.org/docs/handbook/2/objects.html#property-modifiers

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2022-02-07
 * @modified
 *
 * @description
 * @augments
 * @example
 * @link https://www.typescriptlang.org/docs/handbook/2/objects.html#property-modifiers
 *
 */

const log = console.log;

// anonymous
function anonymousGreet(person: { name: string; age: number }) {
  return "Hello " + person.name;
}

// interface
interface PersonInterface {
  name: string;
  age: number;
}
function interfaceGreet(person: PersonInterface) {
  return "Hello " + person.name;
}


// type alias
type PersonTypeAlias = {
  name: string;
  age: number;
};
function typeAliasGreet(person: PersonTypeAlias) {
  return "Hello " + person.name;
}

export {};

refs

https://stackoverflow.com/a/52682220/5934465

https://dev.to/toluagboola/type-aliases-vs-interfaces-in-typescript-3ggg

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---