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

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'. 

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? 

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 

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];

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

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

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

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

1. TypeScript Object Types

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

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'.

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'. 

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

Thanks for keeping up with the reading.

Happy coding! 🚀🚀🚚🚚🚚