Як використовувати TypeScript у програмі Full-Stack

TypeScript — це потужна мова, яка додає статичну типізацію до JavaScript, що робить її чудовим вибором для створення надійних програм із повним стеком. Ця стаття містить вичерпний посібник з інтеграції TypeScript як у інтерфейс, так і в серверну частину програми з повним стеком.

Налаштування TypeScript для інтерфейсу

Щоб використовувати TypeScript у зовнішній програмі, виконайте такі дії:

1. Ініціалізація нового проекту: Створіть новий проект за допомогою інтерфейсу, наприклад React або Angular. Для цього прикладу створіть додаток React.

npx create-react-app my-app --template typescript

2. Встановити TypeScript: Якщо TypeScript ще не встановлено, додайте його до проекту.

npm install typescript @types/react @types/react-dom

3. Налаштувати TypeScript: Переконайтеся, що файл tsconfig.json правильно налаштовано для проекту React. Він має бути згенерований автоматично, але за потреби його можна налаштувати.
4. Напишіть код TypeScript: Почніть писати компоненти та інший код у TypeScript. Наприклад:

import React from 'react';

interface Props {
  title: string;
}

const Header: React.FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

export default Header;

Інтеграція TypeScript у Backend

Щоб використовувати TypeScript у серверній програмі з Node.js, виконайте такі дії:

1. Ініціалізація нового проекту: Створіть новий проект Node.js.

mkdir my-backend
cd my-backend
npm init -y

2. Встановіть TypeScript і Typings: Додайте TypeScript і необхідні визначення типів.

npm install typescript @types/node ts-node --save-dev

3. Налаштувати TypeScript: Створіть файл tsconfig.json, щоб налаштувати параметри TypeScript.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}

4. Напишіть код TypeScript: Напишіть серверний код у TypeScript. Наприклад:

import express from 'express';

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

Підключення Frontend і Backend

У додатку з повним стеком інтерфейс зв’язується з сервером через HTTP-запити. Переконайтеся, що TypeScript використовується узгоджено з обох сторін, щоб забезпечити безпеку типів у стеку.

• Визначте контракти API: Використовуйте інтерфейси або типи TypeScript, щоб визначити та застосувати форму даних, якими обмінюються між інтерфейсом і сервером.
• Приклад контракту API:

// In frontend
interface User {
  id: number;
  name: string;
}

// In backend
interface User {
  id: number;
  name: string;
} 
// Ensure both frontend and backend use the same contract

Переваги використання TypeScript у повній розробці

• Type Safety: TypeScript допомагає виловлювати помилки під час компіляції, зменшуючи помилки під час виконання та покращуючи якість коду.
• Покращений досвід розробника: Розширена підтримка IDE та автозавершення роблять розробку швидшою та ефективнішою.
• Узгоджена кодова база: Використання TypeScript як на інтерфейсі, так і на сервері забезпечує узгодженість структур даних та інтерфейсів.

Висновок

Інтеграція TypeScript у програму з повним стеком підвищує надійність і зручність обслуговування кодової бази. Дотримуючись кроків, описаних для налаштування інтерфейсу, і серверу, розробники можуть повністю скористатися перевагами статичної типізації TypeScript і створювати більш надійні програми.