CODEWITHSUNDEEP
reactjstypescript
kyleawayan
kyleawayan

Reputation: 183

Are TypeScript interfaces recommended for declaration files and React component props?

Whenever I need to make a type for objects, I would usually write them like this in my declaration.d.ts:

type TagsObject = {
  _id: string;
  tag: string;
}

type ProjectData = {
  _createdAt: string;
  _id: string;
  _rev: string;
  _type: string;
  _updatedAt: string;
  tags: Array<TagsObject>;
}

and also for React component props, I would write them like this:

type IndexProps = {
  recentProjects: Array<ProjectData>;
  staticText: HomeStaticText;
};

export default function Index({ recentProjects, staticText }: IndexProps)

For declaring types in declaration.d.ts, I've seen that it's recommended to use interfaces since they are more for objects. However, for React component props, I've seen types and interfaces being used when researching online.

I know that interfaces and types are pretty similar, but which one is the better to use for declarations and React component props?

Upvotes: 0

Views: 1761

Answers (1)

Amir Saleem
Amir Saleem

Reputation: 3140

The purpose of declaration files is to introduce Types in Javascript code and not in Typescript code. In Typescript, you can directly import a types.ts file, or can create your types in the same directory as your code.

Now, coming to your question,

Interface vs Types to declare object types.

Interfaces are created like this

interface Person {
  name: string;
  age: string;
}

Types are created like this

type Person = {
  name: string;
  age: string;
}

Both interfaces and types serve a similar purpose except few key differences

  1. Declaration Merging: Interfaces can be defined multiple times in the same code. The declaration of the interface is merged together to form a single interface by Typescript. This is how it looks
interface Person {
    name: string;
}

// it is completely okay to define the same interface again with new or existing 
// properties. But the same properties should have the same type.
interface Person {
    age: number;
}

// Now, the person interface contains two properties, name and age

Type aliases on the other hand can only be defined once in a code, they cannot be redeclared again. Although you can declare the same type in different files which are treated as local variables. But in the same file, you cannot define a type again.

  1. Interfaces are open to add new properties

With the help of declaration merging, interfaces allow us to introduce new properties to them, whereas type aliases don't.

Which one is better for Component Props?

I would say both. We can't choose one. But in my personal opinion, I prefer to use interfaces for object declarations, as they go nice with other parts of the code. Since props are only defined once, you can use type as well. It is a personal choice rather than a best practice.

Visit the Typescript Offical Docs to see the differences b/w types and interfaces yourself.

Upvotes: 2

Related Questions