From 674b1604f7e3f38b50ebded3062932d33c994ce5 Mon Sep 17 00:00:00 2001 From: Nick Barrett Date: Tue, 17 Oct 2023 23:53:25 -0400 Subject: [PATCH 1/2] Updated code example for satisfies keyword because the example did not produce the error indicated because the at function works on strings --- .../copy/en/release-notes/TypeScript 4.9.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/documentation/copy/en/release-notes/TypeScript 4.9.md b/packages/documentation/copy/en/release-notes/TypeScript 4.9.md index 5033ae8a9b12..a9185d66bb14 100644 --- a/packages/documentation/copy/en/release-notes/TypeScript 4.9.md +++ b/packages/documentation/copy/en/release-notes/TypeScript 4.9.md @@ -14,17 +14,17 @@ For example: ```ts // Each property can be a string or an RGB tuple. const palette = { - red: [255, 0, 0], - green: "#00ff00", + red: "#ff0000", + green: [0, 255, 0], 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); +// We want to be able to use string methods on 'red'... +const redComponent = palette.red.toUpperCase(); -// or string methods on 'green'... -const greenNormalized = palette.green.toUpperCase(); +// or array methods on 'green'... +const greenNormalized = palette.green.at(1); ``` Notice that we've written `bleu`, whereas we probably should have written `blue`. @@ -36,14 +36,14 @@ type Colors = "red" | "green" | "blue"; type RGB = [red: number, green: number, blue: number]; const palette: Record = { - red: [255, 0, 0], - green: "#00ff00", + red: "#ff0000", + green: [0, 255, 0], 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); +// But we now have an undesirable error here - 'palette.red' "could" be an array. +const redComponent = palette.red.toUpperCase(); ``` The new `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression. @@ -55,15 +55,15 @@ type Colors = "red" | "green" | "blue"; type RGB = [red: number, green: number, blue: number]; const palette = { - red: [255, 0, 0], - green: "#00ff00", + red: "#ff0000", + green: [0, 255, 0], bleu: [0, 0, 255] // ~~~~ The typo is now caught! } satisfies Record; // Both of these methods are still accessible! -const redComponent = palette.red.at(0); -const greenNormalized = palette.green.toUpperCase(); +const redComponent = palette.red.toUpperCase(); +const greenNormalized = palette.green.at(1); ``` `satisfies` can be used to catch lots of possible errors. @@ -92,15 +92,15 @@ In that case, we can also ensure that all of an object's property values conform type RGB = [red: number, green: number, blue: number]; const palette = { - red: [255, 0, 0], - green: "#00ff00", + red: "#ff0000", + green: [0, 255, 0], blue: [0, 0] // ~~~~~~ error! } satisfies Record; // Information about each property is still maintained. -const redComponent = palette.red.at(0); -const greenNormalized = palette.green.toUpperCase(); +const redComponent = palette.red.toUpperCase(); +const greenNormalized = palette.green.at(1); ``` For more examples, you can see the [issue proposing this](https://github.com/microsoft/TypeScript/issues/47920) and [the implementing pull request](https://github.com/microsoft/TypeScript/pull/46827). From 31fc178c50f271851176c0fd01d5d4e455509f56 Mon Sep 17 00:00:00 2001 From: Nick Barrett Date: Tue, 17 Oct 2023 23:59:34 -0400 Subject: [PATCH 2/2] Simplified changes --- .../copy/en/release-notes/TypeScript 4.9.md | 37 ++++++++++--------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/documentation/copy/en/release-notes/TypeScript 4.9.md b/packages/documentation/copy/en/release-notes/TypeScript 4.9.md index a9185d66bb14..bae05ef7467a 100644 --- a/packages/documentation/copy/en/release-notes/TypeScript 4.9.md +++ b/packages/documentation/copy/en/release-notes/TypeScript 4.9.md @@ -14,17 +14,17 @@ For example: ```ts // Each property can be a string or an RGB tuple. const palette = { - red: "#ff0000", - green: [0, 255, 0], + red: [255, 0, 0], + green: "#00ff00", bleu: [0, 0, 255] // ^^^^ sacrebleu - we've made a typo! }; -// We want to be able to use string methods on 'red'... -const redComponent = palette.red.toUpperCase(); +// We want to be able to use array methods on 'red'... +const redComponent = palette.red.at(0); -// or array methods on 'green'... -const greenNormalized = palette.green.at(1); +// or string methods on 'green'... +const greenNormalized = palette.green.toUpperCase(); ``` Notice that we've written `bleu`, whereas we probably should have written `blue`. @@ -36,14 +36,15 @@ type Colors = "red" | "green" | "blue"; type RGB = [red: number, green: number, blue: number]; const palette: Record = { - red: "#ff0000", - green: [0, 255, 0], + 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 an array. -const redComponent = palette.red.toUpperCase(); +const redComponent = palette.red.at(0); +// But we now have an undesirable error here - 'palette.green' "could" be an array. +const greenNormalized = palette.green.toUpperCase(); ``` The new `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression. @@ -55,15 +56,15 @@ type Colors = "red" | "green" | "blue"; type RGB = [red: number, green: number, blue: number]; const palette = { - red: "#ff0000", - green: [0, 255, 0], + red: [255, 0, 0], + green: "#00ff00", bleu: [0, 0, 255] // ~~~~ The typo is now caught! } satisfies Record; // Both of these methods are still accessible! -const redComponent = palette.red.toUpperCase(); -const greenNormalized = palette.green.at(1); +const redComponent = palette.red.at(0); +const greenNormalized = palette.green.toUpperCase(); ``` `satisfies` can be used to catch lots of possible errors. @@ -92,15 +93,15 @@ In that case, we can also ensure that all of an object's property values conform type RGB = [red: number, green: number, blue: number]; const palette = { - red: "#ff0000", - green: [0, 255, 0], + red: [255, 0, 0], + green: "#00ff00", blue: [0, 0] // ~~~~~~ error! } satisfies Record; // Information about each property is still maintained. -const redComponent = palette.red.toUpperCase(); -const greenNormalized = palette.green.at(1); +const redComponent = palette.red.at(0); +const greenNormalized = palette.green.toUpperCase(); ``` For more examples, you can see the [issue proposing this](https://github.com/microsoft/TypeScript/issues/47920) and [the implementing pull request](https://github.com/microsoft/TypeScript/pull/46827).