Tag Archives: classes

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.

ES 6 – Feat import/export 

Chega de teoria! #1 – import/export

Continuando a saga para conhecer as novas features do ES6, projetadas para nos ajudar no desenvolvimento de nossos apps. Vamos lá:

Hoje o ES6 apresenta o recurso OO Class, import/export. Estes carinhas que tem a principal função de importar/exportar classes.

Index.js

Modo Simples

Classe pessoa, onde cada pessoa tem um nome:

// developer.js
export class Developer {
  constructor(name) {
    this._name = name
  }

  get name() {
    return this._name
  }
}

Note que basta criar a classe com o export na frente.

Agora para importá-la:

import { Developer } from 'developer'
const dev = new Developer('Aldo')
dev.name // 'Aldo'

Default

É comum exportar apenas uma função/classe por arquivo. Nesse caso podemos utilizar a exportação default:

// square.js
export default function (x) {
  return x * x
}

Uma vantagem agora é o cliente (que realizar o import) deve setar o nome do módulo como quiser:

import square from 'square'
square(2) // 4

Então é isso treine bastante, e fiquei familiarizado com estes novos recursos.

Ok! Sobre as FEATURES do ES6.