Lenz Weber

@phry

developer at , sometimes speaker, sometimes teacher, doing mostly , and

Deutschland
phryneas.de
Vrijeme pridruživanja: svibanj 2009.
57 fotografija ili videozapisa Fotografije i videozapisi

Tweetovi

Blokirali ste korisnika/cu @phry

Jeste li sigurni da želite vidjeti te tweetove? Time nećete deblokirati korisnika/cu @phry

  1. Prikvačeni tweet
    27. kol 2019.

    How should you handle global vs local state in a modern React app? Should you choose Context, Redux, MobX or Apollo? In my talk on the London I tried to shed some light on these questions - and now the video is online for you to watch:

    1 reply 2 proslijeđena tweeta 13 korisnika označava da im se sviđa
    Poništi
  2. proslijedio/la je Tweet
    31. sij

    Common mistake I see in React apps: Putting state in the wrong spot. Simple strategy: 1. Put state in the component that needs it. 2. Do child components need the data too? Pass it down. 3. Do parents need it? Lift state up. Strive to keep state as low as possible.

    21 reply 107 proslijeđenih tweetova 577 korisnika označava da im se sviđa
    Poništi
  3. proslijedio/la je Tweet
    31. sij

    Are you working with 3D printers and want to create a better world? Apply on our position on "3D printing of spare-parts for repair". We are looking for a 3-year Postdoc applied researcher on 3D printing of spare parts used to repair consumer products.

    1 proslijeđeni tweet 1 korisnik označava da mu se sviđa
    Poništi
  4. proslijedio/la je Tweet
    30. sij

    Bock auf GraphQL, React & Postgres? und ich erzählen am 06.02. in was über unser Audit-Plugin in diesem Stack und am Tag drauf gibt's nen Workshop zum selber basteln!

    5 proslijeđenih tweetova 5 korisnika označava da im se sviđa
    Poništi
  5. 29. sij

    This is continued here:

    interface Action { type: string; }
    This , we're going to take a look at '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 types: 🧵👇
    Prikaži ovu nit
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  6. 29. sij

    I actually forgot about this one in yesterday's . Thanks :)

    Odgovor korisniku/ci @phry
    Don’t forget the fact that interfaces can merge! It’s not a feature used frequently in user-land code, but it’s super helpful when writing library code/typings that might interact with other libraries.
    2 korisnika označavaju da im se sviđa
    Poništi
  7. 28. sij

    Also, - unroll this please :)

    1 reply 1 korisnik označava da mu se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  8. 28. sij

    Next week we'll start on types. I hope you've learned something today, and I'll see you next . 👋 You can find all examples in a TypeScript playground here:

    1 proslijeđeni tweet 8 korisnika označava da im se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  9. 28. sij

    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 -toolkit got get more legible autocompletion & errors.

    import { createAction } from "@reduxjs/toolkit"; /* * before RTK 1.2.0, this was: * * WithTypeProperty<WithMatch< * (<PT extends number>(payload: PT) => WithPayload<PT, Action<"test">>), * "test", number, never, never>, "test" * > * * it is now: * * ActionCreatorWithPayload<number, "test"> */ const testAction = createAction<number, "test">("test");
    1 reply 3 proslijeđena tweeta 8 korisnika označava da im se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  10. 28. sij

    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 { operator: "+" | "-" | "/" | "*"; leftOperand: number | ArithmeticsOperation; rightOperand: number | ArithmeticsOperation; }
    1 reply 2 proslijeđena tweeta 6 korisnika označava da im se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  11. 28. sij

    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 { [key: string]: string | number; [key: number]: number; } interface InvalidInterface { [key: string]: string; // Error: An index signature parameter type cannot be a union type. Consider using a mapped object type instead.ts(1337) [key: "a" | "b"]: string; // Error: Numeric index type 'number' is not assignable to string index type 'string'.ts(2413) [key: number]: number; }
    1 proslijeđeni tweet 6 korisnika označava da im se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  12. 28. sij

    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 interface StringPayloadActionWithError extends Action, WithErrorAttribute { payload: string; } /** * This can be resolved to { type: string; payload: string }, which * could be expressed as an interface, so it can be extended. */ interface StringPayloadAction extends Omit<StringPayloadActionWithError, "error"> { meta: number; }
    1 reply 1 proslijeđeni tweet 6 korisnika označava da im se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  13. 28. sij

    This , we're going to take a look at '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 types: 🧵👇

    interface Action { type: string; }
    6 proslijeđenih tweetova 32 korisnika označavaju da im se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  14. proslijedio/la je Tweet
    24. sij

    Ich habe auf Heise Developer ein paar Gedanken zur API aufgeschrieben. Bin auf Eure Meinungen gespannt, also tobt euch fleißig hier oder im Heise Forum aus 🤓 Viel Spaß beim Lesen und schönes Wochenende! ☀️

    Ein Jahr React Hooks-API – eine Bilanz
    7 proslijeđenih tweetova 17 korisnika označava da im se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  15. proslijedio/la je Tweet
    22. sij

    tip for today: `as const` assertion marks a literal expression as immutable. Nested! 🤩

    13 replies 304 proslijeđena tweeta 1.151 korisnik označava da mu se sviđa
    Poništi
  16. 21. sij

    This is continued here:

    interface PayloadAction<P, T = string> { type: T; payload: P; } type ActionCreator<P, T> = (payload: P) => PayloadAction<P, T>; function createAction<P, T = string>(type: T): ActionCreator<P, T> { return (payload: P) => ({ type, payload }); }
    While last we looked at 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 -toolkit's `createAction` function. 🧵👇
    Prikaži ovu nit
    1 korisnik označava da mu se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  17. 21. sij

    This is continued here:

    function createAction<P, T = string>(type: T, prepare?: PrepareAction<P>): ActionCreator<P, T> { return (payload: P) => ({ type, payload }); } // this should not be possible // v // ActionCreator<number, Text> const invalidAction = createAction( document.createTextNode("I really shouldn't be used as type!"), withPayloadType<number>() );
    Last , we left off with a version of -toolkit's `createAction` method that could be used with a mix of inferred and explicit Generic Arguments. But that method would still take every `type` - including objects. Let's see how to restrict that.
    Prikaži ovu nit
    1 korisnik označava da mu se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  18. 21. sij

    And that's it for now with Generics. Next week, we're going to take a deeper look at Interfaces. See you then! For now, if you want to play around with the examples from this week, here's a TypeScript playground:

    1 reply 1 proslijeđeni tweet 3 korisnika označavaju da im se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  19. 21. sij

    And then there's this one weird trick: in , a generic argument can reference _itself_ in it's extends clause. For example, this allows to restrict generic arguments to very explicit mapped types with an association between keys and values.

    type CaseReducers<State, ReducerMap> = { [Type in keyof ReducerMap]: <A extends PayloadAction<any, Type>>( oldState: State, action: A ) => State; }; function createReducer<S, M extends CaseReducers<S, M>>( initialState: S, reducerMap: M ): Reducer<S> { // let's skip the implementation ;) return () => initialState; }
    1 reply 1 proslijeđeni tweet 6 korisnika označava da im se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  20. 21. sij

    Not only can you use any interface in `extends`, you can also reference other generic parameters. This can - among other things - be used to "pick" types from another generic type. Before conditional types, this was the common way to do things like this:

    function getPayloadFromAction<A extends PayloadAction<P, unknown>, P>(action: A): P { return action.payload; }
    1 reply 1 proslijeđeni tweet 2 korisnika označavaju da im se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi
  21. 21. sij

    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...

    function createAction<P, T extends string = string>( type: T, prepare?: PrepareAction<P> ): ActionCreator<P, T> { return (payload: P) => ({ type, payload }); } const invalidAction = createAction( // Argument of type 'Text' is not assignable to parameter of type 'string'.(2345) document.createTextNode("I really shouldn't be used as type, but YOLO!"), withPayloadType<number>() );
    1 reply 1 proslijeđeni tweet 2 korisnika označavaju da im se sviđa
    Prikaži ovu nit
    Prikaži ovu nit
    Poništi

@phry još nije objavio nijedan Tweet.

Čini se da učitavanje traje već neko vrijeme.

Twitter je možda preopterećen ili ima kratkotrajnih poteškoća u radu. Pokušajte ponovno ili potražite dodatne informacije u odjeljku Status Twittera.

    Možda bi vam se svidjelo i ovo:

    ·