Skip to content

Instantly share code, notes, and snippets.

@prendradjaja
Last active September 5, 2024 00:38
Show Gist options
  • Save prendradjaja/f3a2f438bd2f71cfbbf823cc85defe93 to your computer and use it in GitHub Desktop.
Save prendradjaja/f3a2f438bd2f71cfbbf823cc85defe93 to your computer and use it in GitHub Desktop.
type and interface in typescript

IMO the right question is "Why do both type and interface exist?"

You already know why interface exists -- so you can define an object type by naming its properties e.g.

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

type can be used for this too, but that's not why type exists. type is for type aliases -- giving a name to an existing type. (You could argue the TS team should have named this keyword typealias, that's what it really is.)

A key thing to know is that when you say type Point = { x: number, y: number }, { x: number, y: number } is a type already, even before you used the type keyword. For example, you can use it as a function return type:

function getCoordinates(): { x: number, y: number } {
    return { x: 10, y: 20 };
}

(But often you'd put a name on it; oftent you'd use type or interface instead of writing it inline like that.)

Putting a name on a type like type Point = { x: number, y: number } is useful, but where type aliases are really useful is when you're putting a name on a more complicated type. Below are some examples of that, and you'll get the idea. You don't need to pore over it, just the flavor of it.

That all is for your understanding of type and interface. Bottom line, though, is:

  • type allows you to do some things that interface can't (see below) -- so use type in those cases
  • interface allows you to do some things that type can't (see https://www.typescriptlang.org/docs/handbook/interfaces.html) -- use interface in those cases
  • but most of the time you're just defining some properties, and in those cases you can totally use either type or interface. Then it's just a matter of style (e.g. your company's style guide). I use interface in those cases.

-pandu

(everything below is written by chatgpt. i asked it to write examples of using type aliases with string, string | number, Partial, and to not assume you knew what | and Partial)


Understanding type in TypeScript

In TypeScript, the type keyword is used to create type aliases. A type alias is just a different name for a type or combination of types. Think of it as a shortcut or a label that you can use to refer to a type.

Simple Example: Aliasing a Single Type

Let's say you have a variable that can only be a string. You can create a type alias for string like this:

type MyString = string;

Now, anywhere you would normally use string, you can use MyString instead. This doesn't change anything about how the type works; it just gives it a new name.

let name: MyString = "Alice"; // Same as let name: string = "Alice";

Combining Types: The | (Union) Operator

One powerful feature of TypeScript is that you can combine types using the | operator, which is called a union. A union allows a variable to be one of several types.

For example, if you want a variable to be either a string or a number, you can do this:

type StringOrNumber = string | number;

Now, StringOrNumber can be used for variables that accept either a string or a number:

let value: StringOrNumber;
value = "Hello"; // valid
value = 42;      // valid
// value = true; // invalid, because it's not a string or a number

Using Built-in Utility Types: Partial

TypeScript also provides some built-in utility types, like Partial. This utility type is used to make all properties of an object type optional.

Here's an example:

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

type PartialPerson = Partial<Person>;

With PartialPerson, you can now create objects where some or all properties of Person are optional:

let person1: PartialPerson = { name: "Alice" }; // age is optional
let person2: PartialPerson = { age: 30 };       // name is optional
let person3: PartialPerson = {};                // both are optional
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment