typescript.md

Div with a attribute

  const Loader = styled.div<{ width: string }>`
  
  `;

Sets

export interface ProductControlsState {
  selectedChannels: Set<string>;
  filtersVisible: boolean;
}

  state = {
    selectedChannels: new Set(['Floom']),
    filtersVisible: false
  };
  
  adjustFilter = (items: Set<string>, itemId: string): Set<string> => {
    if (items.has(itemId)) {
      items.delete(itemId);
    } else {
      items.add(itemId);
    }

    return items;
  };  

Functional component props

import React, { FunctionComponent } from 'react';

const HeaderTags: FunctionComponent<HeaderTagProps> = ({metaTags, siteTitle, children}): JSX.Element => (
  <>
    {metaTags && <HelmetDatoCms seo={{tags: metaTags}} />}
    {siteTitle && <Helmet titleTemplate={`%s - ${siteTitle}`} />}
    {children}
  </>
)

OnClick

onClick = (event: React.MouseEvent<any>, param): void => {
  event.preventDefault();
}


onClick={(e: React.MouseEvent): void => this.preventProductClick(e, param)}

export interface SimpleOrderStatus {
  title: string;
  slug: OrderStatusSlug;
}

export const FLORIST_STATUS_SLUGS = [
  'open',
  'prepared',
  'onTheWay',
  'delivered'
];

export const ORDER_STATUSES: SimpleOrderStatus[] = [
  {
    title: 'With Florist',
    slug: 'open'
  },

strongly typed array keys

const config: { [key in 'floom' | 'florist']: { title: string } } = {
  florist: {
    title: 'Your Note'
  },
  floom: {
    title: 'Floom note'
  },
};

Default tsconfig.json file

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2017", "es7", "es6", "dom"],
    "declaration": true,
    "jsx": "react",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Maps

When the key of an array is a string

export interface StatusConfig {
  [key: string]: {
    iconName: IconType;
    color: ColourOption;
    headingBg: ColourOption;
    textColor?: string;
    metaItem: OrderMetaColumn[]
  };
}

more maps

export type TooltipXConfig = {
  [key in TooltipXPosition]: {
    xTranslate: string;
    arrowLeft: string;
  }
};

export type TooltipYConfig = {
  [key in TooltipYPosition]: {
    yTranslate: string;
    arrowBottom: string;
    arrowTop: string;
    arrowRotate: string;
  }
};

export interface TooltipProps {
  positionX: TooltipXPosition;
  positionY: TooltipYPosition;
}

export const TooltipWrapper = styled.span`
  position: relative;
`;

const config: TooltipXConfig | TooltipYConfig = {
  left: {
    xTranslate: '-20px',
    arrowLeft: '21px'
  },
  right: {
    xTranslate: 'calc(-100% + 20px)',
    arrowLeft: 'calc(100% - 21px)'
  },
  center: {
    xTranslate: '-50%',
    arrowLeft: '50%'
  },
  top: {
    yTranslate: '-102%',
    arrowBottom: '1px',
    arrowTop: 'auto',
    arrowRotate: '0'
  },
  bottom: {
    yTranslate: '20px',
    arrowBottom: 'auto',
    arrowTop: '-8px',
    arrowRotate: '180deg'
  },
};

An array of two types

export const ROUTES: Array<RouteType | DividerType> = []