with one click
typescript-strict
Strict TypeScript practices. Use when writing TypeScript code to ensure type safety.
Menu
Strict TypeScript practices. Use when writing TypeScript code to ensure type safety.
CSS and styling best practices. Use when working with styles, layouts, or theming.
Nuxt 3/4 best practices. Use when working with Nuxt features like pages, composables, layouts, or server routes.
Vue 3 Composition API expert. Use when working with Vue components, composables, or reactive state.
| name | typescript-strict |
| description | Strict TypeScript practices. Use when writing TypeScript code to ensure type safety. |
Enforce strict TypeScript practices:
anyNever use any. Use unknown for truly unknown types:
// ❌ Avoid
function process(data: any) { }
// ✅ Better
function process(data: unknown) {
if (typeof data === 'string') {
// Now TypeScript knows it's a string
}
}
Add explicit return types for public/exported functions:
// ✅ Explicit return type
function calculateTotal(items: Item[]): number {
return items.reduce((sum, item) => sum + item.price, 0)
}
// ✅ For async functions
async function fetchUser(id: string): Promise<User | null> {
// ...
}
Prefer interface for object shapes (better error messages, extendable):
// ✅ Prefer interface
interface User {
id: string
name: string
email: string
}
// Use type for unions, primitives, or complex types
type Status = 'pending' | 'active' | 'done'
type Nullable<T> = T | null
Mark immutable data as readonly:
interface Config {
readonly apiUrl: string
readonly maxRetries: number
}
function processItems(items: readonly Item[]) {
// items.push() would be an error
}
Use type guards for runtime type checking:
function isUser(value: unknown): value is User {
return (
typeof value === 'object' &&
value !== null &&
'id' in value &&
'name' in value
)
}
if (isUser(data)) {
// TypeScript knows data is User
console.log(data.name)
}
Use as const for literal types:
const STATUSES = ['pending', 'active', 'done'] as const
type Status = typeof STATUSES[number] // 'pending' | 'active' | 'done'
Avoid ! when possible. Use optional chaining or type guards:
// ❌ Risky
const name = user!.name
// ✅ Safer
const name = user?.name ?? 'Unknown'