Typescript

🧠 TypeScript vs JavaScript

• TypeScript не заменяет JavaScript, а расширяет его
• TS помогает писать строже, надёжнее и понятнее, но исполняется всё равно JavaScript.
• TypeScript — надстройка, улучшенный опыт разработчика, а не новый язык выполнения. ⚙️

⚰️ Миф о "смерти" JavaScript

• 💬 В сообществе часто говорят: «JavaScript мёртв, все пишут на TypeScript».
• 🤔 Но по факту TypeScript не исполняется — он компилируется в JavaScript.
• 🚫 Нет движков, которые могли бы выполнять TypeScript напрямую.
• ✅ Конечный язык, который запускает браузер или Node.js — JavaScript.

💡 Что делает TypeScript полезным

TypeScript = JavaScript + строгая типизация.

• Он не заменяет, а дополняет JS:

• 🔍 помогает писать менее ошибочный код;

• 🧩 делает код структурным и предсказуемым;

• ⚡ ускоряет разработку за счёт автодополнения и подсказок IDE;

• 🧠 снижает «ментальную нагрузку» при чтении и поддержке проектов.

  ❗

  TypeScript — это не новый язык, а инструмент, который делает разработчика лучше. 🧑‍💻

🧮 Компиляция и транспиляция

• 🧩 Транспиляция — превращение языка в похожий язык (TS → JS).
• 🧱 Компиляция — более общий процесс (TS → машинный код / другой язык).
• В контексте TS эти термины почти синонимы.
• 📜 Конфиг tsconfig.json сообщает, что и как компилировать.

🧭 Node.js vs Браузер

💬 Разница между Compile-time и Runtime

⚙️ Как работает TypeScript

1. ✍️ Пишем код на .ts (TypeScript).
2. 🧩 Компилятор tsc превращает TS → JS.
3. 🚀 Запускаем полученный JS в браузере или Node.js.

Процесс:

TypeScript → (TSC) → JavaScript → (V8 Engine) → Выполнение.

🧰 Настройка проекта под TypeScript

1. Создаём проект:

npm init -y
npm install -D typescript
npx tsc --init

2. Настраиваем tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2023",
    "module": "ES2022",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true
  }
}

3. Структура проекта:

📦 my-project
 ┣ 📂 src
 ┃ ┗ 📜 index.ts
 ┣ 📂 dist
 ┃ ┗ 📜 index.js
 ┣ 📜 package.json
 ┗ 📜 tsconfig.json

4. Запуск компиляции и кода:

npx tsc -w
node --watch dist/index.js

🧱 Базовые типы данных

let age: number = 25
let name: string = "Dmitry"
let isDev: boolean = true

• ⚠️ any — тип «всё что угодно». Использовать только осознанно.
• ✅ Лучше использовать точные типы (string, number, boolean, null, undefined).

🔍 Неявная типизация (Type Inference)

let a = 10 // TypeScript понимает: a — number
a = "Hello" // ❌ ошибка: нельзя присвоить строку числу

🧩 Объединение типов и Type Guards — защита типов

Позволяет переменной иметь несколько возможных типов:

let selectedTrackId: string | null = null
 
export function run() {
  if (selectedTrackId !== null) {
    console.log(selectedTrackId.toUpperCase())
  }
}

• Проверка selectedTrackId !== null сузила тип до string внутри блока.
• Такие проверки называются Type Guards — «охранники типов». 🛡️

🧱 Типизация объектов

type AuthorType = {
  name: string
  age: number
}
 
type TrackType = {
  title: string
  author: AuthorType
}
 
const author: AuthorType = {
  name: "Dmitry",
  age: 30,
}
const track: TrackType = {
  title: "Track title",
  author: {
    name: "it-kamasutra",
    age: 30,
  },
}
 
console.log(track.author.name)

🗃️ Типизация массивов

// два равнозначных способа:
let numbers: number[] = [1, 2, 3]
let numbers2: Array<number> = [1, 2, 3]
 
// массив с объектами
let tracks: Array<TrackType | null> = [
  {
    title: "",
    author: {
      name: "",
      age: 12,
    },
  },
  null,
]

⚙️ Типизация функций

function sum(a: number, b: number): number {
  return a + b
}
 
function logMessage(message: string): void {
  console.log(message)
}

• (): void — функция ничего не возвращает.
• (a: number, b: number): number — принимает 2 числа, возвращает число.

🧩 Типизация «пропсов»

type PropsType = {
  value: string
  onChange: () => void
  onSelect: (trackId: string) => void
}
 
function Component(props: PropsType) {
  props.onChange()
  return "Value: " + props.value
}
 
console.log(
  Component({
    value: "hello",
    onChange: () => {
      console.log("onChange")
    },
    onSelect: (trackId: string) => {
      console.log("onSelect")
    },
  }),
)

🚫 Типичные ошибки новичков

🧩 Связь с React и реальными проектами

💬 TypeScript и React — идеальное сочетание для современного фронтенда.

Все современные React-проекты создаются с поддержкой TypeScript: 🛠️ Vite, ⚛️ Create React App (CRA), 🌐 Next.js и другие.

TypeScript помогает:

• 🔹 Типизировать props, state, context и hooks;

• 🧩 Ловить ошибки при передаче данных между компонентами;

• 📝 Документировать компоненты прямо через типы (интерфейсы и type);

• ⚡ Автоматизировать автодополнение и навигацию по коду в IDE;

• 🧠 Сделать код самодокументируемым и предсказуемым.

  💡

  Хорошо типизированный компонент проще поддерживать, безопаснее использовать и легче тестировать.

🚀 Зачем это всё

TypeScript нужен не ради моды, а ради качества кода и скорости разработки. ⚙️

• 💪 Меньше ошибок — строгая типизация ловит проблемы до запуска.
• 🧭 Понятный и предсказуемый код — проще читать, поддерживать и масштабировать.
• ⚡ Быстрее разработка — автоподсказки и вывод типов экономят время.
• 🔍 IDE помогает, а не мешает — редактор знает типы и подсказывает верные варианты.
• 🧱 Большие проекты становятся управляемыми — кодовая база остаётся стабильной, даже при росте команды.

🏁 Итог

🏠 Домашнее задание

🎯 Цель задания:

Закрепить понимание того, как TypeScript дополняет JavaScript, что происходит на этапе компиляции, и научиться уверенно типизировать примитивы, объекты, массивы, функции и React-компоненты.

1. Типизация примитивов

Отработай аннотации базовых типов: строки, числа, булевы значения, any и объединение со значением null.

Задача 1.1

Добавь явные типы к переменным

let language: XXX = "TypeScript"
let version: XXX = 5.4
let isStableRelease: XXX = false

Задача 1.2

Добавь явный тип к переменной

let data: XXX = "text"
data = 42
data = true
data = { key: "value" }

Задача 1.3

Добавь явный тип к переменной

let userName: XXX = "Alice"
userName = null

2. Типизация объектов

Научись описывать форму объектов.

Задача 2.1

Опиши тип книги (BookType) с названием, автором, количеством страниц и статусом публикации

type BookType = XXX
 
const book: BookType = {
  title: "Clean Code",
  author: "Robert Martin",
  pages: 464,
  isPublished: true,
}

Задача 2.2

Опиши тип курса (CourseType) с названием, вложенным объектом инструктора (имя и рейтинг), продолжительностью в часах и статусом доступности.

type CourseType = XXX
 
const course: CourseType = {
  title: "JS for beginners",
  instructor: {
    name: "Ivan Ivanov",
    rating: 4.9,
  },
  duration: 52,
  isAvailable: true,
}

3. Типизация массивов

Попрактикуйся с однотипными массивами, объединениями элементов и записью Array<T>.

Задача 3.1

Определи типизацию для массива, содержащего значения продолжительности в миллисекундах.

const durations: XXX = [120, 240, 360]

Задача 3.2

Опиши тип автомобиля (CarType) с брендом, моделью, годом выпуска и ценой

type CarType = XXX
 
const cars: YYY = [
  {
    brand: "Toyota",
    model: "Camry",
    year: 2022,
    price: 25000,
  },
  {
    brand: "BMW",
    model: "X5",
    year: 2023,
    price: 60000,
  },
  {
    brand: "Tesla",
    model: "Model 3",
    year: 2024,
    price: 45000,
  },
]

Задача 3.3

Опиши тип покупки (PurchaseType ) с названием товара, количеством, вложенным объектом магазина (название и город), и общей суммой

type PurchaseType = XXX
 
const purchases: YYY = [
  {
    productName: "Laptop",
    quantity: 1,
    store: {
      name: "TechShop",
      city: "Moscow",
    },
    totalPrice: 75000,
  },
  {
    productName: "Mouse",
    quantity: 2,
    store: {
      name: "ElectroWorld",
      city: "Saint Petersburg",
    },
    totalPrice: 3000,
  },
  {
    productName: "Keyboard",
    quantity: 1,
    store: {
      name: "TechShop",
      city: "Moscow",
    },
    totalPrice: 5000,
  },
]

4. Типизация функций

Отработай типизацию функций

Задача 4.1

Добавь типы к параметрам и возвращаемому значению функции, которая вычисляет площадь прямоугольника.

function calculateArea(width: XXX, height: XXX): XXX {
  return width * height
}

Задача 4.2

Типизируй функцию логирования этапа сборки

function greetUser(name: string): XXX {
  console.log(`Hello, ${name}!`)
}

Задача 4.3

Типизируй функцию, которая проверяет режим strict и возвращает строку с сообщением.

const getModeMessage = (isStrict: XXX): XXX => {
  return isStrict ? "Strict mode on" : "Strict mode off"
}

Задача 4.4

Типизируй функцию поиска пользователя по ID, которая принимает число и массив объектов пользователей, а возвращает объект пользователя или undefined, если пользователь не найден.

type User = {
  id: number
  name: string
  email: string
}
 
function findUserById(userId: XXX, users: YYY): ZZZ {
  return users.find((user) => user.id === userId)
}
 
const users: User[] = [
  { id: 1, name: "Alice", email: "alice@mail.com" },
  { id: 2, name: "Bob", email: "bob@mail.com" },
]
 
const result = findUserById(1, users)

5. Типизация props в React

Закрепи типизацию компонентов

Задача 5.1

Опиши типы пропсов для React-компонента карточки продукта, который принимает название, цену, доступность и описание.

type ProductCardProps = XXX
 
function ProductCard({ title, price, isAvailable, description }: ProductCardProps) {
  return (
    <div>
      <h2>{title}</h2>
      <p>Price: ${price}</p>
      <p>Status: {isAvailable ? "In Stock" : "Out of Stock"}</p>
      <p>{description}</p>
    </div>
  )
}
 
// Пример использования
// <ProductCard
//   title="Laptop"
//   price={1200}
//   isAvailable={true}
//   description="High performance laptop"
// />

Задача 5.2

Опиши типы пропсов для React-компонента кнопки задачи, который принимает текст задачи, статус выполнения, опциональный приоритет и обязательную callback-функцию для изменения статуса задачи.

type TaskButtonProps = XXX
 
function TaskButton({ text, isCompleted, priority, onStatusChange }: TaskButtonProps) {
  return (
    <div>
      <button onClick={() => onStatusChange(!isCompleted)}>
        {isCompleted ? "✓" : "○"} {text}
      </button>
      <span>Priority: {priority}</span>
    </div>
  )
}
 
// Пример использования
// <TaskButton
//   text="Review code"
//   isCompleted={false}
//   priority="high"
//   onStatusChange={(newStatus) => console.log("New status:", newStatus)}
// />

Задача 5.3

Опиши типы пропсов для React-компонента карточки пользователя, который принимает имя, email, статус активности и два обязательных callback'а: один для редактирования пользователя, другой для его удаления.

type UserCardProps = XXX
 
function UserCard({ name, email, isActive, onEdit, onDelete }: UserCardProps) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Email: {email}</p>
      <p>Status: {isActive ? "Active" : "Inactive"}</p>
      <button onClick={() => onEdit(email)}>Edit</button>
      <button onClick={() => onDelete(email)}>Delete</button>
    </div>
  )
}
 
// Пример использования
// <UserCard
//   name="John Doe"
//   email="john@example.com"
//   isActive={true}
//   onEdit={(email) => console.log("Editing user:", email)}
//   onDelete={(email) => console.log("Deleting user:", email)}
// />