Skip to content

Latest commit

 

History

History
500 lines (358 loc) · 9.03 KB

Typescript.md

File metadata and controls

500 lines (358 loc) · 9.03 KB
Raw

Guia de Estudos TypeScript

Este guia de estudos abrange tópicos essenciais de TypeScript, desde conceitos básicos até funcionalidades avançadas. Utilize este guia como um mapa para sua jornada de aprendizado em TypeScript.

Índice

  1. Introdução ao TypeScript
  2. Configuração do Ambiente
  3. Tipos Básicos
  4. Interfaces e Tipos
  5. Funções
  6. Classes
  7. Enums
  8. Generics
  9. Manipulação de Módulos
  10. Decorators
  11. Manipulação de Tipos Avançados
  12. Configuração do tsconfig.json
  13. Integração com Bibliotecas JavaScript
  14. Boas Práticas
  15. Ferramentas e Recursos

Introdução ao TypeScript

TypeScript é uma linguagem de programação de código aberto desenvolvida pela Microsoft. É um superconjunto de JavaScript que adiciona tipagem estática opcional e recursos avançados de desenvolvimento.

Configuração do Ambiente

Instalação do TypeScript

npm install -g typescript

Compilando Arquivos TypeScript

tsc arquivo.ts

Configurando um Projeto TypeScript

tsc --init

Tipos Básicos

Tipos Primitivos

let nome: string = 'João';
let idade: number = 25;
let ativo: boolean = true;
let indefinido: undefined = undefined;
let nulo: null = null;

Arrays e Tuplas

let numeros: number[] = [1, 2, 3];
let lista: Array<number> = [1, 2, 3];

let tupla: [string, number];
tupla = ['Olá', 10];

Enum

enum Cor {
  Vermelho,
  Verde,
  Azul
}

let cor: Cor = Cor.Verde;

Any e Unknown

let valor: any = 'Olá';
valor = 10;

let desconhecido: unknown = 4;
if (typeof desconhecido === "number") {
  let numero: number = desconhecido;
}

Interfaces e Tipos

Interfaces

interface Pessoa {
  nome: string;
  idade: number;
}

let pessoa: Pessoa = { nome: 'João', idade: 30 };

Tipos

type Pessoa = {
  nome: string;
  idade: number;
}

let pessoa: Pessoa = { nome: 'João', idade: 30 };

Diferenças entre Interface e Tipo

  • Interfaces podem ser extendidas e implementadas por classes.
  • Tipos podem representar tipos primitivos, uniões, interseções e tuplas.

Funções

Tipagem de Parâmetros e Retorno

function saudacao(nome: string): string {
  return `Olá, ${nome}!`;
}

Funções Anônimas

let saudacao = function (nome: string): string {
  return `Olá, ${nome}!`;
};

Arrow Functions

let saudacao = (nome: string): string => `Olá, ${nome}!`;

Parâmetros Opcionais e Padrão

function construirNome(primeiroNome: string, ultimoNome?: string): string {
  return `${primeiroNome} ${ultimoNome || ''}`;
}

Classes

Declaração de Classes

class Pessoa {
  nome: string;
  idade: number;

  constructor(nome: string, idade: number) {
    this.nome = nome;
    this.idade = idade;
  }

  saudacao(): string {
    return `Olá, meu nome é ${this.nome}`;
  }
}

let joao = new Pessoa('João', 30);

Herança

class Funcionario extends Pessoa {
  cargo: string;

  constructor(nome: string, idade: number, cargo: string) {
    super(nome, idade);
    this.cargo = cargo;
  }

  saudacao(): string {
    return `Olá, meu nome é ${this.nome} e eu sou um ${this.cargo}`;
  }
}

Modificadores de Acesso

class Pessoa {
  private nome: string;
  protected idade: number;
  public cargo: string;

  constructor(nome: string, idade: number, cargo: string) {
    this.nome = nome;
    this.idade = idade;
    this.cargo = cargo;
  }

  public saudacao(): string {
    return `Olá, meu nome é ${this.nome}`;
  }
}

Enums

Declaração de Enums

enum DiaDaSemana {
  Domingo,
  Segunda,
  Terça,
  Quarta,
  Quinta,
  Sexta,
  Sábado
}

let hoje: DiaDaSemana = DiaDaSemana.Sexta;

Enums de String

enum Cor {
  Vermelho = "Vermelho",
  Verde = "Verde",
  Azul = "Azul"
}

let cor: Cor = Cor.Verde;

Generics

Funções Genéricas

function identidade<T>(valor: T): T {
  return valor;
}

let numero = identidade<number>(10);
let texto = identidade<string>('Olá');

Classes Genéricas

class Caixa<T> {
  conteudo: T;

  constructor(conteudo: T) {
    this.conteudo = conteudo;
  }

  getConteudo(): T {
    return this.conteudo;
  }
}

let caixaDeString = new Caixa<string>('Texto');
let caixaDeNumero = new Caixa<number>(123);

Manipulação de Módulos

Exportação e Importação

Exportação

// arquivo: saudacao.ts
export function saudacao(nome: string): string {
  return `Olá, ${nome}!`;
}

Importação

// arquivo: app.ts
import { saudacao } from './saudacao';

console.log(saudacao('João'));

Exportação Padrão

Exportação

// arquivo: saudacao.ts
export default function saudacao(nome: string): string {
  return `Olá, ${nome}!`;
}

Importação

// arquivo: app.ts
import saudacao from './saudacao';

console.log(saudacao('João'));

Decorators

Decorators de Classe

function logarClasse(construtor: Function) {
  console.log(`Classe criada: ${construtor.name}`);
}

@logarClasse
class Pessoa {
  constructor(public nome: string) {}
}

Decorators de Método

function logarMetodo(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const metodoOriginal = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Método ${propertyKey} chamado com argumentos: ${JSON.stringify(args)}`);
    return metodoOriginal.apply(this, args);
  };
}

class Pessoa {
  constructor(public nome: string) {}

  @logarMetodo
  saudacao(mensagem: string): string {
    return `${mensagem}, ${this.nome}`;
  }
}

Manipulação de Tipos Avançados

Union Types

let id: number | string;
id = 10;
id = 'ABC123';

Intersection Types

interface Pessoa {
  nome: string;
}

interface Funcionario {
  salario: number;
}

type FuncionarioDetalhado = Pessoa & Funcionario;

let funcionario: FuncionarioDetalhado = { nome: 'João', salario: 1000 };

Type Guards

function exibirID(id: number | string) {
  if (typeof id === 'string') {
    console.log(`ID: ${id.toUpperCase()}`);
  } else {
    console.log(`ID: ${id}`);
  }
}

Type Assertions

let valor: any = 'Olá';
let tamanho: number = (valor as string).length;

Configuração do tsconfig.json

Exemplo Básico

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Opções Comuns

  • target: Define a versão do ECMAScript para a qual o código será compilado.
  • module: Define o sistema de módulos (commonjs, es6, etc.).
  • strict: Ativa todas as verificações de tipo estritas.
  • esModuleInterop: Melhora a compatibilidade com módulos

ES.

  • skipLibCheck: Ignora a verificação de tipos em arquivos de declaração.
  • forceConsistentCasingInFileNames: Garante a consistência de maiúsculas/minúsculas nos nomes dos arquivos.

Integração com Bibliotecas JavaScript

Instalando Tipos de Bibliotecas

npm install @types/lodash

Exemplo com Lodash

import * as _ from 'lodash';

let numeros = [1, 2, 3, 4, 5];
let soma = _.sum(numeros);
console.log(soma);

Boas Práticas

  • Usar Tipagem Estrita: Aproveite o máximo possível a verificação de tipos do TypeScript.
  • Escrever Código Limpo e Legível: Mantenha o código organizado e fácil de entender.
  • Documentação e Comentários: Use comentários para explicar partes complexas do código.
  • Usar Interfaces e Tipos: Utilize interfaces e tipos para descrever a forma dos objetos.
  • Escrever Testes: Garanta a funcionalidade do código através de testes automatizados.

Ferramentas e Recursos

Ferramentas

  • TypeScript: Site Oficial
  • tslint: Ferramenta de linting para TypeScript
  • Visual Studio Code: Editor com excelente suporte a TypeScript

Recursos

Este guia é um ponto de partida. Explore cada tópico, pratique e aprofunde seus conhecimentos para se tornar um desenvolvedor TypeScript proficient. Boa sorte!