Назад к гайдам

TypeScript: Типизация в современной разработке

Frontend Средний Frontend JavaScript TypeScript
5 мин чтения 21 просмотров

# TypeScript: Типизация в современной разработке

## Введение

TypeScript - это надмножество JavaScript, добавляющее статическую типизацию. Это делает код более надежным и легким в поддержке.

## Установка

```bash
npm install -g typescript
tsc --init
```

## Базовые типы

```typescript
let name: string = "TypeScript";
let age: number = 30;
let isActive: boolean = true;
let items: string[] = ["item1", "item2"];
let user: { name: string; age: number } = { name: "John", age: 30 };
```

## Интерфейсы

```typescript
interface User {
id: number;
name: string;
email: string;
isActive?: boolean; // Опциональное поле
}

const user: User = {
id: 1,
name: "John",
email: "john@example.com"
};
```

## Дженерики

```typescript
function identity<T>(arg: T): T {
return arg;
}

const result = identity<string>("hello");
```

## Утилиты типов

```typescript
interface User {
id: number;
name: string;
email: string;
}

// Partial - все поля опциональны
type PartialUser = Partial<User>;

// Pick - выбрать определенные поля
type UserName = Pick<User, 'name'>;

// Omit - исключить поля
type UserWithoutId = Omit<User, 'id'>;
```

## TypeScript с React

```typescript
import React from 'react';

interface Props {
name: string;
age: number;
}

const Component: React.FC<Props> = ({ name, age }) => {
return <div>{name} - {age}</div>;
};
```

## Конфигурация

```json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
```

## Заключение

TypeScript значительно улучшает качество кода и разработки. Используйте его для больших проектов и командной работы.