Global types
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:
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.
Some library module declarations (usually these are included because these libs don't have typings but we still need to use them).
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.
Partial<Type>
Allows the type to be optional (undefined)
Required<Type>
Opposite of Partial, the type must be defined
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.
Naming
class
🧑🔬 PascalCase
For memebers/methods use 🐪 camelCase
enum
🧑🔬 PascalCase
interface
🧑🔬 PascalCase
For memebers use 🐪 camelCase
namespace
🧑🔬 PascalCase
type
🧑🔬 PascalCase
variable and function
🐪 camelCase
React | Typescript | Tailwind | Forms | Unit Tests
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._
Bad
Good
Bad
Good
Bad
Good
Bad
Good
Bad
Good
Bad
Good
Bad
✅ Good
Bad
Good