Tag Archives: JS

TypeScript [O mais simples do mundo]

TypeScript

Continuando a saga para nos familiarizar com TypeScript.

A missão de hoje é aprender como desenvolver nosso primeiro programa TypeScript simples, o HelloWorld mais simples do mundo, incluindo alguns de seus conceitos básicos. Vamos lá:

Como este projeto não irá guardar dados, e sim, apenas um console exibindo uma informação.

HelloWorld_console

Este é o resultado final da App em execução.

APP.TS

Implemente:

class HelloWorldTS{
    constructor(public message: string)
    {        
    }
}

var saudacao = new HelloWorldTS("This is TS")
console.log(saudacao.message);

Primeiro eu declaro minha classe para criar uma mensagem. Em seguida, defino um construtor que deve receber uma string.

Depois eu crio um objeto e defino uma string no construtor da classe.

Finalmente, mostro a mensagem utilizando o método message.

Classes

Aqui temos o conceito de classes no TS, exatamente, a mesmo ideia de uma classe em qualquer linguagem OO.

As classes TS seguem o padrão ECMAScript 6 (em teoria será o “futuro do JS”). Note também que a classe tem uma sintaxe familiar com C#.

Em detalhes:

  • O construtor é definido pela palavra constructor.
  • Métodos não necessitam da palavra function, basta ().

Exemplo HelloWorld Transpilado

Neste outro exemplo disponível no site, temos uma visão mais completa do HelloWorld.

hello_world2

Declaro minha classe, defino uma propriedade e o seu construtor que recebe uma string, e defino também o método greet que possui apenas um retorno.

Não esqueça! O browser só conhece o JS e não o TS, neste caso ele irá transpilar do .TS para o .JS.

helloworld

Note no exemplo, não foi definido a visibilidade das propriedades da classe, nem o tipo de retorno do método greet. Mas, é possível definir estes parâmetros.

Pronto! Agora temos um HelloWorld TS criada.

Agora é só compilar e testar a APP.

Next stop TS. Disambarke on the left.