Primeiras aulas do curso TypeScript parte 1: Evoluindo seu Javascript

TypeScript parte 1: Evoluindo seu Javascript

Bem começado, metade feito - Introdução

Sejam bem-vindos! Meu nome é Flávio Almeida (twitter: @flaviohalmeida) e muito provavelmente já nos encontramos em outros treinamentos aqui da Alura.

Este curso de TypeScript foi dividido em duas partes para tornar sua experiência ainda melhor. Não fique desconfiado caso esse ou aquele assunto não tenha sido abordado neste curso, pois muito provavelmente ele será abordado na segunda parte, aliás, um pouco mais puxado do que esta primeira. Isso foi intencional para tornar um treinamento mais agradável para aqueles que estão começando. Todavia, isso não exclui a necessidade dos pré-requisitos de cursos anteriores para que você possa ter uma boa experiência e ter um melhor aproveitamento.

Como Aristóteles dizia, "bem começado, metade feito". Vamos dar início ao nosso treinamento. Sucesso e bom estudo para todos.

Bem começado, metade feito - O projeto e sua estrutura

No exercício de infraestrutura obrigatório do capítulo baixamos o projeto alurabank que utilizaremos ao longo deste curso. Nossa aplicação permitirá o cadastro de novas negociações exibindo cada negociação cadastrada para o usuário através de uma tabela. Um escopo pequeno, mas nem por isso menos importante para aprender a linguagem TypeScript. Visualizando sua estrutura do projeto temos:

├── app
│   ├── css
│   │   ├── bootstrap-theme.css
│   │   └── bootstrap.css
│   ├── index.html
│   ├── js
│       ├── controllers
│       ├── helpers
│       ├── models
│       └── views
│   ├── lib
│   │   ├── jquery.min.js
│   │   ├── jquery.min.map
│   │   ├── system-polyfills.js
│   │   ├── system-polyfills.js.map
│   │   ├── system.js
│   │   └── system.js.map

Dentro da pasta alurabank/app/css os arquivos do Bootstrap que utilizaremos para aplicar um visual profissional em nossa aplicação com pouco esforço. Já a pasta alurabank/app/lib possui algumas bibliotecas JavaScript que utilizaremos ao longo do projeto. Por fim, o arquivo alurabank/app/index.html é nossa página de cadastro de negociações que já possui um formulário criado pelo Bootstrap, poupando-nos de termos que digitá-lo.

Como nossa aplicação lida com negociações, nada mais justo do que materializarmos uma negociação em nosso código através de uma classe, assunto do próximo vídeo.

Bem começado, metade feito - Modelando uma negociação

Todo projeto tem um ponto de partida, o nosso será criação de um modelo de negociação. Um modelo nada mais é do que uma abstração de algo do mundo real. Um exemplo de modelo é aquele criado por um analista de mercado, permitindo-o simular operações e até prever seu comportamento.

No domínio de uma bolsa de valores, uma negociação possui a seguinte especificação:

Agora que já temos informações suficientes, podemos dar início a materialização da especificação do modelo de negociação em nosso código. No paradigma orientado à objetos, utilizamos classes para essa finalidade.

A classe Negociação

Vamos criar o script que declarará nossa classe Negociacao na pasta app/js/models/Negociacao.js:

// app/js/models/Negociacao.js

class Negociacao {

    constructor(data, quantidade,  valor) {

        this._data = data;
        this._quantidade = quantidade;
        this._valor = valor;
    }

    get data() {

        return this._data;

    }

    get quantidade() {

        return this._quantidade;

    }

    get valor() {

        return this._valor;
    }

    get volume() {

        return this._quantidade * this._valor;
    }
}

Criamos uma especificação de uma negociação utilizando ES2015. Mas será que essa classe é fiel à especificação de uma negociação? Vejamos.

Vamos importar o script em app/index.html para que ele seja carregada.

<!-- client/index.html -->

<!-- código anterior omitido -->
        <script src="js/models/Negociacao.js"></script>
    </body>
<html>

Agora, vamos criar o arquivo app/js/app.js que será o ponto de entrada da nossa aplicação. Por enquanto, vamos criar apenas instâncias de negociações para testar nossa aplicação:

Por fim, não podemos esquecer de importá-lo em app/index.html:

<!-- client/index.html -->
<!-- código anterior omitido -->
        <script src="js/models/Negociacao.js"></script>
        <script src="js/app.js"></script>
    </body>
<html>

Vamos testar a primeira regra. Uma negociação obrigatoriamente deve ter uma data, quantidade e valor:

// app/js/app.js


let negociacao = new Negociacao(new Date(), 2, 100);
console.log(negociacao);

Perfeito, no Console vemos os dados da negociação preenchidos. Mas será que nossa especificação de Negociação segue fielmente das regras que vimos? É isso que veremos no próximo vídeo.

Sobre o curso TypeScript parte 1: Evoluindo seu Javascript

O curso TypeScript parte 1: Evoluindo seu Javascript possui 154 minutos de vídeos, em um total de 55 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda JavaScript acessando integralmente esse e outros cursos, comece hoje!

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana