Always wondered about this. Came across the exact explanation on the [official TS Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) just now.

> [!tldr]
> Types and interfaces are interchangable in many cases with a couple of exceptions.

These are the most notable differences. You can read about the more subtle differences in the links at the end.

## Syntax to extend/add fields

Interfaces use `extends`.

```ts
interface User { ... }

interface AdminUser extends User { ... }
```

Types are not “extended” but can be declared with another type.

```ts
type User = { ... }

type AdminUser = User & { ... }
```

Both work similarly, except for when extending deep nested properties. An extending interface cannot contain a property that has different shape from the extended interface's property.

```ts
interface Foo {
  foo: {
    a: string;
  }
}

interface ExtendedFoo extends Foo {
  foo: {
    b: string;
  }
}
```

https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgGIHt3IN4ChnIyYBcO+BycpAzmFKAOYDc5Avru7qJLIigKIAPSCAAmEURiwRhEMdTSYyBIulJ4KyAEY06jFgXacwATwAOKKQBVzKALzLCJRwSrJa9EMzYcWuUxbIAJLg0NQQCJCSSg7WtsgAZI6q6uQEOu56XgbIRri4COggtMiQtKQhPOGRElLIDhpOai6UpABEcG0ANGna7VptPqxAA

Credit: [Tim](https://github.com/twhitbeck) at the [Lunch Dev Discord ](https://t.co/9Nfuy36oOk)


## Union types

We can define named union types.

```ts
type BoxWidth = number | string;
```

```ts
type DigitalProduct = { ... }
type PhysicalProduct = { ... }

type Product = DigitalProduct | PhysicalProduct;
```

We cannot do this with interfaces.


## Declaration merging

We can *merge new fields to an existing interface's fields* by declaring it again. (💭 Idk if I ever want to do this if I could help it though??)

```ts
interface User {
  id: number;
}

interface User {
  username: string;
}
```

We cannot do this with types.

Credit: [Alex](https://github.com/alexanderson1993) at the [Lunch Dev Discord ](https://t.co/9Nfuy36oOk)

---

References:
- https://basarat.gitbook.io/typescript/styleguide#type-vs-interface
- https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

In: [[TypeScript MOC]]

Comparison of Typescript type and interface

> [!tldr] Don't follow me, i'm lost too
> I don't know how to do this yet. I created this note to record the details of what I'd like to learn.

**Objective:** To have a *type* that accepts date strings like `2021-04-14`, which we can use to create a valid `Date` instance.

Examples:

```js
// should pass
new Date("2021-04-14") // "Wed Apr 14 2021 07:00:00 GMT+0700"

// should fail
new Date("14/04/2021") // ❌ Invalid Date
new Date("auouououoo") // ❌ Invalid Date
```

Optionally, I want the ability to fine-tune the type, eg. to only accept `YYYY-MM-DD` or the [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format.

TODO — prompts:
- how do we "connect" the type declaration to the function that checks/validates eg. the date string?
- what is [[Nominal typing]] exactly?
- what are [[Type guards]] exactly?

Link dump:
- https://gist.github.com/dphilipson/e62e894fabca8c614baffef9615d970b
- https://spin.atomicobject.com/2017/06/19/strongly-typed-date-string-typescript/
- https://basarat.gitbook.io/typescript/main-1/nominaltyping
- https://www.typescriptlang.org/play#example/nominal-typing
- https://levelup.gitconnected.com/nominal-typing-in-typescript-c712e7116006

---

In: [[TypeScript MOC]]

How to use TypeScript brand enum to type-check date string

I wrote these notes to document my learning process and resources that Future Me—and maybe you?—may find helpful. Since I work primarily in the frontend, most of my notes are on those subjects or are written from that perspective. 

The grouping below is mainly for organisation (ie. skimming and discovery); I find these subjects to overlap and intertwine with each other more often than not IRL. Some links may be listed under multiple groups where relevant. 


## Start here

Essential notes:
- [[Core technologies of the web]]
- [[The value of semantic HTML]]

See notes on...
- [[Browsers network MOC|Browsers and network]]


## Frontend stuff

*Part of the web dev spectrum that predominantly deals with—or pertain to—user interfaces*

See notes on...
- [[CSS MOC|CSS]]
- [[Web browser API MOC|Web APIs]] a.k.a. Browser APIs
- [[JAMstack and serverless MOC|JAMstack and serverless]]
- [[Web frameworks MOC|Web frameworks]]


## Full <del>stuck</del>stack stuff

*The whole range of the web dev spectrum, from server to user*

See notes on...
- [[JavaScript MOC|JavaScript]]
- [[Web frameworks MOC|Web frameworks]]
- [[DB MOC|Databases]]
- [[CMS MOC|Content Management Systems (CMS)]]
- [[CI CD MOC|Continuous integration, Delivery, Deployment (CI/CD)]]
- Tooling — [[TypeScript MOC|TypeScript]]
- Building APIs — [[GraphQL MOC|GraphQL]]


## Best practices

*In the quest for building good web products*

See notes on...
- [[Web performance MOC|Performance]]
- [[Web Accessibility MOC|Accessibility]]
- Code quality, a.k.a. *"Get the computers to do repetitive/predictable grunt work for you"*
	- [[Testing MOC|Testing]]
	- [[Static analysis MOC|Static analysis]]
	- [[TypeScript MOC|TypeScript]] for static type checking


## Generic web/dev/open-source

*Skills and technologies that are useful for web development and a wider range of programming fields*

See notes on...
- [[Git Github MOC|Git and GitHub]]
- [[NPM packages MOC|Publishing NPM packages]]