CODEWITHSUNDEEP
typescript
sunknudsen
sunknudsen

Reputation: 7290

Has type been deprecated in favor of interface?

I know the following codeblocks are equivalent.

export interface Person {
  id: number;
  name: string;
}

export type Person = {
  id: number;
  name: string;
}

I am aware of Typescript: Interfaces vs Types but can’t figure out when to use type over interface. Guess type exists for a reason.

The handbook on https://www.typescriptlang.org/docs/home.html doesn’t mention type. Nor could I find docs on https://duckduckgo.com/?q=site%3Atypescriptlang.org+type. Is it possible type has been deprecated in favor of interface?

Thanks!

Upvotes: 5

Views: 8830

Answers (3)

matt.h
matt.h

Reputation: 484

It is not deprecated because (1) it is not mentioned anywhere in release notes and (2) type does exist in the typescript source codes. Also, the handbook says,

Because an ideal property of software is being open to extension, you should always use an interface over a type alias if possible.

On the other hand, if you can’t express some shape with an interface and you need to use a union or tuple type, type aliases are usually the way to go.

Source: https://www.typescriptlang.org/docs/handbook/advanced-types.html#interfaces-vs-type-aliases

Base on this you may infer that it is better to use type instead of interface when it gets complicated with interface.

Upvotes: 4

Titian Cernicova-Dragomir
Titian Cernicova-Dragomir

Reputation: 249876

Type aliasses are not deprecated, neither are interfaces, they both have their uses.

For simple scenarios there is little difference between the two. You can use them mostly interchangeably.

Type aliases supports several advanced types such as mapped types and conditional types.

Interfaces support some recursive scenarios better, although type aliases also allow recursion in certain scenarios, and the gap between what recursiveness is allowed in interface and type aliases is closing (see PR).

Interfaces also support merging with classes and functions and other redeclarations of the same interface. Ex:

interface Box {
    height: number;
    width: number;
}

interface Box {
    scale: number;
}

let box: Box = {height: 5, width: 6, scale: 10};

Also worth mentioning is that object types from interfaces are not assignable to a type with an index signature, while an object type from a type alias is. 

function fn(a: { [s:string]: string}){}

interface I { a: string}
type T = { a: string }

declare let i:I;
declare let t:T;

fn(i) //err
fn(t)

Play

Upvotes: 1

Sagar Acharya
Sagar Acharya

Reputation: 1871

I am not completely sure about all the caveats and best practices of the two but what I do is the following

I add interfaces for all the types defined in the component.

interface State {} // Interface the state defined in the component
interface MappedState {} // Props provided to the component
interface ComponentProps {} // Props provided to the components from from a through connect function

and finally, add them to a type

type InjectedProps = ComponentProps  & MappedState & typeof mapDispatchToProps; // Redux's map dispatch to props function

and supply them to the component as 

class Component extends React.Component<InjectedProps, State> {

I believe the following guide is good enough. Yes you will have to do research and try to understand them.

It makes sense to use type to combine different interfaces as you can see in the above-mentioned case.

You can create different interfaces for different types of data passed to the component. It is most useful while doing front end whereas in case of backend interface must just be enough.

Upvotes: 0

Related Questions