- Sep 2023
-
dmarcly.com dmarcly.com
-
a tuple { selector, private key, public key } is created
-
-
en.wikipedia.org en.wikipedia.org
-
A record can be viewed as the computer analog of a mathematical tuple, although a tuple may or may not be considered a record, and vice versa, depending on conventions and the specific programming language.
-
-
en.wikipedia.org en.wikipedia.org
-
Most typed functional programming languages implement tuples directly as product types
Tags
Annotators
URL
-
- Mar 2023
-
bugzilla.mozilla.org bugzilla.mozilla.org
Tags
Annotators
URL
-
-
twitter.com twitter.com
-
button.dev button.dev
-
button.dev button.dev
-
button.dev button.dev
-
babeljs.io babeljs.io
-
Thanks to a collaboration with Bloomberg, Babel now supports transforming the "Records and Tuples" stage 2 proposal.The Babel plugin transforms records and tuples syntax using the global Record and Tuple functions:
Records and Tuples support (#12145)
<table><tbody style="width:100%;display:table;table-layout:fixed"><tr><th>Input</th><th>Output</th></tr><tr><td><div class="language-js codeBlockContainer_mQmQ theme-code-block" style="--prism-color: #4d4d4c; --prism-background-color: #fdfaeb;"><div class="codeBlockTitle_x_ju">JavaScript</div><div class="codeBlockContent_D5yF">
<div class="buttonGroup_aaMX"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_z5j7" aria-hidden="true"><svg class="copyButtonIcon_FoOz" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_L0B6" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></td><td><div class="language-js codeBlockContainer_mQmQ theme-code-block" style="--prism-color: #4d4d4c; --prism-background-color: #fdfaeb;"><div class="codeBlockTitle_x_ju">JavaScript</div><div class="codeBlockContent_D5yF"><span class="token-line" style="color: rgb(77, 77, 76);"><span class="token keyword" style="color: rgb(137, 89, 168);">let</span><span class="token plain"> data </span><span class="token operator">=</span><span class="token plain"> #</span><span class="token punctuation">{</span><span class="token plain"></span><br></span><span class="token-line" style="color: rgb(77, 77, 76);"><span class="token plain"> </span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color: rgb(113, 140, 0);">"Babel"</span><span class="token punctuation">,</span><span class="token plain"></span><br></span><span class="token-line" style="color: rgb(77, 77, 76);"><span class="token plain"> </span><span class="token literal-property property">ids</span><span class="token operator">:</span><span class="token plain"> #</span><span class="token punctuation">[</span><span class="token number" style="color: rgb(245, 135, 31);">1</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token number" style="color: rgb(245, 135, 31);">2</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token number" style="color: rgb(245, 135, 31);">3</span><span class="token punctuation">]</span><span class="token plain"></span><br></span><span class="token-line" style="color: rgb(77, 77, 76);"><span class="token plain"></span><span class="token punctuation">}</span><span class="token punctuation">;</span><br></span>
<div class="buttonGroup_aaMX"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_z5j7" aria-hidden="true"><svg class="copyButtonIcon_FoOz" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_L0B6" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></td></tr></tbody></table><span class="token-line" style="color: rgb(77, 77, 76);"><span class="token keyword" style="color: rgb(137, 89, 168);">let</span><span class="token plain"> data </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color: rgb(66, 113, 174);">Record</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token plain"></span><br></span><span class="token-line" style="color: rgb(77, 77, 76);"><span class="token plain"> </span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color: rgb(113, 140, 0);">"Babel"</span><span class="token punctuation">,</span><span class="token plain"></span><br></span><span class="token-line" style="color: rgb(77, 77, 76);"><span class="token plain"> </span><span class="token literal-property property">ids</span><span class="token operator">:</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color: rgb(66, 113, 174);">Tuple</span><span class="token punctuation">(</span><span class="token number" style="color: rgb(245, 135, 31);">1</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token number" style="color: rgb(245, 135, 31);">2</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token number" style="color: rgb(245, 135, 31);">3</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token plain"></span><br></span><span class="token-line" style="color: rgb(77, 77, 76);"><span class="token plain"></span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></span>
Tags
Annotators
URL
-
-
medium.com medium.com
-
Tags
Annotators
URL
-
-
fjolt.com fjolt.com
-
If we want to create an immutable, read only Tuple in Typescript, we can use the readonly keyword when defining our Tuple.
ts const myArray:readonly[number, string] = [10, 'test']; -
Unlike the tuple type in vanilla Javascript, Typescript Tuples by default are mutable - so they can be changed. As such, we can update a Tuple by simply referring to the element we want to update, and redefining it, assuming it isn't a constant:
Mutating a Typescript Tuple
```ts let myTuple:[ string, number ] = [ "some", 15 ]
myTuple[1] = 20; ```
-
We can also define an array of Tuples in Typescript. This is done by adding [] to the end of our Tuple type definition:
ts let myTuple:[ string, number ][] = [ [ "some", 15 ], [ "other", 20 ], [ "tuple", 50 ] ];
Tags
Annotators
URL
-
-
sebastienlorber.com sebastienlorber.com
-
The Records & Tuples proposal will enforce immutability, and prevent common state mutation mistakes:
```js const Hello = ({ profile }) => { // prop mutation: throws TypeError profile.name = 'Sebastien updated';
return
Hello {profile.name}
; };function App() { const [profile, setProfile] = React.useState(#{ name: 'Sebastien', });
// state mutation: throws TypeError profile.name = 'Sebastien updated';
return <Hello profile={profile} />; } ```
-
-
twitter.com twitter.com
Tags
Annotators
URL
-
-
tc39.es tc39.es
Tags
Annotators
URL
-
-
tc39.es tc39.es
Tags
Annotators
URL
-
-
tc39.es tc39.es
Tags
Annotators
URL
-
-
www.proposals.es www.proposals.es
-
Record
``js const proposal = #{ id: 1234, title: "Record & Tuple proposal", contents:...`, // tuples are primitive types so you can put them in records: keywords: #["ecma", "tc39", "proposal", "record", "tuple"], };// Accessing keys like you would with objects! console.log(proposal.title); // Record & Tuple proposal console.log(proposal.keywords[1]); // tc39
// Spread like objects! const proposal2 = #{ ...proposal, title: "Stage 2: Record & Tuple", }; console.log(proposal2.title); // Stage 2: Record & Tuple console.log(proposal2.keywords[1]); // tc39
// Object functions work on Records: console.log(Object.keys(proposal)); // ["contents", "id", "keywords", "title"] ```
Tuple
```js const measures = #[42, 12, 67, "measure error: foo happened"];
// Accessing indices like you would with arrays! console.log(measures[0]); // 42 console.log(measures[3]); // measure error: foo happened
// Slice and spread like arrays! const correctedMeasures = #[ ...measures.slice(0, measures.length - 1), -1 ]; console.log(correctedMeasures[0]); // 42 console.log(correctedMeasures[3]); // -1
// or use the .with() shorthand for the same result: const correctedMeasures2 = measures.with(3, -1); console.log(correctedMeasures2[0]); // 42 console.log(correctedMeasures2[3]); // -1
// Tuples support methods similar to Arrays console.log(correctedMeasures2.map(x => x + 1)); // #[43, 13, 68, 0] ```
Tags
Annotators
URL
-
- Aug 2021
-
stackoverflow.com stackoverflow.com
-
the tuple() function you need can be succinctly written as: export type Lit = string | number | boolean | undefined | null | void | {}; export const tuple = <T extends Lit[]>(...args: T) => args;
-
const list = ['a', 'b', 'c'] as const; // TS3.4 syntax type NeededUnionType = typeof list[number]; // 'a'|'b'|'c';
-
possible to tell the compiler to infer the type of a tuple of literals as a tuple of literals, instead of as, say, string[], by using the as const syntax.
-
Or, maybe better, interpret the list as a tuple type: const list: ['a','b','c'] = ['a','b','c']; // tuple
-