Как правильно задать типизацию?

Question

dotnetcsharp @dotnetcsharp

Как правильно задать типизацию?

Пишу Pet-проект на react. Желаю понять как правильно задать типизацию для объектов. Вот у меня есть некая функция где я получаю по GET запросу json данные. Хочу их отобразить на страничке. Данные приходят, отображаются, все ок работает.
Проблема в том, что у меня есть интерфейс для возвращаемых данных, но я дублирую столбцы и их типы уже в компоненте, который отвечает за отрисовку данных.

import { JSXElementConstructor, Key, ReactElement, ReactNode, ReactPortal, useEffect } from "react"
import { useActions } from "../../hooks/useActions"
import { useTypedSelector } from "../../hooks/useTypedSelector"
import Loading from "../Loading"
import { useActionsTickerDetail } from "../../hooks/useActionsTickerDetail"

export const TickerDetail: React.FC = () => {
    const {tickers,loading,error} = useTypedSelector((state: { ticker: any })=>state.ticker)
    const {fetchTickerDetail} = useActionsTickerDetail()
    useEffect(() => {
        fetchTickerDetail()
    }, [])
    const reactStringReplace = require('react-string-replace');

    return (
      <div className="columns-2xl columns-1lg columns-2sm mx-auto max-w-7xl">
        {loading &&
                  <h3 className="text-center w-full"><Loading /></h3>
                }
                  {tickers.map((ticker: { id: Key;
                    ticker: string;
                    name: string;
                    description: string
                  }) => (
                    <div key={ticker.id} className="hover:bg-slate-100 hover:cursor-pointer">
                      <div className="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
                        <img src={'/img/stocks/'+ticker.ticker+'.png'} className="h-11 w-12 rounded-full"></img>  
                      </div>
                      <div className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{ticker.ticker}</div>
                      <div className="hidden md:block px-6 py-4 whitespace-nowrap text-sm text-gray-900">{ticker.name}</div>
                    </div>
                  ))}
      </div>
    )
}

Можно ли как-то в строчке

const {tickers,loading,error} = useTypedSelector((state: { ticker: any })=>state.ticker)

подцепить мой интерфейс? ticker: any?

Что бы я в участке кода

{tickers.map((ticker: { id: Key;
                    ticker: string;
                    name: string;
                    description: string
                  }) => (

не дублировал то, что у меня и так уже есть в интерфейсе. В интерфейсе у меня уже описаны столбцы и их типы

Функция забора данных:

import { Dispatch } from "react"
import { TickerAction, TickerActionTypes } from "../../../types/tickerDetail"
import axios from "axios"

export const fetchTickerDetail = () : any => {
    return async (dispatch: Dispatch<TickerAction>) => {
        try {
            dispatch({type: TickerActionTypes.FETCH_TICKERS})
            const response = await axios.get("http://****")
            dispatch({type:TickerActionTypes.FETCH_TICKERS_SUCCESS, payload: response.data})
        }
        catch (e) {
            dispatch({type: TickerActionTypes.FETCH_TICKERS_ERROR, payload: 'Ошибка'})
        }
    }
}