diff --git a/contribute/style-guides/frontend.md b/contribute/style-guides/frontend.md index d4628eda1c7..d8ff7b574e9 100644 --- a/contribute/style-guides/frontend.md +++ b/contribute/style-guides/frontend.md @@ -172,6 +172,44 @@ const CONSTANT_VALUE = "This string won't change"; _SASS styles are deprecated. Please migrate to Emotion whenever you need to modify SASS styles._ +### Typing + +In general, you should let Typescript infer the types so that there's no need to explicitly define type for each variable. + +There are some exceptions to this: + +```typescript +// Typescript needs to know type of arrays or objects otherwise it would infer it as array of any + +// bad +const stringArray = []; + +// good +const stringArray: string[] = []; +``` + +Specify function return types explicitly in new code. This improves readability by being able to tell what a function returns just by looking at the signature. It also prevents errors when a function's return type is broader than expected by the author. + +> Note: We don't have linting for this enabled because of lots of old code that needs to be fixed first. + +```typescript +// bad +function transform(value?: string) { + if (!value) { + return undefined + } + return applyTransform(value) +}; + +// good +function transform(value?: string): TransformedValue | undefined { + if (!value) { + return undefined + } + return applyTransform(value) +}; +``` + ### File and directory naming conventions Name files according to the primary export: