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
- 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?
- 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
- 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);
- 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! 🚀🚀🚚🚚🚚
Top comments (0)