Wiki

Appearance

Coding Conventions ​

INFO

This is a work in progress.

Folder Naming Conventions ​

  • use lowercase for all folder names words should be seperated by hyphens (-)
  • never use spaces in naming folders
  • never use special characters in naming folders
  • folder names should be descriptive to its contents

utils is a good example of a folder name for when you will put helper file that contains functions that you will use in your project.

an example of a folder name would be my-folder-name or check the snippet below

.
└── src/
    ├── a-b-c-d/
    │   └── nice-one/
    │       └── tree/
    │           └── diagram-markdowns
    └── nospaces/
        ├── to-indicate/
        │   ├── file
        │   ├── and
        │   ├── folder
        │   └── nesting.
        └── you-can-even/
            └── use/
                ├── markdown
                └── bullets
.
└── src/
    ├── a-b-c-d/
    │   └── nice-one/
    │       └── tree/
    │           └── diagram-markdowns
    └── nospaces/
        ├── to-indicate/
        │   ├── file
        │   ├── and
        │   ├── folder
        │   └── nesting.
        └── you-can-even/
            └── use/
                ├── markdown
                └── bullets

TIP

the following are enforced conventions that you should follow

components - directory for all that can be reused in multipage pages, for components that needed to seperate from its container to shorten the LOCS.

styles - directory for all the styling of the project, this applies to all projects. for scoped style.

File Naming Conventions ​

for types, models and services use the following example user.service.ts or user.service.js

barrels barrels files should be named as index.ts or index.js not neccessary for directories like utils

Barrel files should be used to export multiple files in a single file.

ts
export const bar = {
  power: "low",
};

export const baz = {
  magic: () => console.log("You can do magic!"),
};
export const bar = {
  power: "low",
};

export const baz = {
  magic: () => console.log("You can do magic!"),
};
ts
//src/utils/index.ts
export * from "./helper";
export { foo1, foo2, foo3 } from "./another-helper";

export { foo1 as bar, foo2 as baz, foo3 };
//src/utils/index.ts
export * from "./helper";
export { foo1, foo2, foo3 } from "./another-helper";

export { foo1 as bar, foo2 as baz, foo3 };
ts
//src/app.ts
import { foo1, foo2, foo3 } from "./utils";
import { bar, baz } from "./utils";

bar.power = "super";
baz.magic();
//src/app.ts
import { foo1, foo2, foo3 } from "./utils";
import { bar, baz } from "./utils";

bar.power = "super";
baz.magic();

components for UI's should be named as UserCard.tsx or UserCard.vue or UserCard.svelte importing them and using them should be like this

React ​

typescript
import { UserCard } from "components"; // Imported from barrel
const UserPage =() => {
return (
    <UserCard />
)
import { UserCard } from "components"; // Imported from barrel
const UserPage =() => {
return (
    <UserCard />
)

React ​

typescript
import { UserCard } from "components"; // Imported from barrel
const UserPage =() => {
return (
    <UserCard />
)
import { UserCard } from "components"; // Imported from barrel
const UserPage =() => {
return (
    <UserCard />
)
ts
//service.index.ts
export * from "./user.service";
export * from "./auth.service";
//service.index.ts
export * from "./user.service";
export * from "./auth.service";

TypeScript Conventions ​

Variable and Function Declarations

ts
// DO NOT USE `var` to declare variables, its 2023
var foo = false; // bad
let foo = true; // good

// Only use the

// VARIABLE DECLARATION
const foo_bar = 1; //you are not in the python world
const fooBar = 1; // good

const foos = []; // bad
const foos: string[] = []; // good

// FUNCTION DECLARATION
// To be uniformed on our codebase please use the => function
const foo = () => {};
const fooSync = async () => {};

// syntactic sugars
// A single expression presumes it is the return value
const foo = (a: number, b: number) => a + b;
// extract a single prop from an array of objects
const fooo = foos.map((foo) => foo.bar);
// DO NOT USE `var` to declare variables, its 2023
var foo = false; // bad
let foo = true; // good

// Only use the

// VARIABLE DECLARATION
const foo_bar = 1; //you are not in the python world
const fooBar = 1; // good

const foos = []; // bad
const foos: string[] = []; // good

// FUNCTION DECLARATION
// To be uniformed on our codebase please use the => function
const foo = () => {};
const fooSync = async () => {};

// syntactic sugars
// A single expression presumes it is the return value
const foo = (a: number, b: number) => a + b;
// extract a single prop from an array of objects
const fooo = foos.map((foo) => foo.bar);

Types Matter! ❗💯 ​

The unknown vs any type

From this section all T is defined as type and K shall be known as key

ts
const TK = {
  key: type;
}
const TK = {
  key: type;
}

I will not explain this in detail but please use unknown instead of any type.

Doc Reference

Stackoverflow Question

Further Reading as the code goes weird with all the generics and discriminated union types

Common Usecase in building an object from FormData or a spread from params

ts
/* Record<K, T>
Constructs an object type whose property
keys are Keys and whose property values are Type */
type Foo = Record<string, unknown>;
/* Record<K, T>
Constructs an object type whose property
keys are Keys and whose property values are Type */
type Foo = Record<string, unknown>;

Read Here

What Utility types to use in a given situation

ts
type Foo = {
  id: string;
  name: string;
  skills: string[];
  title: "world champion" | "lowborn" | "artisan";
  enemy: "bar" | "baz";
  activated: boolean;
};

/* Prick<T,K>
 Important when you need to extract a single prop from an object
 This also ensures us that when the type of id property changes
 All other implementations will be affected, */
type DeleteFoo = Pick<Foo, "id">; // Be safe, use protection
// Omit<T,K>
// multiple keys to pick or omit use |
type CreateFoo = Omit<Foo, "id" | "activated">;
type Foo = {
  id: string;
  name: string;
  skills: string[];
  title: "world champion" | "lowborn" | "artisan";
  enemy: "bar" | "baz";
  activated: boolean;
};

/* Prick<T,K>
 Important when you need to extract a single prop from an object
 This also ensures us that when the type of id property changes
 All other implementations will be affected, */
type DeleteFoo = Pick<Foo, "id">; // Be safe, use protection
// Omit<T,K>
// multiple keys to pick or omit use |
type CreateFoo = Omit<Foo, "id" | "activated">;

Weird data sets ​

If you feel the need to use the Exclude, Extract, Parameter, ReturnType, InstanceType go to microsoft they might hire you