From d92f18db3f7f1bdbb052cb6f17a94c9e664bc65a Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Sat, 9 Apr 2022 23:41:57 +0300 Subject: [PATCH] docs: coding style --- docs/coding-style.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 docs/coding-style.md diff --git a/docs/coding-style.md b/docs/coding-style.md new file mode 100644 index 0000000..e33bd4c --- /dev/null +++ b/docs/coding-style.md @@ -0,0 +1,30 @@ +# TypeScript + +- avoid `any`; get rid of any existing `any` whenever you can so that we can enable `"strict": true` later on in `tsconfig.json` +- define custom types for common data structures + - don't worry about `interface` vs `type`, [both are fine](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces) + +## Typescript and React/Next + +- use `React.FC` type for React components, e.g. `const MyComponent: React.FC = ({ ... }) => { ... };` +- use `NextPage` for typing stuff in `src/pages/` +- use generic versions of `GetServerSideProps` and `GetStaticProps` + +# React + +- create one file per one component (tiny helper components in the same file are fine) +- if +- name file identically to the component it describes (e.g. `const DisplayForecasts: React.FC = ...` in `DisplayForecasts.ts`) +- use named export instead of default export for all React components + - it's better for refactoring + - and it plays well with `React.FC` typing + +# Styles + +- use [Tailwind](https://tailwindcss.com/) +- avoid positioning styles in components, position elements from the outside (e.g. with [space-\*](https://tailwindcss.com/docs/space) or grid/flexbox) + +# General notes + +- use `const` instead of `let` whenever possible +- set up [prettier](https://prettier.io/) to format code on save