Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

Programação Orientada a Objetos

Aula 02 - Classes, Atributos e Métodos

Material Didático do Instituto Metrópole Digital - IMD

Termo de uso

Os materiais didáticos aqui disponibilizados estão licenciados através de Creative Commons Atribuição-SemDerivações-

SemDerivados CC BY-NC-ND. Você possui a permissão para realizar o download e compartilhar, desde que atribua os créditos do

autor. Não poderá alterá-los e nem utiliza-los para fins comerciais.

Atribuição-SemDerivações-SemDerivados

CC BY-NC-ND

https://creativecommons.org/licenses/by-nc-nd/4.0/

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 1

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

Apresentação
Nesta aula, você vai estudar mais detalhadamente um dos principais conceitos da
Programação Orientada a Objetos – a Classe. Vai aprender também como se
representa esse conceito na linguagem TypeScript, além de criar características e
comportamentos para uma classe através dos atributos e métodos.

Objetivos
Entender a teoria sobre Classe;
Entender em detalhes uma classe codificada usando a linguagem TypeScript;
Criar atributos e métodos em classes Java.

Classe
Link do video da aula: https://youtu.be/S3YIMpoKqwM

Revisando o Conceito de Classe

Você viu que objetos são entidades concretas que possuem características e
comportamentos bem definidos, e que eles podem ser organizados em grupos de
características e comportamentos comuns. Esses grupos são chamados de classe.
Porém, a classe não serve para organizar no sentido de guardar os objetos, ela
serve de modelo de construção.

Resumindo:

O modelo define as características e comportamentos que os objetos irão

determinar, seus valores e suas ações, respectivamente;
A classe é o modelo ou molde de construção de objetos;
A classe é abstrata (não existe concretamente).

Implementação de uma Classe em TypeScript

A figura representa a implementação de uma classe em TypeScript. Para declarar
uma classe em TypeScript, utilizamos a palavra reservada class seguida do nome
da classe e, entre chaves, o corpo da classe.

Perceba que não inserimos no código nada sobre o comportamento dos carros,
como andar para frente ou para trás, virar à esquerda/direita, frear etc. Veremos
isso um pouco mais à frente.

Devemos ter em mente que a linguagem de programação é uma representação do

mundo sob um ponto de vista. Você se lembra do paradigma? Esse ponto de vista
ou paradigma é a orientação a objetos, porém, descrito nas Regras da Linguagem,

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 2

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

que no nosso caso é TypeScript.

Figura 1 - Implementação de uma classe em TypeScript

Declaração de Atributos
Na declaração dos atributos, devemos informar, além do nome, o tipo de dado que
ele deverá armazenar, como pode ser visto na figura acima.

Para definir o nome de um atributo, vamos utilizar no geral as seguintes regras:

Devem começar com uma letra ou com _ (note que NÃO podemos começar
com um número);
Podem conter letras, dígitos, _ e $ (note que NÃO podemos usar nem hífen
nem ponto);
O nome também não deve ser igual ao de um comando, uma classe, um
método, uma função ou de uma palavra reservada da linguagem, tais como:
class, number, while;
Espaços não são permitidos em nomes de variáveis;
Nomes de variáveis são sensíveis a letras minúsculas e maiúsculas. Em outras
palavras, dois atributos com nomes "placa" e "Placa", por exemplo, são
considerados dois atributos diferentes, chamamos isso de case sensitive;
Além disso, podemos utilizar um padrão chamado de Camel Case, que é a
prática de utilizar palavras compostas alternando as iniciais das palavras com
letra maiúscula ou minúscula.

Tipos de Dados
A respeito dos tipos de dados, vamos utilizar:

1. number: recebe valores numéricos de ponto flutuante ou inteiro;

2. string: recebe uma cadeia de caracteres alfanuméricos delimitados por aspas
ou apóstrofos;
3. boolean: valores lógicos true ou false;
4. enum: permite a definição de um conjunto de valores numéricos em que cada
elemento recebe uma identificação para maior legibilidade;
5. any: indica que qualquer tipo de dado pode ser atribuído à variável;
James Peter Gomes Da Silva Barbosa IMD/UFRN Página 3
Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

6. void: não é bem um tipo de dado, mas sim uma declaração de sua ausência,
utilizado na declaração de funções que não retornam um valor.

Adicionando Comportamentos
Os objetos das classes precisam não só de suas características, mas também de
comportamentos que expressem as ações possíveis de serem executadas, por
exemplo, um carro precisa oferecer funções para que as pessoas os manobrem.
Perceba que falamos das capacidades dinâmicas do objeto que serão executadas
através dos métodos.

Figura 2 - Adicionando comportamentos em TypeScript

Veja que na imagem acima adicionamos a palavra this antes do atributo cor. Essa
palavra-chave representa a instância da classe Carro e, particularmente neste caso,
está sendo usada para corrigir o problema de ambiguidade gerado pela definição de
um parâmetro com o mesmo nome do atributo da classe no método setCor(String
cor). Ao se usar a palavra cor dentro desse método, como saberíamos se estamos
referenciando o atributo da classe ou o parâmetro do método? Para solucionar esse
problema, usa-se a palavra reservada this antes do nome cor, informando que
estamos referenciando o atributo da classe e não o parâmetro do método.

Definição de Métodos
A definição dos métodos tem cinco partes básicas:

1. Tipo de acesso do método (public, private, protected);

2. Nome do método;
James Peter Gomes Da Silva Barbosa IMD/UFRN Página 4
Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

3. Tipo de retorno, o qual pode ser um objeto ou tipo primitivo;

4. Um ou mais parâmetros;
5. Corpo do método.

Figura 3 - Definição de métodos

Criando Objetos
O comando new Carro() cria uma instância da classe Carro, que também podemos
chamar de um objeto da classe Carro. Chamamos o método setCor para alterar a
cor do carro e o método getCor para recuperar/acessar o valor do atributo cor.

Figura 4 - Método setCor

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 5

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

Chamando os Métodos como Atributos

No TypeScript não precisamos chamar os métodos de forma explícita, por exemplo:
getCor ou setCor. Ele disponibiliza um recurso interessante, observe na figura
abaixo, nas linhas 7 e 11 do código que implementamos o método get e set com o
mesmo nome. Vejamos também que na linha 3 o nome do atributo foi alterado com
o acréscimo de um _ (underline) para ter nome diferente dos métodos.

Nas linhas 17 e 18, atribuímos um valor à cor do carro e acessamos esse valor
como se fosse um atributo da classe, mas na verdade chamamos um método.

Figura 5 - Implementação dos métodos get e set

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 6

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

Preparando o Ambiente de Execução

Link do video da aula: https://youtu.be/Ak01gpBZgDY

Ferramentas
Incialmente iremos instalar no computador o TypeScript que é a linguagem que
iremos utilizar e o Visual Code (VS Code), que é a IDE que iremos utilizar para
desenvolver, digitar os códigos em TypeScript e executá-los.

IDE, do inglês Integrated Development Environment ou Ambiente de

Desenvolvimento Integrado, é um programa de computador que reúne
características e ferramentas de apoio ao desenvolvimento de software
com o objetivo de agilizar este processo (Fonte:
https://pt.wikipedia.org/wiki/Ambiente_de_desenvolvimento_integrado).

Iremos Instalar o TypeScript através do npm , que é um gerenciador de pacotes do

node. O node é um ambiente de execução do JavaScript, ambiente server-side, ou
seja, do lado do servidor. Em nosso caso, iremos utilizar o ambiente node para
executar o TypeScript no terminal do computador, embora o node nos possibite
criar uma aplicação completa em TypeScript, no contexto desta disciplina iremos
utilizar como ambiente de execução dos nossos códigos.

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 7

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

Instalação no Ubuntu Linux

Link do video da aula: https://youtu.be/iKo4nqwnw5s

Ambiente de Instalação
1. Sistema Operacional Ubuntu Linux 16.04 LTS

Instalando o nodejs
1. Acessando o site do nodejs (https://nodejs.org/en/);
2. Clica em Other Downloads (https://nodejs.org/en/download/);
3. Clica em Installing Node.js via package manager
(https://nodejs.org/en/download/package-manager/);
4. Clica na opção da distribuição Linux que está sendo utilizada (Debian and
Ubuntu based Linux distributions);
5. Clica no link Node.js binary distributions
(https://github.com/nodesource/distributions/blob/master/README.md);
6. Clica na opção Installation instructions
(https://github.com/nodesource/distributions/blob/master/README.md#debinst
all);
7. Escolhe a versão do node que deseja utilizar e digita os seguintes comandos
no terminal do computador:

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

8. Para verificar a versão do node que foi instalada, digita o seguinte comando:

node -v

9. Para verificar a versão do npm:

npm -v

Instalando o TypeScript
1. Abre o terminal do linux e digita o seguinte comando

$ sudo npm install -g typescript

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 8

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

2. Para verificar a versão do TypeScript que foi instalada, digita o seguinte

comando:

tsc -v

Instalando o Visual Code

1. Acessa o site do Visual Code (https://code.visualstudio.com/);
2. Faz download do instalador .deb;
3. Clica na opção setup para seguir os passos da instalação
(https://code.visualstudio.com/docs/setup/setup-overview);
4. Clica na opção Linux (https://code.visualstudio.com/docs/setup/linux);
5. Utilizando o terminal do Ubuntu, acessa a pasta onde fez o download do
arquivo e digita o seguinte comando:

sudo apt install ./<file>.deb

Instalação no Microsoft Windows

Link do video da aula: https://youtu.be/2yyIy6JEhgM

Ambiente de Instalação
1. Microsoft Windows 7

Instalando o nodejs

1. Acessando o site do nodejs (https://nodejs.org/en/);

2. Clica na versão LTS e faz download do arquivo;

3. Após o download, abre a pasta onde salvou o arquivo e executa;

4. Clica em next até a opção install;

5. Clica em finish e a instalação está concluída;

6. Para verificar a versão do node que foi instalada, abre o prompt de comando e
digita o seguinte comando:

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 9

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

node -v

7. Para verificar a versão do npm:

npm -v

Instalando o TypeScript
1. Abre o prompt de comando do windows e digita o seguinte comando:

npm install -g typescript

2. Para verificar a versão do TypeScript que foi instalada, digita o seguinte

comando:

tsc -v

Instalando o Visual Code

1. Acessa o site do Visual Code (https://code.visualstudio.com/);
2. Clica na opção de download: Download for Windows;
3. Aguarda iniciar o download e escolhe a pasta para baixar o arquivo;
4. Após finalizar o download, acessa a pasta onde o arquivo foi salvo e executa
com dois cliques;
5. Clique em next até a opção install. Importante: lembrar de marcar a opção:
add to PATH (requires shell restart) e Create a desktop icon;
6. Após finalizar a instalação, verifica o ícone criado na área de trabalho e com
dois cliques abre a IDE.

Instalação no MacOS
Link do video da aula: https://youtu.be/2zPG5OI9QJ0

Ambiente de Instalação
1. Sistema Operacional macOS Mojave (v. 10.14.6)

Instalando o nodejs
1. Acessando o site do nodejs (https://nodejs.org/en/);
2. Clica na versão LTS e faz download do arquivo;
3. Após o download abre a pasta onde salvou o arquivo e executa;
James Peter Gomes Da Silva Barbosa IMD/UFRN Página 10
Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

4. Clica em continuar até a opção instalar;

5. Abre o terminal do macOS e digita o seguinte comando:

node -v

6. Para verificar a versão do npm:

npm -v

Instalando o TypeScript
1. Abre o terminal do macOS e digita o seguinte comando

$ sudo npm install -g typescript

2. Para verificar a versão do TypeScript que foi instalada, digita o seguinte

comando:

tsc -v

Instalando o Visual Code

1. Acessa o site do Visual Code (https://code.visualstudio.com/);
2. Clica na opção de download: Download for Mac;
3. Aguarda iniciar o download e escolhe a pasta para baixar o arquivo;
4. Após finalizar o download acessa a pasta onde o arquivo foi salvo e executa
com dois cliques;
5. Seleciona o arquivo Visual Studio Code move (arrasta) para dentro da pasta
Aplicativos;
6. Após finalizar a instalação, busca o Visual Code e executa.

Configurando o VSCODE
Link do video da aula: https://youtu.be/jT4-7C99870

Configuração
Você verá agora como configurar a IDE Visual Code e executar arquivos TypeScript
utilizando o terminal integrado na IDE. Para melhor organização dos arquivos
durante as nossas aulas, é importante que você crie uma pasta para cada aula.
Para abrir a pasta no Visual Code, clique em file, depois em open, procure a pasta
que você criou e clice em abrir.

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 11

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

Habiltar o Terminal Integrado

Para habilitar o terminal integrado na IDE, clica no menu Terminal e depois em New
Terminal

Figura 6 - Habilitando o terminal integrado na IDE

Transpilando e executando

Para executar o arquivo, digite o seguinte comando:

tsc exemplo.ts

Esse comando vai fazer o processo de transpiler, que criará um arquivo Javascript
(.js).

Para executar o arquivo, digita o comando:

node exemplo

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 12

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

Salvar Automático

Para manter o arquivo salvo evitando esquecimento por parte do programador na

hora de transpilar o arquivo, podemos configurar a IDE seguindo estes passos:

1. Menu Code
2. Preferences
3. Settings
4. TextEditor
5. Files
6. AutoSave e seleciona a opçãp AfterDelay

Figura 7 - Salvamento automático

Transpilando em modo observação

Execute o compilador (Transpiler) no modo de observação. Observe os arquivos de

entrada e caso ocorra alteração nos arquivos a recompilação é acionada. Para isso,
abra um novo terminal e execute o seguinte comando:

tsc - w

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 13

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

ou

tsc --watch

Para que essa opção funcione é necessário criarmos o arquivo de configuração do

TypeScript: tsconfig.json

No momento desta aula não será necessário adicionarmos as opções do tsconfig, no

decorrer da nossa disciplina você vai aprender mais a respeito desse arquivo.

Visualizando no Console do
Navegador
Link do video da aula: https://youtu.be/TfcB0_9EScs

Preparando arquivos do projeto

Para que seja possível visualizar a saída do console no navegador, é necessário
criarmos um projeto com um arquivo html e na tag <script></script> passarmos
o caminho do arquivo javascript.

Veja nas figuras 8 e 9 a estrutura do projeto:

Figura 8 - Estrutura do projeto

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 14

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

Segue abaixo o arquivo html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>TypeScript</title>
</head>
<body>

<script src="app/exemplo.js"></script>
</body>
</html>

O próximo passo é abrirmos o arquivo index.html no navegador e abrirmos o

console do navegador em Ferramentas do desenvolvedor; veja a figura 9 com o
console no navegador:

Figura 9 - Console do navegador

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 15

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

Configurando um servidor local

Você percebeu que para visualizar as alterações no navegar é necessário a cada
modificação atualizar a página, isso ocorre pelo fato de estarmos utilizando o
protoco filepara acesso a nossa página. Para corrigirmos isso, pode utilizar um
servidor local em nosso projeto. Em nossa disciplina iremos utilizar o live-server.

Seguem abaixo os passos para instalação e configuração do live-server:

1. Criar o arquivo package.json, este é um descritor do nosso projeto, onde

podemos configurar, além de informações sobre o projeto, scripts e
dependências. Para criar o arquivo, podemos digitar dentro da pasta raiz do
projeto o seguinte comando: npm init -y
2. Instalando o live-server: npm install -s live-server
3. Criando um script para executar o live-server em nosso projeto. No arquivo
package.json, em scripts acrescentar a seguinte linha: "start": "live-
server"
4. Executando o servidor: npm start

Versão final do package.json

{
"name": "AULA02",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "live-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"live-server": "^1.2.1"
}
}

Download do projeto

Clique aqui para download

Colocando em Prática o Conceito de

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 16

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

Classe
Link do video da aula: https://youtu.be/DfHubTMju1k

Prática
Neste exemplo você vai colocar em prática os conceitos vistos nesta aula. É
importante revisar os conceitos a respeito do transpiler utilizando o tsc -w. Para
executar o projeto, utilizamos o seguinte comando: tsc --target es5 classe.ts,
isso só é necessário pois não temos o arquivon tsconfig.json configurado
corretamente. Para não ser necessário utilizar --target e que o comando tsc -w
funcione corretamente, você pode adicionar o arquivo tsconfig.jsoncom a
seguinte configuração:

{
"compilerOptions": {
"target": "es5"
}
}

Classe Carro
class Carro{

modelo: string;
_cor: string;
placa: string;
numPortas: number;

get cor(): string{

return this._cor;
}

set cor(cor: string){

this._cor = cor;
}

let c = new Carro();

c.cor = "Vermelho"

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 17

Programação Orientada a Objetos Aula 2 - Classes, Atributos e Métodos

console.log(c.cor);

Download do arquivo

Clique aqui para download

Atividade 01
Crie uma classe Moto com atributos e métodos, utilize com base a classe carro.
Execute seu projeto visualizado no navegador utilizando o live-server.

Resumo
Olá! Nesta aula, você aprendeu mais detalhes sobre o conceito de classe e como
implementá-lo utilizando o TypeScript, implementou os conceitos de métodos de
acesso e aprendeu como criar instância de um objeto.

Preparamos o ambiente de execução instalando:

1. TypeScript
2. nodejs

Aprendeu como adicionar dependências no projeto acrescentando o live-server e,

por fim, como configurar o arquivo tsconfig.json e package.json

James Peter Gomes Da Silva Barbosa IMD/UFRN Página 18