Este é a segunda de uma série de postagens sobre TypeScrip, a linguagem que vem mudando o jeito de programar JavaScript. Para que você possa acompanhar melhor este texto, sugiro que leia o primeiro da série: TypeScript, ame ou nem ligue, que traz coisas básicas sobre o TS, ensinando como instalar, executar, tipos de variáveis, etc.
Continuando…
Se você sempre teve dúvida de como usar orientação a objetos em JavaScript, TypeScript pode resolver sua vida, lhe dando a possibilidade de usar classes, interfaces, métodos e atributos com níveis de visibilidade, herança, etc.
Classes
A definição de classes no TypeScript segue o mesmo padrão de outras linguagens de programação, e tem grande semelhança com C#.
class Greeter { private greeting: string; constructor(message: string) { this.greeting = message; } public greet():string { return "Hello, " + this.greeting; } } let greeter = new Greeter("world"); console.log(greeter.greet());
Foi declarada a classe Greeter com um atributo chamado greeting, um método construtor e o método greet que tem um retorno do tipo String. Você pode definir também a visibilidade doe atributos e métodos assim como em outras linguagens de programação, usando private, public ou protected.
Também no exemplo acima criamos uma instancia da classe Greeter, e depois chamamos um método da classe.
Herança
Para se herdar métodos e atributos de uma classe para outra, como você pode imaginar, basta usar extends. Se um método da classe pai for subscrito na classe filha, você pode chamar o método da classe pai usando super, como vemos a seguir:
//Classe pai class Animal { name: string; constructor(theName: string) { this.name = theName; } move(distanceInMeters: number = 0) { console.log(`${this.name} moved ${distanceInMeters}m.`); } } //Classe filha class Snake extends Animal { constructor(name: string) { super(name); } move(distanceInMeters = 5) { super.move(distanceInMeters); } }
Veja que é usado super na classe Snake para chamar um método da classe Animal de quem ela herda, mas subscreve o método.
Acessors (get/set)
TypeScript suporta getters/setters que são usados para acesso a atributos protegidos da classe.
Criando uma propriedade ou atributo como private, você deve ter um método get e um método set para alterar os valores desse atributo. Como no exemplo a baixo:
class Pessoa { private _name: string; get name(): string { return this._name; } set name(p : string) { this._name = p; } } var p = new Pessoa(); //Instanciando classe p.name = "123456"; //set console.log(p.name); //get
No exemplo acima se o método set não existir a linha 14 retorna um erro. E se get não existir, a linha 15 retorna undefined.
Classes Abstratas
Classes abstratas servem como base para a construção de outras classes, dando-lhes a estrutura padrão de métodos e atributos.
Os métodos marcados com abstratc na classe abstrata deve ser implementado na classe filha. Veja exemplo:
abstract class Department { constructor(public name: string) { } printName(): void { console.log('Department name: ' + this.name); } abstract printMeeting(): void; // tem que ser implementado nas classes filhas } class AccountingDepartment extends Department { constructor() { super('Accounting and Auditing'); // constructors in derived classes must call super() } printMeeting(): void { console.log('The Accounting Department meets each Monday at 10am.'); } generateReports(): void { console.log('Generating accounting reports...'); } } var department = new AccountingDepartment(); // ok to create and assign a non-abstract subclass department.printName(); department.printMeeting(); department.generateReports();
Perceba que na classe abstrata Departament o método printMeeting foi declarado como abstrato, por isso na classe filha que é AccountingDepartment ele precisa ser implementado. Enquanto o método printName, da classe Pai não precisa ser implementado na classe filho.
Interfaces
Uma interface também define a estrutura das classes que a implementam, mas a diferença em relação às Classes Abstratas é que todos os métodos e atributos devem ser implementados de alguma forma, a não ser quando você definir o atributo como opcional, como vemos a seguir:
interface Point{ x: number; y: number; z?: number; showX(); } class Point3d implements Point{ x: number = 1; y: number = 2; showX() { console.log(this.x) } } var point = new Point3d(); point.showX();
Note que o atributo z na interface Point está marcado com um ? que sinaliza que ele é opcional. Note também que na classe Point3d o atributo z não é implementado.
Continua…
Por hoje é só. Para ver mais acesse a documentação do TypeScript. E continue nos acompanhando.
No próximo post veremos como executar TypeScript direto no browser sem a necessidade de compilar antes.
Não deixe de acompanhar nossa série sobre TypeScript.
Há um erro no site: “Os métodos marcados com abstratc na classe abstrata deve ser implementado na classe filha. Veja exemplo:”
ABSTATC ???