Advanced Type Typescript 💻
TypeScript is a statically typed language that extends JavaScript by adding optional types to your code. While basic TypeScript provides powerful features like type annotations, interfaces, and type inference. This post focuses on leveraging the full potential of TypeScript's advanced type system to enhance code quality and maintainability.
1
2
3
4
5
6
7
8
// Basic TypeScript
function greet(name: string): string {
return `Hello, ${name}!`;
}
// Advanced TypeScript
type Greeting = (name: string) => string;
const greet: Greeting = (name) => `Hello, ${name}!`;Advanced Type System
The Advanced TypeScript type system comprises various powerful types that allow developers to create sophisticated data structures and handle complex type transformations. Union types, intersection types, conditional types, and mapped types are some of the key features.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Union Types
type Pet = "dog" | "cat" | "bird";
// Intersection Types
interface Employee {
id: number;
name: string;
}
interface Role {
role: string;
}
type EmployeeRole = Employee & Role;
// Conditional Types
type IsString<T> = T extends string ? true : false;
type Result = IsString<string>; // Result is true
// Mapped Types
type Person = {
firstName: string;
lastName: string;
};
type ReadonlyPerson = {
readonly [K in keyof Person]: Person[K];
};Generics
TypeScript generics enable writing flexible and reusable functions and classes that can work with various data types without sacrificing type safety. Generics use type parameters to create generic data structures and algorithms.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Generic Function
function identity<T>(arg: T): T {
return arg;
}
const numValue = identity<number>(42); // Type of numValue is number
// Generic Class
class Box<T> {
value: T;
constructor(value: T) {
this.value = value;
}
}
const stringBox = new Box<string>("Hello");
const numberBox = new Box<number>(42);Enums and Literal Types
Enums provide a structured way to work with a set of constant values. Literal types allow narrowing down types based on specific values, which aids in type checking.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Enums
enum Color {
Red = "RED",
Green = "GREEN",
Blue = "BLUE",
}
enum Color2 {
Red, // Red = 0
Green, // Grenn = 1
Blue, // Blue = 2
}
function getColorName(color: Color): string {
return color;
}
// Literal Types
type PaymentMethod = "credit_card" | "paypal" | "bank_transfer";
function processPayment(method: PaymentMethod): void {
console.log(`Processing payment via ${method}`);
}Intersection Types and Mixins
Intersection types combine multiple types into a single type, enabling code reuse and extensibility. Mixins are reusable classes that can be combined with other classes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Intersection Types
interface Person {
name: string;
}
interface Employee {
role: string;
}
type EmployeeProfile = Person & Employee;
// Mixins
class Base {
protected logMessage(message: string): void {
console.log(`[Base]: ${message}`);
}
}
class Timestamped extends Base {
protected logMessage(message: string): void {
const timestamp = new Date().toISOString();
console.log(`[Timestamped]: ${timestamp} - ${message}`);
}
}
class ExtendedClass extends Timestamped {
someMethod(): void {
this.logMessage("Hello from ExtendedClass");
}
}
const instance = new ExtendedClass();
instance.someMethod();Conclusion:
TypeScript offers powerful type systems, generics, enums, and additional utilities to developers. Developers may build cleaner, type-safe, and maintainable code by exploiting these capabilities. As your TypeScript expertise increases, you'll be better prepared to handle challenging development issues with confidence. Have fun coding!