TypeScript's advanced type system gives developers powerful tools to express complex data relationships and write more reusable code. This post dives into type aliases, union and intersection types, generics, utility types like Partial and Readonly, and type narrowing techniques that make TypeScript truly powerful.
Type Aliases
Using Type Aliases, we can define a custom type. Let me show you how.
First, we create type keyword, then give our new type name called Employee:
type Employee = {
}
Inside Employee, we can define the properties and method an employee object should have. Let's create like below:
type Employeee = {
readyonly id: number,
name: string,
retire: (date: Date) => void
}
we can use the above Employee type in multiple places, eg:
type Employeee = {readyonly id: number,name: string,retire: (date: Date) => void}
let employee: Employee = {id: 1,name: "linn",retire: (date: Date) => {console.log(date)}}
Union Type
With union types, we can give a variable or a function parameter more than one type. So let's define a function for converting weight from kilograms to pounds. Pass one parameter called weight with annotate number or string like the one below:
function kgToLbs(weight: number | string) {}
We can give it number or string parameter to kgToLbs function :
kgToLbs(10)kgToLbs('10kg')
Nullable Types
By default, TypeScript is very strict about using null and undefined values. Because as we know, these values are a common source of bugs in our applications. Let's create one function :
function greet(name:string) {console.log(name.toUpperCase());}
greet(null);
This function is totally valid in javascript. But when we run our code will crush our application. That's why null and undefined are common sources of problems. By default, the TypeScript compiler stops us from using null or undefined values.
If we want to pass null or undefined values in parameters, we can use union operator like below:
function greet(name:string | null | undefined) {if(name) {console.log(name.toUpperCase());} else {console.log("hi");}}
greet(null);
Nullish Coalescing Operator
When we work with null or undefined values, we should fallback values by default.
In javascript we use ternary operator like below:
speed = value !== null || value !== undefined ? value : 30;
In TypeScript we can use nullish coalescing operator like below:
speed = speed ?? 30
Frequently Asked Questions
What are TypeScript generics?
TypeScript generics allow you to write reusable components and functions that work with multiple types while maintaining type safety, using type parameters like <T> that are filled in at call time.
What is the difference between union and intersection types in TypeScript?
A union type (A | B) means a value can be either type A or type B, while an intersection type (A & B) means a value must satisfy both type A and type B simultaneously.