Engineering

⌘K
  2. Home
  4. Docs
  6. Engineering
  8. React Progressive Web App...
  10. TypeScript Best Practices

TypeScript Best Practices

Use ESLint and sonarlint for code quality checker + Prettier for code formatter

For ESLint and Prettier, see: https://dev.to/saurabhggc/add-eslint-prettier-and-airbnb-to-your-project-3mo8

Also sonarlint.

Named export vs “export default”

Usually “export default” if there is only one main thing in the file, unless for utility functions and constants, then use named exports.

The file should be named either exactly how the default export should be imported, or as index.ts(x) inside a folder named as the expected import name.

Matt Shelley summarized from several opinions, and Hendy agrees with his conclusion.

PWA App (Ant Design Pro / UmiJS) Folder Structure

We standardize some parts of PWA folder structure. This also to support alignment with Soluvas AppStudio.

ComponentPathDescription
Footersrc/components/Footer/index.tsxDefault Footer component to be used in ProLayout or Layout.
Note: It can have switchable behavior, as in the case of Tmra, it can return either FooterMain or FooterWhitelabel.

LESS vs Styled Components

Use Styled Components by default. However, for static (not dynamic) global styles that use or override Ant Design LESS variables, you can use LESS and less-loader.

import appConfig from '@/appConfig.json';
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
:root  {
  --body-background: #fff;
  --primary-color: ${appConfig.WHITELABEL_NONPROFIT_ID != null ? '#fda6e3' : '#633db1'};
  --layout-header-background: ${appConfig.WHITELABEL_NONPROFIT_ID != null ? '#670947' : '#421f83'};
  --layout-footer-menu-background: #f8f8f8;
}
`;

export default GlobalStyles;

How to use these CSS custom properties:

const { Footer } = Layout;

export const MenuFooter = styled(Footer)`
  background: var(--layout-footer-menu-background);
  color: var(--layout-header-background);

  h4 {
    color: var(--layout-header-background);
    font-weight: bold;
  }

  ul {
    list-style: none;
    padding-inline-start: 0;

    li a {
      color: var(--layout-header-background);
    }
  }
`;

Ant Design Pro recommends CSS Modules instead of styled components.

Styled components are dynamic instead of build time. Which means they can be used to style based on changing user input, instead of fixing at build time. In this way it is similar to inline React CSS-in-JS, with a benefit: its scope can style child components too.

Note that a lot of people dislike LESS (because it’s static/built-time) and prefers dynamic “ThemeProvider” implementation, see issue #23371.

We use CSS custom properties (variables) to support runtime dynamic styling.

Check also:

References:

How can we help?