tendies123 Posts - Answer Overflow

tendies123

Explore posts from servers

TtRPC TTCTheo's Typesafe Cult

Posts Comments

TTCTheo's Typesafe Cult

•Created by tendies123 on 12/30/2023 in #questions

Inconsistent Fast Refresh Issues

It doesn't really amke sense how to debug this, currently having to resatart my whole server for any change to show up

2 replies

TTCTheo's Typesafe Cult

•Created by tendies123 on 12/14/2023 in #questions

Is there a way/pattern to swap a server and client component seamlessly

https://codesandbox.io/p/devbox/hotswap-serverandclientcomponents-kjy7ps?file=%2Fapp%2Fpage.tsx Or is this a pattern we should avoid? Essentially here we have a server sidebar and a client sidebar Is it a bad pattern to want to do? Which is why i can't find much on it? ServerSidebar loads first instantly ClientSidebar loads after (mostly to update an active state ) - This is the same as the server sidebar visually except with state

2 replies

TtRPC

•Created by tendies123 on 12/13/2023 in #❓-help

Get Name of All Query Routes or Mutation Routes

Typescript is pretty unhappy with my methods of doing this manually, so wondering if there are any official ways although they i'm pretty sure they should work objectively i.e.

export type MutationRoutes = {
  [K in RouteNames]: TRPCProxyClientType[K] extends {
    mutate: (...args: any[]) => any;
  }
    ? K
    : never;
}[RouteNames];

export type MutationRoutes = {
  [K in RouteNames]: TRPCProxyClientType[K] extends {
    mutate: (...args: any[]) => any;
  }
    ? K
    : never;
}[RouteNames];

If I use this

// This expression is not callable.
const manageTRPCMutationForXState = async <T extends MutationRoutes>(name: T) => {
const mutator = trpcProxyClient[name];
mutator.mutate()
...
}

// This expression is not callable.
const manageTRPCMutationForXState = async <T extends MutationRoutes>(name: T) => {
const mutator = trpcProxyClient[name];
mutator.mutate()
...
}

But if I do

const mutator = trpcProxyClient[name as MutationRoutes];

const mutator = trpcProxyClient[name as MutationRoutes];

It works https://trpc.io/docs/client/vanilla/infer-types

2 replies

TTCTheo's Typesafe Cult

•Created by tendies123 on 12/13/2023 in #questions

Inferred Type Parameter from a Fixed Union is Different from a Parameter that is a Fixed Union

So this took me embarrassingly long to figure out how to articulate, hoping it saves someone a lot of time

export const FixedInferredType = <T extends QueryRoutes>(name: T) =>

export const FixedInferredType = <T extends QueryRoutes>(name: T) =>

export const ParameterAsUnion = (name: QueryRoutes) =>

export const ParameterAsUnion = (name: QueryRoutes) =>

These are very meaningfully different in that if you pass in a name to the second one it doesn't narrow the return type at all, you'll get a type error if you don't explicitly type guard the possibilities (even if all the inputs you are pulling from are strongly typed and would not error) Even though with both you'll get an error if you pass in a random value Is this obvious advice that exists somewhere? trying to figure out how to explain this to my team or if there is just some resource i'm missing. I guess if you're building types for DX like I am, then you should be inferring or else you're not going to get the narrowing you really want. --- The Copilot output that made it click It makes sense to me and explains why I couldn't get the specificity in places where I really wanted it.

The fundamental difference between these two lies in how TypeScript infers types:

export const FixedInferredType = <T extends QueryRoutes>(name: T) =>: This is a generic function. The type T is inferred based on the argument passed to the function. If you call FixedInferredType("getBusinesses"), TypeScript infers that T is "getBusinesses", not just any member of QueryRoutes. This allows for more precise type checking and intellisense within the function body.

export const ParameterAsUnion = (name: QueryRoutes) =>: This is a non-generic function. The type of name is QueryRoutes, which is a union of several string literals. TypeScript only knows that name is some member of QueryRoutes, but it doesn't know which specific member it is. This results in less precise type checking and intellisense within the function body.

The fundamental difference between these two lies in how TypeScript infers types:

export const FixedInferredType = <T extends QueryRoutes>(name: T) =>: This is a generic function. The type T is inferred based on the argument passed to the function. If you call FixedInferredType("getBusinesses"), TypeScript infers that T is "getBusinesses", not just any member of QueryRoutes. This allows for more precise type checking and intellisense within the function body.

export const ParameterAsUnion = (name: QueryRoutes) =>: This is a non-generic function. The type of name is QueryRoutes, which is a union of several string literals. TypeScript only knows that name is some member of QueryRoutes, but it doesn't know which specific member it is. This results in less precise type checking and intellisense within the function body.

3 replies

TTCTheo's Typesafe Cult

•Created by tendies123 on 12/9/2023 in #questions

React / Typescript VsCode Refactoring Question

2 replies

Gaming

Programming