π¨οΈ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:
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>
Pick<Type, Keys>
Only use the specified Keys from the Type.
Partial<Type>
Partial<Type>
Allows the type to be optional (undefined)
Required<Type>
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.
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
Naming
{['class', 'enum', 'interface', 'namespace', 'type', 'variable-and-function'].map(item => (
{item.split('-').join(' ')}
))}
class
class
π§βπ¬ PascalCase
π« Bad
β Good
For memebers/methods use πͺ camelCase
π« Bad
β Good
enum
enum
π§βπ¬ PascalCase
π« Bad
β Good
interface
interface
π§βπ¬ PascalCase
π« Bad
β Good
For memebers use πͺ camelCase
π« Bad
β Good
namespace
namespace
π§βπ¬ PascalCase
π« Bad
β Good
type
type
π§βπ¬ PascalCase
π« Bad
β β Good
variable and function
variable and function
πͺ camelCase
π« Bad
β Good
React | Typescript | Tailwind | Forms | Unit Tests
Last updated