DEV Community

Cover image for No-Primitives data type in TypeScript
Birusha Ndegeya
Birusha Ndegeya

Posted on

No-Primitives data type in TypeScript

No-Primitive Type in TypeScript

Hello there 👋! I am Birusha Ndegeya.

Now you feel comfortable with those number, string and boolean data. now it time to move to some complex data types which are:
✅ arrays,
✅ object,
✅ tuples,
✅ enums,
✅ type,
✅ interface &
✅ enums.

I you want to play around the starter code you can visit my github project learn-typescript-data-type and switch to branch array-object-tuple-enum.

ARRAY

To create an array we need to create a variable that hold the data

// to create an empty array to takes any values
const arr: any [] = [10, true, "banana"];

console.log(arr); // output: 10, true, banana

Enter fullscreen mode Exit fullscreen mode
  1. String Array

const names: string[] = [];
names.push("Dylan"); // no error
// names.push(3); // Error: Argument of type 'number' is not assignable to parameter of type 'string'. 

Enter fullscreen mode Exit fullscreen mode

Readonly

The readonly keyword can prevent arrays from being changed.

const names: readonly string[] = ["Dylan"];
names.push("Jack"); // Error: Property 'push' does not exist on type 'readonly string[]'.
// try removing the readonly modifier and see if it works? 
Enter fullscreen mode Exit fullscreen mode
  1. Type inference

TypeScript can infer the type of an array if it has values.

const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error
// comment line below out to see the successful assignment
numbers.push("2"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.
let head: number = numbers[0]; // no error 
Enter fullscreen mode Exit fullscreen mode
  1. TypeScript Tuple

Known as 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:


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

// initialize correctly
ourTuple1 = [5, false, 'Coding God was here'];
S
// define our tuple
let ourTuple2: [number, boolean, string];

// initialized incorrectly which throws an error
ourTuple2 = [false, 'Coding God was mistaken', 5];

Enter fullscreen mode Exit fullscreen mode

Readonly Tuple


// 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');


let tuple: readonly [number, boolean];
/*
tuple.push(10);
tuple.push(true);

Throws an error
*/

// tuple = [10, true];

console.log(tuple);

Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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.

Named Tuples

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


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

console.log(graph);


Enter fullscreen mode Exit fullscreen mode

Destructuring Tuples

Since tuples are arrays we can also destructure them.
Example

const graph: [number, number] = [55.2, 41.3];
const [x, y] = graph;
console.log(x, y);
Enter fullscreen mode Exit fullscreen mode
  1. TypeScript Object Types

const car: { type: string, model: string, year: number } = {
  type: "Toyota",
  model: "Corolla",
  year: 2009
};

Enter fullscreen mode Exit fullscreen mode

TypeScript can infer the types of properties based on their values.


const car = {
  type: "Toyota",
};
car.type = "Ford"; // no error
car.type = 2; // Error: Type 'number' is not assignable to type 'string'.

Enter fullscreen mode Exit fullscreen mode

Index signatures can be used for objects without a defined list of properties.

const nameAgeMap: { [index: string]: number } = {};
nameAgeMap.Jack = 25; // no error
nameAgeMap.Mark = "Fifty"; // Error: Type 'string' is not assignable to type 'number'. 
Enter fullscreen mode Exit fullscreen mode

Now, if you need a starter code, you can visit my GitHub profile.

Thanks for keeping up with the reading.

Happy coding! 🚀🚀🚚🚚🚚

Top comments (0)