Here is a concise overview of TypeScript's main features translated into English:

Key Features of TypeScript

TypeScript is not a completely separate language but rather a superset of JavaScript. Its primary feature is its static typing system, which allows defining types for variables, functions, and objects during development. This significantly improves predictability and simplifies code maintenance. Below, we explore TypeScript's core features to equip you with the knowledge needed to start using it effectively.

TypeScript Basics

Data Types: Primitive and Custom

TypeScript provides various data types for working with variables. Primitive types include number for numeric values, string for text, boolean for logical values, null and undefined for missing values, symbol for unique identifiers, and bigint for arbitrary-precision integers. Choosing the appropriate type based on data characteristics is crucial.

Explicit Type Declarations for Variables

One of TypeScript’s key advantages is the ability to explicitly define variable types, enhancing code readability and adding a layer of safety. For example:

typescript

Копировать

let age: number = 25;
let name: string = 'John';
let isActive: boolean = true;

Here, we declare variables with number, string, and boolean types, making expected values clear.

Custom Data Types Example

TypeScript allows creating custom data types, such as through interfaces (explored further below). For example:

typescript

Копировать

type Point = {
x: number;
y: number;
};
let coordinates: Point = { x: 10, y: 20 };

Here, we define a Point type to represent coordinates, ensuring structured typing for objects with specific properties.

Working with Functions and Objects

Parameter Types and Function Return Values

TypeScript ensures code reliability and clarity by allowing explicit definition of parameter types and return values. This helps prevent errors and improves readability, especially in large projects.

Example with parameter types and return value:

typescript

Копировать

function addNumbers(a: number, b: number): number {
return a + b;
}
let result: number = addNumbers(10, 5);
console.log(result); // Output: 15

In this example, addNumbers takes two number parameters and returns a number. Specifying types ensures the function behaves as expected.

Using Interfaces to Describe Object Structures

Interfaces in TypeScript are a powerful mechanism for defining object structures, specifying property types and their expected values. This enhances code readability, maintainability, and static type checking.

Example using an interface:

typescript

Копировать

interface Person {
name: string;
age: number;
isStudent: boolean;
}
let student: Person = {
name: 'Alice',
age: 20,
isStudent: true,
};
function printPerson(person: Person): void {
console.log(`Name: ${person.name}, Age: ${person.age}, Student: ${person.isStudent}`);
}
printPerson(student);

Here, the Person interface defines the structure of an object, and the printPerson function accepts objects conforming to this structure.

Extending and Inheriting Interfaces

TypeScript allows interfaces to be extended or inherited, enabling the creation of complex type hierarchies. Inheritance lets a child interface inherit properties from a parent, while extension adds new properties without modifying the original.

Example of inheritance and extension:

typescript

Копировать

interface Shape {
color: string;
}
interface Circle extends Shape {
radius: number;
}
interface Rectangle extends Shape {
width: number;
height: number;
}
function draw(shape: Shape): void {
console.log(`Drawing a ${shape.color} shape`);
}
let myCircle: Circle = { color: 'blue', radius: 10 };
let myRectangle: Rectangle = { color: 'red', width: 20, height: 30 };
draw(myCircle); // Output: Drawing a blue shape draw(myRectangle); // Output: Drawing a red shape

Here, Circle and Rectangle inherit the color property from Shape, allowing flexible and clean type hierarchies.

Working with Classes and Inheritance

Creating Classes in TypeScript

TypeScript enhances JavaScript’s class-based object-oriented programming with static typing. Classes include properties, constructors, methods, and access modifiers.

Example of class creation:

typescript

Копировать

class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
displayInfo(): void {
console.log(`Name: ${this.name}, Age: ${this.age}`);
}
}
let person1: Person = new Person('John', 30);
person1.displayInfo(); // Output: Name: John, Age: 30

This defines a Person class with properties, a constructor, and a method to display information.

Using Constructors and Methods

Constructors initialize class objects, while methods define functionality.

Example with a constructor and methods:

typescript

Копировать

class Car {
brand: string;
model: string;
speed: number;
constructor(brand: string, model: string, speed: number) {
this.brand = brand;
this.model = model;
this.speed = speed;
}
displayInfo(): void {
console.log(`Brand: ${this.brand}, Model: ${this.model}, Speed: ${this.speed} km/h`);
}
accelerate(acceleration: number): void {
this.speed += acceleration;
console.log(`Accelerating... New speed: ${this.speed} km/h`);
}
}
let myCar: Car = new Car('Toyota', 'Camry', 120);
myCar.displayInfo(); // Output: Brand: Toyota, Model: Camry, Speed: 120 km/h myCar.accelerate(20); // Output: Accelerating... New speed: 140 km/h

This demonstrates how constructors and methods manage class data effectively.

Generics in TypeScript

Introduction to Generics

Generics allow creating components that work with various data types while maintaining type safety, enabling flexible and reusable code.

Example of a generic function:

typescript

Копировать

function identity<T>(value: T): T {
return value;
}
let result: number = identity<number>(42);
let stringValue: string = identity('Hello, TypeScript!');
let booleanValue: boolean = identity(true);

The identity function works with any type, specified explicitly or inferred automatically.

Generics in Classes

Generics can be used in classes to handle different data types safely.

Example:

typescript

Копировать

class Container<T> {
private data: T;
constructor(initialValue: T) {
this.data = initialValue;
}
getData(): T {
return this.data;
}
setData(newValue: T): void {
this.data = newValue;
}
}
let numberContainer = new Container<number>(42);
console.log(numberContainer.getData()); // Output: 42 let stringContainer = new Container<string>('Hello, Generics!');
console.log(stringContainer.getData()); // Output: Hello, Generics!

This Container class handles different data types while ensuring type safety.

Advanced TypeScript Features

Conditional Types

Conditional types allow defining types based on conditions, enabling dynamic type creation.

Example:

typescript

Копировать

type IsNumber<T> = T extends number ? true : false;
const result1: IsNumber<number> = true; // true, as number is a number type const result2: IsNumber<string> = false; // false, as string is not a number type const result3: IsNumber<boolean> = false; // false, as boolean is not a number type

This checks if a type is number, returning true or false accordingly.

Mapped Types

Mapped types create new types based on existing ones, transforming their properties.

Example:

typescript

Копировать

type ReadonlyProps<T> = {
readonly [P in keyof T]: T[P];
};
interface Person {
name: string;
age: number;
}
let readOnlyPerson: ReadonlyProps<Person> = { name: 'John', age: 30 };
readOnlyPerson.name = 'Alice'; // Error: 'name' is read-only

This creates a type with all properties set to read-only.

Conclusion

Key Benefits of TypeScript

• Static Typing: Detects errors during development, improving code reliability.
• Enhanced Tooling: Supports autocompletion, hints, and static analysis.
• Modern Features: Offers classes, interfaces, generics, and more for readable, maintainable code.
• JavaScript Compatibility: Seamlessly integrates with JavaScript libraries and frameworks.
• Strong Community: Backed by an active community with regular updates and support.

TypeScript empowers developers to build reliable, efficient web applications. To advance your skills:

• Explore advanced design patterns like Dependency Injection.
• Learn TypeScript integration with frameworks like Angular, React, or Vue.
• Stay updated with TypeScript’s latest features.