info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-07-31 06:20:14 +02:00
Code Issues Releases Wiki Activity

Update the satisfies content to be minimal (#7211)

Browse Source 
* changed example to use toUpperCase() instead of .at(0) because .at(0) does not cause any errors since it is available in string and array

* Update satisfies-keyword@HD1UGOidp7JGKdW6CEdQ_.md

---------

Co-authored-by: pardha <pardha@Vs-MacBook-Pro.local>
Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
This commit is contained in:
psaradhi
2024-10-01 09:36:33 -04:00
committed by GitHub
parent 3d7bdc55bd
commit f036a11784
1 changed files with 1 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/data/roadmaps/typescript/content/satisfies-keyword@HD1UGOidp7JGKdW6CEdQ_.md
View File

@@ -1,58 +1,6 @@
# satisfies Keyword
TypeScript developers are often faced with a dilemma: we want to ensure that some expression matches some type, but also want to keep the most specific type of that expression for inference purposes.
For example:
```typescript
// Each property can be a string or an RGB tuple.
const palette = {
red: [255, 0, 0],
green: '#00ff00',
bleu: [0, 0, 255],
// ^^^^ sacrebleu - we've made a typo!
};
// We want to be able to use array methods on 'red'...
const redComponent = palette.red.at(0);
// or string methods on 'green'...
const greenNormalized = palette.green.toUpperCase();
```
Notice that we’ve written `bleu`, whereas we probably should have written `blue`. We could try to catch that `bleu` typo by using a type annotation on palette, but we’d lose the information about each property.
```typescript
type Colors = 'red' | 'green' | 'blue';
type RGB = [red: number, green: number, blue: number];
const palette: Record<Colors, string | RGB> = {
red: [255, 0, 0],
green: '#00ff00',
bleu: [0, 0, 255],
// ~~~~ The typo is now correctly detected
};
// But we now have an undesirable error here - 'palette.red' "could" be a string.
const redComponent = palette.red.at(0);
```
The `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression. As an example, we could use `satisfies` to validate that all the properties of palette are compatible with `string | number[]`:
```typescript
type Colors = 'red' | 'green' | 'blue';
type RGB = [red: number, green: number, blue: number];
const palette = {
red: [255, 0, 0],
green: '#00ff00',
bleu: [0, 0, 255],
// ~~~~ The typo is now caught!
} satisfies Record<Colors, string | RGB>;
// Both of these methods are still accessible!
const redComponent = palette.red.at(0);
const greenNormalized = palette.green.toUpperCase();
```
The `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression.
Learn more from the following resources: