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.
- Introdução ao TypeScript
- Configuração do Ambiente
- Tipos Básicos
- Interfaces e Tipos
- Funções
- Classes
- Enums
- Generics
- Manipulação de Módulos
- Decorators
- Manipulação de Tipos Avançados
- Configuração do tsconfig.json
- Integração com Bibliotecas JavaScript
- Boas Práticas
- Ferramentas e Recursos
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.
npm install -g typescript
tsc arquivo.ts
tsc --init
let nome: string = 'João';
let idade: number = 25;
let ativo: boolean = true;
let indefinido: undefined = undefined;
let nulo: null = null;
let numeros: number[] = [1, 2, 3];
let lista: Array<number> = [1, 2, 3];
let tupla: [string, number];
tupla = ['Olá', 10];
enum Cor {
Vermelho,
Verde,
Azul
}
let cor: Cor = Cor.Verde;
let valor: any = 'Olá';
valor = 10;
let desconhecido: unknown = 4;
if (typeof desconhecido === "number") {
let numero: number = desconhecido;
}
interface Pessoa {
nome: string;
idade: number;
}
let pessoa: Pessoa = { nome: 'João', idade: 30 };
type Pessoa = {
nome: string;
idade: number;
}
let pessoa: Pessoa = { nome: 'João', idade: 30 };
- Interfaces podem ser extendidas e implementadas por classes.
- Tipos podem representar tipos primitivos, uniões, interseções e tuplas.
function saudacao(nome: string): string {
return `Olá, ${nome}!`;
}
let saudacao = function (nome: string): string {
return `Olá, ${nome}!`;
};
let saudacao = (nome: string): string => `Olá, ${nome}!`;
function construirNome(primeiroNome: string, ultimoNome?: string): string {
return `${primeiroNome} ${ultimoNome || ''}`;
}
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);
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}`;
}
}
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}`;
}
}
enum DiaDaSemana {
Domingo,
Segunda,
Terça,
Quarta,
Quinta,
Sexta,
Sábado
}
let hoje: DiaDaSemana = DiaDaSemana.Sexta;
enum Cor {
Vermelho = "Vermelho",
Verde = "Verde",
Azul = "Azul"
}
let cor: Cor = Cor.Verde;
function identidade<T>(valor: T): T {
return valor;
}
let numero = identidade<number>(10);
let texto = identidade<string>('Olá');
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);
// arquivo: saudacao.ts
export function saudacao(nome: string): string {
return `Olá, ${nome}!`;
}
// arquivo: app.ts
import { saudacao } from './saudacao';
console.log(saudacao('João'));
// arquivo: saudacao.ts
export default function saudacao(nome: string): string {
return `Olá, ${nome}!`;
}
// arquivo: app.ts
import saudacao from './saudacao';
console.log(saudacao('João'));
function logarClasse(construtor: Function) {
console.log(`Classe criada: ${construtor.name}`);
}
@logarClasse
class Pessoa {
constructor(public nome: string) {}
}
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}`;
}
}
let id: number | string;
id = 10;
id = 'ABC123';
interface Pessoa {
nome: string;
}
interface Funcionario {
salario: number;
}
type FuncionarioDetalhado = Pessoa & Funcionario;
let funcionario: FuncionarioDetalhado = { nome: 'João', salario: 1000 };
function exibirID(id: number | string) {
if (typeof id === 'string') {
console.log(`ID: ${id.toUpperCase()}`);
} else {
console.log(`ID: ${id}`);
}
}
let valor: any = 'Olá';
let tamanho: number = (valor as string).length;
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
- 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.
npm install @types/lodash
import * as _ from 'lodash';
let numeros = [1, 2, 3, 4, 5];
let soma = _.sum(numeros);
console.log(soma);
- 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.
- TypeScript: Site Oficial
- tslint: Ferramenta de linting para TypeScript
- Visual Studio Code: Editor com excelente suporte a TypeScript
- Documentação Oficial: TypeScript Docs
- TypeScript Deep Dive: Livro Online
- TypeScript Handbook: Guia Oficial
Este guia é um ponto de partida. Explore cada tópico, pratique e aprofunde seus conhecimentos para se tornar um desenvolvedor TypeScript proficient. Boa sorte!