4

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!

sunknudsen
  • 6,356
  • 3
  • 39
  • 76
  • 2
    Possible duplicate of [Typescript: Interfaces vs Types](https://stackoverflow.com/questions/37233735/typescript-interfaces-vs-types) – Andrew Marshall Sep 14 '19 at 14:33
  • @AndrewMarshall I’m aware of this question, but it doesn’t answer when to use type over interface. – sunknudsen Sep 14 '19 at 14:34
  • It lists the differences between the two. If you need certain capabilities, then pick the one that offers them. There are scenarios in which one can only use one but not the other, as outlined in the linked answers. E.g., can’t replicate `type Foo = number` with `interface`, and can’t replicate `interface` merging with `type`. – Andrew Marshall Sep 14 '19 at 14:44
  • https://stackoverflow.com/questions/37233735/typescript-interfaces-vs-types#answer-54101543 – Sagar Acharya Sep 14 '19 at 14:47
  • 1
    Getting started with TypeScript so many of the aspects are a bit abstract but thanks for sharing @sagar.acharya. – sunknudsen Sep 14 '19 at 14:51
  • @AndrewMarshall Should I delete my question or you think it can help people who are just getting started? – sunknudsen Sep 14 '19 at 14:51

3 Answers3

3

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.

Community
  • 1
  • 1
matt.h
  • 478
  • 1
  • 4
  • 10
1

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

Titian Cernicova-Dragomir
  • 230,986
  • 31
  • 415
  • 357
0

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.

Sagar Acharya
  • 1,763
  • 2
  • 19
  • 38
  • 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`? – sunknudsen Sep 14 '19 at 15:07
  • 1
    I am not sure about that. I belive type still worked when i used it in the version 3.0 and the latest version is 3.16. I think it is not something they would remove in a minor release. Let me check for it though – Sagar Acharya Sep 14 '19 at 15:12
  • https://github.com/microsoft/TypeScript/blob/9c71eaf59040ae75343da8cdff01344020f5bba2/tests/baselines/reference/narrowingByDiscriminantInLoop.js – Sagar Acharya Sep 14 '19 at 15:15
  • check this they have used type in the code for typescript itself. It is not removed. Not sure why there is nothing in the docs – Sagar Acharya Sep 14 '19 at 15:16