Javascript

Classes no TypeScript

Neste artigo você aprenderá criar classes, implementar métodos e instanciar objetos no TypeScript usando a tipagem adequadamente.

há 2 anos 4 meses

Formação Desenvolvedor JavaScript
Conheça a formação em detalhes

Um dos principais recursos que utilizamos no paradigma de orientação a objetos são as classes, com elas podemos abstrair e criar representações do mundo real para o código. Com o TypeScript podemos utilizar as classes com os recursos de tipagem estática que ele oferece, diferente do JavaScript que trabalha com tipagem dinâmica.

Primeiramente, para criar as classes usamos a palavra reservada class seguida do nome da classe, como: class Pessoa{...}. Lembrando que para as classes é convenção usarmos o padrão PascalCase (todas as palavras iniciam com letra maiúscula).

class Pessoa{
 //propriedades
}

Propriedades das Classes no TypeScript

Cada classe possui propriedades, ou seja, atributos que correspondem aos dados do que ela representa, no TypeScript nós devemos criar essas propriedades com o tipo respectivo de cada uma, como o exemplo:

class Pessoa{
	nome: string;
	idade: number;
	estaVivo; boolean;
}

Como podemos ver no exemplo acima, declaramos três propriedades: nome, idade e estaVivo. Cada uma com seu respectivo tipo, sendo: string, number e boolean. Desta forma o TypeScript nos obriga a atribuir valores que correspondem ao tipo correto de cada propriedade.

Agora, após criar a nossa classe, é necessário criar uma instância de “Pessoa”, ou seja, um objeto que irá representar efetivamente uma pessoa. Porém, antes disso, vamos criar o método construtor, ele é que irá criar o nosso objeto com as propriedades necessárias. Podemos criá-lo desta forma:

class Pessoa {
	nome: string;
	idade: number;
	estaVivo: boolean;
	
	constructor(nome: string, idade: number, estaVivo: boolean){
		this.nome = nome;
		this.idade = idade;
		this.estaVivo = estaVivo;
	}
}

Assim, quando for necessário instanciar um objeto Pessoa, vamos passar os dados das propriedades:

class Pessoa {
	nome: string;
	idade: number;
	estaVivo: boolean;
	
	constructor(nome: string, idade: number, estaVivo: boolean){
		this.nome = nome;
		this.idade = idade;
		this.estaVivo = estaVivo;
	}
}

let pessoa = new Pessoa('Paulo', 0, true);

Logo, se passarmos um parâmetro com o tipo diferente do que declaramos nas propriedades de nossa classe, o TypeScript irá exibir um aviso:

Aviso paramentro com tipo diferente

Ao criar o objeto pessoa, podemos visualizar no console do navegador seus atributos utilizando um console.log(pessoa), desta forma vamos obter o seguinte resultado:

Objeto pessoa

Perfeito, temos um objeto instanciado da Classe Pessoa!

Nós também podemos acessar os atributos do objeto Pessoa diretamente, seguindo a sintaxe “objeto.atributo”:

Visualizar atributo do objeto pessoa

Métodos TypeScript

Podemos também ter os métodos, que são basicamente comportamentos da classe.

Node.js - Fundamentos
Curso Node.js - Fundamentos
Conhecer o curso

Nesta classe teremos os métodos nascer(), crescer(), morrer(), vamos implementá-las:

class Pessoa {
	nome: string;
	idade: number;
	estaVivo: boolean;
	
	constructor(nome: string, idade: number, estaVivo: boolean){
		this.nome = nome;
		this.idade = idade;
		this.estaVivo = estaVivo;
	}

	nascer(): void{
		console.log(`${this.nome} nasceu!`)
	}

	crescer(): void{
		this.idade++;
		console.log(`${this.nome} fez ${this.idade} ano(s)!`)
	}

	morrer(): void{
        this.idade = 0;
		console.log(`${this.nome} morreu!`)
	}
}

let pessoa = new Pessoa('Paulo', 0, true);

No método além do nome precisamos passar os parâmetros com os tipos respectivos e o retorno. Outro ponto que vale ressaltar, repare que ao utilizar os atributos dos métodos dentro da classe nós utilizamos o ‘this’, desse modo, para referenciar que são as propriedades da classe.

Por fim, podemos chamar os métodos e confirmar se o comportamento está correto:

class Pessoa {
	nome: string;
	idade: number;
	estaVivo: boolean;
	
	constructor(nome: string, idade: number, estaVivo: boolean){
		this.nome = nome;
		this.idade = idade;
		this.estaVivo = estaVivo;
	}

	nascer(): void{
		console.log(`${this.nome} nasceu!`)
	}

	crescer(): void{
		this.idade++;
		console.log(`${this.nome} fez ${this.idade} ano(s)!`)
	}

	morrer(): void{
        this.idade = 0;
		console.log(`${this.nome} morreu!`)
	}
}

let pessoa = new Pessoa('Paulo', 0, true);
pessoa.nascer();
pessoa.crescer();
pessoa.morrer();

Executando métodos da classe Pessoa

Conclusão

Neste artigo aprendemos a criar uma classe simples com atributos, métodos e instanciamos um objeto desta classe. Lembrando que este é só o começo, em relação às classes temos conceitos dos modificadores de acesso, herança, entre outros que veremos em breve :D

TypeScript - Fundamentos
Curso TypeScript - Fundamentos
Conhecer o curso

Por fim, caso queira aprender mais sobre TypeScript saiba que aqui na TreinaWeb temos o curso TypeScript - Fundamentos que possui 01h31 de vídeos e um total de 30 exercícios. Conheça também nossos outros cursos de TypeScript.

Veja quais são os tópicos abordados durante o curso de TypeScript - Fundamentos:

  • Compreender melhor as vantagens que a utilização do TypeScript pode trazer;
  • Utilizar a tipagem estática que o TypeScript traz;
  • Utilizar o conceito de type assertion;
  • Aplicar construção e desconstrução (ou decomposição) de objetos no TypeScript;
  • Aplicar conceitos típicos de orientação a objetos, como classes, métodos acessores, interfaces e herança com o TypeScript;
  • Verificar qual seria o código JavaScript que teria que ser produzido para se obter um efeito análogo à utilização do TypeScript.

Autor(a) do artigo

Wesley Gado
Wesley Gado

Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão.

Todos os artigos

Artigos relacionados Ver todos