🖨️Typescript

In typescript global types can be declared in a .d.ts file and used anywhere without explicitly importing them. Our project's .d.ts file is named project.d.ts .

It contains:

1. Some library types in the form of [triple slash directives](https: //www.typescriptlang.org/docs/handbook/triple-slash-directives.html). These need to be placed at the top of the file.

2. Some library module declarations (usually these are included because these libs don't have typings but we still need to use them).

3. Our own global types.

Typescript provides many [Utility Types](https: //www.typescriptlang.org/docs/handbook/utility-types.html) which are useful for manipulating the base types in the global ComponentTypes interface.

A few basic ones to know:

Pick<Type, Keys>

Only use the specified Keys from the Type.

Pick<ComponentTypes, "text">;

// only use 'text' type

Partial<Type>

Allows the type to be optional (undefined)

Partial<Pick<ComponentTypes, "text">>;

// only use 'text' type

// the text type is optional

Required<Type>

Opposite of Partial, the type must be defined

Required<Pick<ComponentTypes, "text">>;

// only use 'text' type

// the text type is required

Using the stategies above you can select types from the global source and compose them to create a representation of the props in a specific component. While the global types live in project.d.ts , component level types should generally be placed in a types.ts file within the component directory and imported for use.

Although ComponentTypes is a ✅ _Good starting place, some components may require a type that is more specific and not usefully included in the global declaration._

---

Naming

• {['class', 'enum', 'interface', 'namespace', 'type', 'variable-and-function'].map(item => (

• {item.split('-').join(' ')}

• ))}

---

class

🧑‍🔬 PascalCase

🚫 Bad

class foo {}

✅ Good

class Foo {}

For memebers/methods use 🐪 camelCase

🚫 Bad

class Foo {
  Bar: number;
  BazQux() {}
}

✅ Good

class Foo {
  bar: number;
  bazQux() {}
}

---

enum

🧑‍🔬 PascalCase

🚫 Bad

enum backgroundColor {}

✅ Good

enum BackgroundColor {}

---

interface

🧑‍🔬 PascalCase

🚫 Bad

interface checkboxProps {}

✅ Good

interface CheckboxProps {}

For memebers use 🐪 camelCase

🚫 Bad

interface CheckboxProps {
  IsSelected: boolean;
}

✅ Good

interface CheckboxProps = {
  isSelected: boolean;
}

---

namespace

🧑‍🔬 PascalCase

🚫 Bad

namespace foo {}

✅ Good

namespace Foo {}

---

type

🧑‍🔬 PascalCase

🚫 Bad

type imageProps = { src: string; alt: string };

✅ ✅ Good

type ImageProps = { src: string; alt: string };

---

variable and function

🐪 camelCase

🚫 Bad

const FooBar = "baz";

const FooBar = () => "baz";

✅ Good

const fooBar = "baz";

const fooBar = () => "baz";

---

React | Typescript | Tailwind | Forms | Unit Tests