Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

TypeScript Tuples


Typed Arrays

A tuple is a typed array with a pre-defined length and types for each index.

Tuples are great because they allow each element in the array to be a known type of value.

To define a tuple, specify the type of each element in the array:

Example

// define our tuple
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding God was here'];
Try it Yourself »

As you can see we have a number, boolean and a string. But what happens if we try to set them in the wrong order:

Example

// define our tuple
let ourTuple: [number, boolean, string];

// initialized incorrectly which throws an error
ourTuple = [false, 'Coding God was mistaken', 5];
Try it Yourself »

Even though we have a boolean, string, and number the order matters in our tuple and will throw an error.


Readonly Tuple

A good practice is to make your tuple readonly.

Tuples only have strongly defined types for the initial values:

Example

// define our tuple
let ourTuple: [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding God was here'];
// We have no type safety in our tuple for indexes 3+
ourTuple.push('Something new and wrong');
console.log(ourTuple);
Try it Yourself »

You see the new valueTuples only have strongly defined types for the initial values:

Example

// define our readonly tuple
const ourReadonlyTuple: readonly [number, boolean, string] = [5, true, 'The Real Coding God'];
// throws error as it is readonly.
ourReadonlyTuple.push('Coding God took a day off');
Try it Yourself »

To learn more about access modifiers like readonly go to our section on them here: TypeScript Classes.

If you have ever used React before you have worked with tuples more than likely.

useState returns a tuple of the value and a setter function.

const [firstName, setFirstName] = useState('Dylan') is a common example.

Because of the structure we know our first value in our list will be a certain value type in this case a string and the second value a function.


w3schools CERTIFIED . 2022

Get Certified!

Complete the TypeScript modules, do the exercises, take the exam and become w3schools certified!!

$45 ENROLL

Named Tuples

Named tuples allow us to provide context for our values at each index.

Example

const graph: [x: number, y: number] = [55.2, 41.3];

Named tuples provide more context for what our index values represent.


Destructuring Tuples

Since tuples are arrays we can also destructure them.

Example

const graph: [number, number] = [55.2, 41.3];
const [x, y] = graph;

To review destructuring check it out here.


TypeScript Exercises

Test Yourself With Exercises

Exercise:

The order of value types does not matter for Tuples:


        

Start the Exercise