Embrace using template literal types, instead of just (wide) string type.
Template literal types have many applicable use cases e.g. API endpoints, routing, internationalization, database queries, CSS typings ...
// ❌ Avoid
const userEndpoint = '/api/users'; // Type 'string' - no error
// ✅ Use
type ApiRoute = 'users' | 'posts' | 'comments';
type ApiEndpoint = `/api/${ApiRoute}`;
const userEndpoint: ApiEndpoint = '/api/users';
// ❌ Avoid
const homeTitleTranslation = 'translation.home.title'; // Type 'string' - no error
// ✅ Use
type LocaleKeyPages = 'home' | 'about' | 'contact';
type TranslationKey = `translation.${LocaleKeyPages}.${string}`;
const homeTitleTranslation: TranslationKey = 'translation.home.title';
// ❌ Avoid
const color = 'blue-450'; // Type 'string' - no error
// ✅ Use
type BaseColor = 'blue' | 'red' | 'yellow' | 'gray';
type Variant = 50 | 100 | 200 | 300 | 400;
// Type blue-50, blue-100, blue-200, blue-300, blue-400, red-50, red-100, #AD3128 ...
type Color = `${BaseColor}-${Variant}` | `#${string}`;
// ❌ Avoid
const userEndpoint = '/api/usersss'; // Type 'string' - Since typo, route 'usersss' doesn't exist it will result in runtime error
// ✅ Use
type ApiRoute = 'users' | 'posts' | 'comments';
type ApiEndpoint = `/api/${ApiRoute}`;
const userEndpoint: ApiEndpoint = '/api/users';
// ❌ Avoid
const homeTitleTranslation = 'translation.homesss.title'; // Type 'string' - Since typo, translations page 'homesss' doesn't exist it will result in runtime error
// ✅ Use
type LocaleKeyPages = 'home' | 'about' | 'contact';
type TranslationKey = `translation.${LocaleKeyPages}.${string}`;
const homeTitleTranslation: TranslationKey = 'translation.home.title';
// ❌ Avoid
const color = 'blue-450'; // Type 'string' - Since color 'blue-450' doesn't exist it will result in runtime error
// ✅ Use
type BaseColor = 'blue' | 'red' | 'yellow' | 'gray';
type Variant = 50 | 100 | 200 | 300 | 400;
// Type blue-50, blue-100, blue-200, blue-300, blue-400, red-50, red-100, #AD3128 ...
type Color = `${BaseColor}-${Variant}` | `#${string}`;
any data type must not be used as it represents literally “any” value that TypeScript defaults to and skips type checking since it cannot infer the type. As such, any is dangerous, it can mask severe programming errors.
When dealing with ambiguous data type use unknown, which is the type-safe counterpart of any.
@@ -273,7 +273,7 @@
ProductsPage/
├─ api/
│ └─ useGetProducts/
├─ components/
│ └─ ProductItem/
├─ utils/
│ └─ filterProductsByType/
└─ index.tsx
ProductsPage/
├─ api/
│ └─ useGetProducts/
├─ components/
│ └─ ProductItem/
├─ utils/
│ └─ filterProductsByType/
└─ index.tsx