Lenz Weber Profile picture
developer at @mayflowergmbh Redux Toolkit co-maintainer creator of RTK-Query #TypeScript #React #Redux
Jan 28, 2020 ā€¢ 7 tweets ā€¢ 4 min read
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">
Jan 21, 2020 ā€¢ 6 tweets ā€¢ 3 min read
Last #TypeScriptTuesday, we left off with a version of #redux-toolkit's `createAction` method that could be used with a mix of inferred and explicit #TypeScript Generic Arguments.
But that method would still take every `type` - including objects. Let's see how to restrict that. This can be solved by using the `extends` keyword, which allows us to restrict a Type Argument. So here, we state that out `T` argument always has to be a valid `string`.
You could always override that restriction by using `any`.
But `extends` can do more than that...
Jan 14, 2020 ā€¢ 6 tweets ā€¢ 4 min read
While last #TypeScriptTuesday we looked at #TypeScript Generics Basics, today we continue where we left off, by taking a closer look at type argument inference, pitfalls and workarounds. We will take a look at a simplified version of #redux-toolkit's `createAction` function.
šŸ§µšŸ‘‡ interface PayloadAction<P, T = string> {<br />
  type: T;<br />
  payload: P;<br />
}<br />
<br />
type ActionCreator<P, T> = (payload: P) => PayloadAction<P, T>;<br />
<br />
function createAction<P, T = string>(type: T): ActionCreator<P, T> {<br />
  return (payload: P) => ({<br />
    type,<br />
    payload<br />
  });<br />
} Here, we call this function three ways:

1. With explicit type arguments. Everything is fine.
2. With inferred type arguments. P cannot be inferred, because it does not relate to any method argument.
3. With one explicit type argument. But why is the second argument not inferred? function createAction<P, T = string>(type: T): ActionCreator<P, T> {<br />
  /* ... */<br />
}<br />
<br />
const type =
// ActionCreator
const incrementAction = createAction(type);

// ActionCreator
const actionCreator2 = createAction(type);

// ActionCreator
const actionCreator3 = createAction(type);" src="/images/1px.png" data-src="https://pbs.twimg.com/media/EOQ6FriXUAEYJDD.jpg">