Code style and standards
- Jacky Xie
- Laura Wen
General Naming Conventions
Item | Naming Convention |
|---|---|
Files | PascalCase |
Interfaces | PascalCase |
Functional Components | PascalCase |
Variables | camelCase |
Functions | camelCase |
TypeScript
Interface vs Type
We will be utilising the type declaration over the interface declaration.
export type Props = {
left? : number;
top?: number;
colourMain?: string;
colourSecondary?: string;
}Functions and Variables
// Named function
export function add(x: number, y: number): number {
return x + y;
}
// Anonymous function
let myAdd = function (x: number, y: number): number {
return x + y;
};Conditional Statements
Always use === and !== over == and !=.
Ternary Statements
Use ternary statements wherever possible to maintain consistency.
Do
const res = (x > y) ? x : y;Avoid
let res: number;
if (x > y) {
res = x;
} else {
res = y;
}Quotes
We generally prefer using single quotes ' over double quotes ".
Template Literals
Use template literals wherever needed!
// type inference
let hobby = 'cooking';
let sentence = `my hobby is ${hobby}`;
console.log(sentence);
// output is: my hobby is cookingReact
Class Components vs Functional Components
Generally we want to avoid Class based react components, due to functional components being the new industry standard, and in 95% of cases, functional components provide a better developer experience due to React hooks being a great way to do state management.
function() vs const
For most functional components, we have decided to adopt export function FunctionName(){} as the go to way to declare a react functional component.
Do
export function add(x: number, y:number): number {
return x + y;
}Avoid
export const add = (x: number, y: number): number => {
return x + y;
}If you have VScode React Snippets installed, type tsrfc to generate a react functional component boiler plate code.
Related content
UNSW CSESoc