, 7 tweets, 4 min read
My Authors
Read all threads
This #TypeScriptTuesday, we're going to take a look at #TypeScript's interfaces.
Interfaces are different from types and both have their strengths in different situations.
Let's take a look.
This is just some interface definition - again an example from the #redux types:
🧵👇 interface Action {<br />
  type: string;<br />
An interface can also extend another interface.
Not only that, but also some (but not all) types.

The rule of thumb here is: if the type is well-known and could be written as an interface, it can be extended. // extending multiple interfaces is possible<br />
  interface StringPayloadActionWithError extends Action, WithErrorAttribute {<br />
    payload: string;<br />
  }<br />
<br />
  /**<br />
   * This can be resolved to { type: string; payload: string }, which<br />
   * could be expressed as an interface, so it can be extended.<br />
   */<br />
  interface StringPayloadAction extends Omit<StringPayloadActionWithError, {
meta: number;
}" src="/images/1px.png" data-src="https://pbs.twimg.com/media/EPZFwGmWkAEwwKG.jpg">
Another feature or Interfaces are index signatures. Interfaces can be indexed only by string or number, not by union types. You need Mapped Types for that.
If you index by string and number, the value indexed by number has to be a subset of the value indexed by string. interface SomethingElse {<br />
  [key: string]: string | number;<br />
  [key: number]: number;<br />
}<br />
<br />
interface InvalidInterface {<br />
  [key: string]: string;<br />
  // Error: An index signature parameter type cannot be a union type. Consider using a mapped object type instead.ts(1337)<br />
  [key: // Error: Numeric index type 'number' is not assignable to string index type 'string'.ts(2413)
[key: number]: number;
" src="/images/1px.png" data-src="https://pbs.twimg.com/media/EPZFw8KWsAMbDJi.jpg">
Interfaces are evaluated lazily. That allows for recursion that might not be possible with types.

Since TS3.7, types have become "lazier" and they allow for most recursion, too.
Just remember, if something doesn't work as a type, an interface might still work fine. interface ArithmeticsOperation {<br />
    operator: leftOperand: number | ArithmeticsOperation;
rightOperand: number | ArithmeticsOperation;
}" src="/images/1px.png" data-src="https://pbs.twimg.com/media/EPZFxsmXsAEDkL7.jpg">
The lazy nature of interfaces has an additional benefit:
Types, as they are eager, often display all their definition in error messages, exposing implementation details.
Interfaces just show their name.
We used this in #redux-toolkit got get more legible autocompletion & errors. import { createAction } from
* before RTK 1.2.0, this was:
* WithTypeProperty * ((payload: PT) => WithPayload>),
* "test", number, never, never>, "test"
* >
* it is now:
* ActionCreatorWithPayload
const testAction = createAction("test");" src="/images/1px.png" data-src="https://pbs.twimg.com/media/EPZFyRyXUAUrWSG.jpg">
Next week we'll start on types.
I hope you've learned something today, and I'll see you next #TypeScriptTuesday. 👋
You can find all examples in a TypeScript playground here: typescriptlang.org/play/#code/LAK…
Also, @threadreaderapp - unroll this please :)
Missing some Tweet in this thread? You can try to force a refresh.

Enjoying this thread?

Keep Current with Lenz Weber

Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Follow Us on Twitter!

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just three indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!