Deep Dive into TypeScript: Arrays, Unions, Tuples, Enums, and Interfaces
Arrays in TypeScript:
Arrays are used to store multiple values of the same type in a sequential order.
Example 1:
const names: string[] = [];
names.push("Dylan"); // No error
// names.push(3); // Error: Argument of type 'number' is not assignable to parameter of type 'string'
Example 2:
const names: Array<string> = [];
names.push("Dylan"); // No error
// names.push(3); // Error: Argument of type 'number' is not assignable to parameter of type 'string'
Union Types:
In TypeScript, union types are untagged, allowing for a combination of two or more types of data.
Example 1:
let variable: string | number | boolean;
variable = 2; // No error
variable = 'a'; // No error
variable = true; // No error
Example 2:
let arr: (string | number)[] = [1, 2, "3"];
Example 3:
function getValue(val: number | string) {
return val.toLowerCase();
// Error: Property 'toLowerCase' does not exist on type 'number | string'.
}
Solution: Use generic templates or check typeof val
inside the function.
Literal Types:
Literal types allow specific strings or numbers in type positions.
Example 1:
let changingString = "Hello World"; // Type: string
let constantString = "Hello World"; // Type: "Hello World"
Example 2:
function printText(s: string, alignment: "left" | "right" | "center") {
// ...
}
printText("Hello, world", "left");
// Error: Argument of type '"bottom"' is not assignable to parameter of type '"left" | "right" | "center"'.
Tuples:
Tuples are specialized arrays with a fixed order, providing precise element types.
Example 1:
type StringNumberPair = [string, number];
Example 2:
function doSomething(pair: [string, number]) {
const a = pair[0]; // Type: string
const b = pair[1]; // Type: number
}
Destructuring Tuples:
function doSomething(stringHash: [string, number]) {
const [inputString, hash] = stringHash;
console.log(inputString); // Type: string
console.log(hash); // Type: number
}
Enums:
Enums define named constants, making it easier to document intent or restrict user choices.
Example 1:
enum SeatChoice {
AISLE,
MIDDLE,
WINDOW
}
const seat1 = SeatChoice.AISLE; // 0
const seat2 = SeatChoice.MIDDLE; // 1
const seat3 = SeatChoice.WINDOW; // 2
Example 2:
enum SeatChoice {
AISLE = 6,
MIDDLE,
WINDOW
}
const seat1 = SeatChoice.AISLE; // 6
const seat2 = SeatChoice.MIDDLE; // 7
const seat3 = SeatChoice.WINDOW; // 8
Interfaces:
Interfaces define the structure without implementing properties and methods.
Example 1:
interface User {
email: string;
userId: number;
getUser: () => string;
}
const person: User = { email: 'abc@gmail.com', userId: 8, getUser: () => 'user' };
Reopening Interfaces:
interface User {
name: string;
}
const person: User = { email: 'abc@gmail.com', name: 'abdul', userId: 8, getUser: () => 'user' };
Stay tuned for the next chapter: Interface vs Type in TypeScript: Unraveling the Differences. There's more to explore!