Stop using TypeScript interface

Estimated read time 4 min read

Why you should use types instead of interfaces

Stop using TypeScript interface

This image was generated by artificial intelligence.

Types and interfaces  are important features used in every TypeScript program.

However, since types and interfaces are very similar in functionality, this begs the question: which one is better?

Today we’ll evaluate types and interfaces and draw conclusions on why you should use types instead of interfaces in most cases.

So, without further ado…let’s get right into it.


So what’s the difference?

Let us analyze the definition of this Person  type  and  interface  :

type Person = {
  name: string
  age: number
}

interface Person {
  name: string
  age: number
}

It’s obvious that types and interfaces have similar syntax, the key difference is that types use = to define the shape of the object, rather than interfaces.

However, there’s more to it than that.

Let’s dig a little deeper and explore and evaluate types and interfaces together.

Scalability

In terms of extensibility, many consider interfaces to be the clear winner because interfaces can extend other interfaces using extends.

interface Job {
  job: string
}

interface Person extends Job {
  name: string
  age: number
}
const person: Person = {
  name: "John",
  age: 25,
  job: "全栈 Web 开发者",
}

Here, the Person interface extends Job, so the properties of the Job interface are merged into Person.


 On the other hand, types also provide extensibility by merging existing types using  the union  | or  intersection & operator.

Interfaces cannot express this behavior directly.

// ✅ 正常工作
type Person = {
  name: string
  age: number
} & { job: string }

// ❌ 不工作
interface Person {
  name: string
  age: number
} & { job: string }

accomplish

In TypeScript, interfaces are compatible with object-oriented programming (OOP), just like other languages ​​(such as Java or C#).

This means that interfaces can be implemented in classes using implements.

Now let’s define Person as a class and implement a new interface called Work to satisfy the contract between them.

interface Work {
  doWork: () => void
}

class Person implements Work {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  // 实现 doWork 方法以满足 `Work` 接口。
  doWork() {
    console.log("工作中...")
  }
}

const person = new Person("John", 25)
person.doWork()

Therefore, if you work frequently with OOP, interfaces will be more suitable than types, since types cannot be directly implemented by classes.

performance

When talking about performance, we are referring to  the performance of the “type checking” performed by the TypeScript compiler  , which degrades exponentially as the size of the code base increases.

That’s why we’re going to benchmark types and interfaces in terms of type checking performance to see which one is better.

Here’s a video by  Matt Pocock  explaining the difference between types and interfaces, and how there really  isn’t  any difference between types and interfaces when it comes to type checking performance.

Why are interfaces harmful?

In TypeScript, interfaces have a   unique feature called declaration merging .

Declaration merging is when the TypeScript compiler  merges two or more  interfaces with the same name into  one .

// 初始的 Person 接口
interface Person {
  name: string
  age: number
}
// 使用 "声明合并" 来完善 Person 接口
interface Person {
  gender: string
}

// 使用 "合并" 接口来定义一个新的 "person"
const person: Person = { name: "John", age: 25, gender: "男性" }

On the one hand, this feature allows existing interfaces to be easily refined and extended without affecting other dependencies.

On the other hand, declaration merging can have harmful and surprising effects on your codebase, for  two main  reasons:

  1. 1.  Order of precedence : Later statements always take precedence over earlier statements. If you’re not careful, this can cause unexpected problems when declarations are merged in many parts of your program.
  2. 2.  Unsafe merging with classes : Since the TypeScript compiler does not check the initialization of properties, this can lead to unexpected runtime errors.

Types don’t have this problem and are therefore more straightforward and safe .

in conclusion

Unless specific interface behavior is required, such as extensible refinement or implementation using OOP, it is best to use types .

Types are flexible, straightforward, and avoid problems associated with declaration merging .

Types are also performance identical compared to interfaces, giving you another reason to choose types over interfaces.

You May Also Like

More From Author

+ There are no comments

Add yours