CI/CD para projetos TypeScript: GitHub Actions do A ao Z

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

CI/CD para projetos TypeScript: GitHub Actions do A ao Z

O desenvolvimento moderno em TypeScript é impossível sem automação rápida e confiável. Testes manuais, build e deploy não são apenas demorados, mas também propensos a erros. É aqui que entra o CI/CD (Continuous Integration / Continuous Deployment) — uma prática que permite verificar e implantar seu código automaticamente. Neste artigo, vamos detalhar como configurar um pipeline completo de CI/CD para projetos TypeScript usando GitHub Actions — desde a configuração básica até cenários avançados.

O que é CI/CD e por que um desenvolvedor TypeScript precisa dele?

CI/CD é uma metodologia que combina duas práticas:

Continuous Integration (CI) — build e teste automáticos do código a cada push no repositório. Isso permite detectar bugs e conflitos rapidamente.
Continuous Deployment/Delivery (CD) — deploy automático da aplicação no servidor ou na nuvem após a aprovação nos testes.

Para projetos TypeScript, o CI/CD é especialmente importante, pois o TypeScript é compilado para JavaScript, e erros de tipos ou configuração podem aparecer apenas na etapa de build. GitHub Actions é uma ferramenta integrada do GitHub que permite criar workflows diretamente no repositório.

Passo 1: Workflow básico para projeto TypeScript

Vamos começar com algo simples — crie um arquivo .github/workflows/ci.yml na raiz do seu projeto. Este workflow será executado a cada push na branch main ou ao criar um Pull Request.

name: CI Pipeline

on:  push:    branches: [ main ]  pull_request:    branches: [ main ]

jobs:  build-and-test:    runs-on: ubuntu-latest

    strategy:      matrix:        node-version: [18.x, 20.x]

    steps:      - uses: actions/checkout@v4      - name: Use Node.js ${{ matrix.node-version }}        uses: actions/setup-node@v4        with:          node-version: ${{ matrix.node-version }}          cache: 'npm'      - run: npm ci      - run: npm run build --if-present      - run: npm test      - run: npm run lint --if-present

Vamos analisar os pontos-chave:

actions/checkout — clona o repositório no runner.
actions/setup-node — instala o Node.js com cache de dependências.
npm ci — instalação limpa de dependências (mais rápida que npm install).
npm run build — compilação de TypeScript para JavaScript (certifique-se de ter o script build no package.json).
npm test — execução de testes (ex.: Jest).

A matriz strategy.matrix permite testar o código em várias versões do Node.js simultaneamente — isso aumenta a confiança na compatibilidade.

Passo 2: Adicionando linting e formatação

A qualidade do código é uma parte importante do CI. Vamos adicionar etapas para ESLint e Prettier. Certifique-se de que eles estão instalados no projeto:

npm install --save-dev eslint prettier eslint-config-prettier

Vamos complementar nosso workflow com novas etapas:

      - run: npm run lint      - run: npm run format:check

No package.json devem existir os scripts correspondentes:

{  "scripts": {    "lint": "eslint src --ext .ts",    "format:check": "prettier --check \\"src/**/*.ts\\"",    "format": "prettier --write \\"src/**/*.ts\\""  }}

Agora, a cada push, o GitHub Actions verificará não apenas tipos e testes, mas também o estilo do código. Se o linter encontrar erros — o pipeline falhará e o desenvolvedor receberá uma notificação.