Skip to content

Commit 8b2ba29

Browse files
committed
update docusaurus
1 parent ef76a35 commit 8b2ba29

File tree

1 file changed

+45
-3
lines changed

1 file changed

+45
-3
lines changed

website/src/pages/index.mdx

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,48 @@ const iconColor: Color = 'blue-400';
275275
const customColor: Color = '#AD3128';
276276
```
277277

278+
### Type-Safe Constants with `satisfies`
279+
280+
The `as const satisfies` syntax is a powerful feature in TypeScript that combines strict type-checking and immutability for constants. It is particularly useful when defining constants that need to conform to a specific type.
281+
282+
Key benefits:
283+
284+
- Immutability with `as const`
285+
- Ensures the constant is treated as readonly.
286+
- Narrows the types of values to their literals, preventing accidental modifications.
287+
- Validation with `satisfies`
288+
- Ensures the object conforms to a broader type without widening its inferred type.
289+
- Helps catch type mismatches at compile time while preserving narrowed inferred types.
290+
291+
```ts
292+
type OrderStatus = {
293+
pending: 'pending' | 'idle';
294+
fulfilled: boolean;
295+
error: string;
296+
};
297+
298+
// ❌ Avoid mutable constant of wide type
299+
const IDLE_ORDER: OrderStatus = {
300+
pending: 'idle',
301+
fulfilled: true,
302+
error: 'Shipping Error',
303+
};
304+
305+
// ❌ Avoid constant with incorrect values
306+
const IDLE_ORDER = {
307+
pending: 'done',
308+
fulfilled: 'partially',
309+
error: 116,
310+
} as const;
311+
312+
// ✅ Use immutable constant of narrowed type
313+
const IDLE_ORDER = {
314+
pending: 'idle',
315+
fulfilled: true,
316+
error: 'Shipping Error',
317+
} as const satisfies OrderStatus;
318+
```
319+
278320
### Type any & unknown
279321

280322
`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.
@@ -680,17 +722,17 @@ While it's often hard to find the best name, try optimize code for consistency a
680722
} as const;
681723
```
682724
683-
If object type exist use `satisfies` operator in conjunction with const assertion, to conform object matches its type.
725+
If type exist use `satisfies` operator in conjunction with const assertion, to conform object matches its type.
684726
685727
```ts
686-
// OrderStatus type is already defined - e.g. generated from database schema model, API etc.
728+
// OrderStatus is predefined (e.g. generated from database schema, API)
687729
type OrderStatus = {
688730
pending: 'pending' | 'idle';
689731
fulfilled: boolean;
690732
error: string;
691733
};
692734

693-
const ORDER_STATUS = {
735+
const PENDING_STATUS = {
694736
pending: 'pending',
695737
fulfilled: true,
696738
error: 'Shipping Error',

0 commit comments

Comments
 (0)