How to work with destructuring when declaring in typescript?

Question

typescript

For example, in

interface Props {
    theme? : object;    
}

export const Block = styled.div`
    border: ${({mainTheme}: Props) => `${mainTheme.border} ${mainTheme.color}`};
`;

how to deal with mainTheme.border and mainTheme.color?

Answer 1

It?

interface Props {
    theme: Theme;
}

interface Theme {
    border: string;
    color: string;
}

export const Block = `
    border: ${({theme: mainTheme}: Props) => `${mainTheme.border} ${mainTheme.color}`};
`;