passing object as a props, how to type it

Heyy lets say I have fully typed object from a backend on a page like this

const { data: getCoin } = trpc.coin.getCoin.useQuery({ name: id });

const { data: getCoin } = trpc.coin.getCoin.useQuery({ name: id });

His type looks like this

symbol: string;
    name: string;
    image: {
        large: string;
    };
    market_cap_rank: number;
    links: {
        homepage: string[];
    ...

symbol: string;
    name: string;
    image: {
        large: string;
    };
    market_cap_rank: number;
    links: {
        homepage: string[];
    ...

But now I want to to pass it as prop to a component. Is there a way to not loose types? I mean it's kinda dumb to just create another schema for typescript right? Is there cool way to not loose types there? For example

<CoinInfo getCoin={getCoin} />

<CoinInfo getCoin={getCoin} />

and then

 export const CoinInfo = ({ getCoin }) =>

 export const CoinInfo = ({ getCoin }) =>

2 Replies

Amos•3y ago

// Where your app router is
export type RouterOutput = inferRouterOutputs<AppRouter>;
// Anywhere
type GetCoinOutput = RouterOutput["coin"]["getCoin"];

// Where your app router is
export type RouterOutput = inferRouterOutputs<AppRouter>;
// Anywhere
type GetCoinOutput = RouterOutput["coin"]["getCoin"];

export const CoinInfo: React.FC<GetCoinOutput> = ({ getCoin }) => {
  ...
}

export const CoinInfo: React.FC<GetCoinOutput> = ({ getCoin }) => {
  ...
}

noctateOP•3y ago

thanks!

Gaming

Programming

passing object as a props, how to type it