Você está na página 1de 18

24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Front-end

Introdução a Typescript: o que é e como


começar?
maio 14, 2021 ·  2 Comments

Sabendo das limitações que o Javascript possui, Anders Hejlsberg, que também participou
da criação do C#, do Delphi, do Turbo Pascale da plataforma .NET, resolveu criar o
Typescript.

O objetivo era elevar o nível de código do JS, que era usado apenas do lado cliente e em
códigos pequenos.

Hoje, o cenário é outro, pois a possibilidade de aplicar uma arquitetura mais sólida e
melhores práticas de programação mudaram essa realidade.

O Javascript suporta o paradigma de Programação Orientada a Objetos graças ao


Typescript, podendo usar variáveis com tipos definidos, criar classes…

Hoje você vai entender como funciona o Typescript, suas diferenças e vantagens perante o
Javascript e porque você deveria usá-lo.
 

https://blog.geekhunter.com.br/introducao-a-typescript/ 1/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Conteúdo [
ocultar
]

1
O que é TypeScript
2
Qual a diferença entre TypeScript e JavaScript
3
Vantagens do Typescript
4
TypeScript: tipagem estática
4.1
Os tipos mais utilizados no TypeScript são:
5
TypeScript e a orientação a objetos
5.1
Classes
5.2
Herança
5.3
Encapsulamento
5.4
Classes abstratas
5.5
Interfaces
6
Instalação do Typescript
6.1
Verificando instalação
6.2
Começando a utilização
7
React TypeScript
8
Angular TypeScript
8.1
Instalação
9
Conclusão

O que é TypeScript

 

https://blog.geekhunter.com.br/introducao-a-typescript/ 2/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Representação do superset Typescript

Typescript é uma linguagem de código aberto desenvolvida pela Microsoft que foi
construída em cima do Javascript, que é muito difundido atualmente. Então esse
“superset” foi criado para adicionar recursos de tipagem estáticas à linguagem original.

Em outras palavras, temos todas as funcionalidades do Javascript no Typescript acrescidas


de várias outras funcionalidades que caracterizam o Typescript.

Embora Typescript seja um superset do Javascript, na hora de compilar o código, todo


Typescript é convertido/transpilado para Javascript.

A pessoa desenvolvedora que estiver escrevendo códigos em Typescript lidará com uma
sintaxe simplificada, mais clara e suportada por vários TaskRunners ou IDES, mas o seu
código voltará a ser JS após transpilado.

Isso se dá pelo browser não entender a sintaxe de outra linguagem de programação que
não seja Javascript.

Qual a diferença entre TypeScript e


JavaScript
 

https://blog.geekhunter.com.br/introducao-a-typescript/ 3/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Relação entre supeset Typescript e Javascript

Bom, já que TS nasceu de JS e veio para suprir algumas limitações, vou apresentar
algumas diferenças básicas entre os dois:

Características do Typescript Características do Javascript

Tipagem estática Tipagem dinâmica

Orientação a objetos Programação estruturada

Genéricos Funções

 Namespaces Prototypes 

https://blog.geekhunter.com.br/introducao-a-typescript/ 4/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Decorators Funções contrutoras

Nesse sentido, dizer que TypeScript é outra linguagem de programação diferente do


JavaScript não é verdade, pois tudo que o JavaScript oferece você pode ser usado dentro
de um código TypeScript e, na prática, a sintaxe JS é utilizada também.

Porém, o contrário não é verdade, se optar por JavaScript, as funcionalidades inerentes ao


TypeScript não poderão ser utilizadas, como a tipagem forte, por exemplo.

Essa é uma das grandes vantagens da utilização do TypeScript:

Os tipos nos fornecem uma maneira de descrever um objeto não só mais precisamente,
gerando uma documentação mais concisa, mas também uma validação do código em
tempo de compilação.

Vantagens do Typescript
A principal caraterística do TypeScript é sua tipagem forte, razão pela qual leva no seu
nome: type quer dizer tipo. Mas também há outro aspecto, a Orientação a Objetos.

O JavaScript, na maior parte do seu projeto de linguagem, não é tipado e a inferência de


tipo só vai até certo ponto. Daí uma necessidade maior de utilizar o TypeScript caso queira
suprir essas deficiências.

TypeScript: tipagem estática


No TypeScript, os tipos são inferidos de forma implícita, mas também podemos explicitar
o tipo. Por exemplo, no código abaixo explicitamos que o tipo da variável numeroQualquer
é do tipo number.

let numeroQualquer: number;

valor = 10.5;

 

https://blog.geekhunter.com.br/introducao-a-typescript/ 5/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Devido a tipagem estática, se tentarmos atribuir um valor do tipo string ao atributo


numeroQualquer, receberemos um erro.

let valor: number;

valor = ‘frase qualquer’; // não é válido

Vale ressaltar que o TypeScript não diferencia valores ponto flutuante (decimal) de valores
inteiros. Todos são tratados como sendo do tipo number.

No exemplo acima, a tipagem é explícita. Mas o TypeScript realiza a inferência de tipo. Por
exemplo, no código abaixo, quando atribuímos a string ‘Carpe Diem’ à variável fraseLegal,
implicitamente definimos que essa variável é do tipo string e, portanto, a linha de código
logo em seguida gerará um erro de compilação.

let fraseLegal = ‘Carpe Diem’;

fraseLegal = 98.5; // não é válido a atribuição do tipo number para um tipo


string.

 Tutorial: linting em TypeScript com ESLint

Os tipos mais utilizados no TypeScript são:

Number

É para todo e qualquer tipo de número, seja ele ponto flutuante ou inteiro.

String

Representa uma string costumeiramente conhecida em outras linguagens de


programação.
 

https://blog.geekhunter.com.br/introducao-a-typescript/ 6/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Boolean

Representa um valor booleano: true ou false.

Any

A tradução de Any é qualquer e, como sua tradução sugere, é um tipo que pode ser
modificado para qualquer outro tipo presente na linguagem, seja string, number, boolean
ou qualquer outra coisa.

Geralmente esse tipo de informação vem de uma API ou diretamente do usuário.

Array

Representa o tipo Array dentro da linguagem. É válido informar que podemos criar arrays
de duas formas dentro do TypeScript.

A primeira:

let list: number[ ] = [2, 3, 5, 7];

A segunda:

var list: Array<number> = [2, 3, 5, 7, 11]

Uma peculiaridade muito legal, porém não recomenda é fato de podermos definir um
array com tipos diferentes:

let array: [string, number];

x = [“Hello”, 10]; // Inicialização

 
Esse também é um tipo, chamado Tupla.

https://blog.geekhunter.com.br/introducao-a-typescript/ 7/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Existem outros tipos como:

Tuple

Como visto anteriormente, os tipos de tupla permitem expressar um array com um


número fixo de elementos cujos tipos são conhecidos, mas não precisam ser os mesmos.

Enum

Assim como em outras linguagens, enum é um tipo que permite declarar um conjunto
valores nomeados e constantes pré-definidos.

enum Cor {

VERMELHO,

VERDE,

AZUL,

let cor: Cor = Cor.Azul;

Unknown

Às vezes, precisamos de um tipo de variável que não sabemos quando estamos


escrevendo um código. Esses valores podem vir de conteúdo dinâmico. Nesses casos, é
conveniente fornecer definir ao compilador e até outros programadores que tal variável
pode ser qualquer coisa.

let valorDesconhecido: unknown;

valorDesconhecido = true;

valorDesconhecido = 100.0;

valorDesconhecido = 5;

valorDesconhecido = “Alô Mundo!”;


valorDesconhecido = null;

valorDesconhecido = undefined;

https://blog.geekhunter.com.br/introducao-a-typescript/ 8/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Null and Undefined

Nada mais são do que seus próprios nomes dizem.

let u: undefined = undefined;

let n: null = null;

Void

O tipo void é visto como um tipo de retorno de funções que não retornam valor nenhum,
geralmente chamadas de procedimentos.

function minhaFuncao(): void {

console.log(“Minha Função”);

A documentação desses tipos, bem como exemplo, você pode encontrar nesse link.

TypeScript e a orientação a objetos


A utilização do paradigma de orientação a objetos no JavaScript pode gerar algumas
dúvidas. Com TypeScript, tudo pode ficar muito fácil.

Ele oferece a possibilidade de utilizarmos classes, interfaces, encapsulamento, herança, e


outras
 coisinhas a mais. É muito incrível. 

https://blog.geekhunter.com.br/introducao-a-typescript/ 9/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Classes

A declaração de classes no TypeScript é simples, semelhante a outras linguagens de


programação.

class Exemplo {

// atributos

// construtor

// getter e setters

// outros métodos

Herança

Assim como no Java, por exemplo, para herdar uma classe utilizamos o comando extends.
Um detalhe importante é que se um método da classe base for subscrito na classe
herdeira, podemos chamar o método da classe base utilizando o comando super.

class ClasseBase {

nome: string;

constructor(nome: string) {

this.nome = nome;
}

print(msg: string = ‘Classe Base’) {

console.log(msg)

class ClasseHerdeira extends ClasseBase {

constructor(nome: string) {

super(nome)



print(msg: string = ‘Classe Herdeira’) {

https://blog.geekhunter.com.br/introducao-a-typescript/ 10/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

super.print(msg);
}

Observe a utilização do comando super na classe ClasseHerdeira para chamar o método


print da classe base ClasseBase.

Encapsulamento

O TypeScript faz uso do conceito de encapsulamento, presente em outras linguagens


orientadas a objetos, através de getters e setters para acesso aos atributos protegidos de
uma classe.

class ClasseExemplo {

private _nome: string

get nome(): string {

return this._nome;

set nome(nome:string): void {

this._nome = nome;

Classes abstratas

As classes abstratas servem como base para construção de outras classes, dando-lhes a
estrutura padrão de métodos e atributos.

abstract class ClasseAbstrata {

constructor(public nome: string){

 

https://blog.geekhunter.com.br/introducao-a-typescript/ 11/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

printNome(): void {

console.log(‘Nome’ + this.nome)

abstract otherPrint(): void; // deverá ser implementado nas classes filhas

abstract class ClasseAbstrata {

constructor(public nome: string){

printNome(): void {

console.log(‘Nome’ + this.nome)

abstract otherPrint(): void; // deverá ser implementado nas classes filhas

class ClasseFilhaAbs extends ClasseAbstrata {

constructor() {

super(‘Classe Filha Abs’);

printNome(): void {

console.log(‘Classe Filha Abs’);

otherPrint(): void {

console.log(‘Other print method’);

Interfaces
 

https://blog.geekhunter.com.br/introducao-a-typescript/ 12/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Assim como as classes abstratas, as interfaces também definem a estrutura das classes
que “assinam o contrato” com elas.

A diferença fundamental é que todos os métodos e atributos da interface devem ser


implementados nas classes filhas. No entanto, você pode definir atributos como opcional
também.

interface ClasseInterface {

atributo1: string;

atriburo2?: number

print();

class ClasseFilha implements ClasseInterface {

atributo1: string = ‘Classe Filha’;

atriburo2?: number = 1;

print() {

console.log(this.atributo1);

Agora que tratamos dos aspectos principais, como criar um projeto utilizando TypeScript?
É isso que vamos ver agora! Vamos começar com a instalação.

Mas antes de continuarmos, se você quiser testar a sintaxe do TypeScript tentando


construir códigos com a linguagem, existe uma ferramenta online disponível para isso: o
Playground.

Instalação do Typescript
Para instalação e utilização do TypeScript, você precisará do NodeJs instalado e seu
gerenciador de pacotes padrão: NPM.

 menos para sistemas operacionais Windows, o NPM já vem com Node.js quando o
Pelo
instalamos.
https://blog.geekhunter.com.br/introducao-a-typescript/ 13/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Abra o cmd e execute o comando abaixo:

npm i -g typescript

O comando acima instala o TypeScript globalmente na sua máquina.

Verificando instalação

Execute o comando abaixo. Se o TypeScript estiver instalado, a versão aparecerá no


console.

tsc -v

Começando a utilização

Antes de começar a utilização, vamos precisar de um arquivo de configurações para o


compilador do TypeScript. Dentro de um diretório, abra seu terminal e execute o comando
abaixo:

tsc --init

O comando acima, criará o arquivo tsconfig.json de forma automática. Depois disso, é só


criar um arquivo com extensão .ts e começar a utilizar.

A forma manual de realizar a execução pode ser da seguinte forma:

tsc <<nome_do_seu_arquivo>>

Esse comando irá criar um arquivo JavaScript com o mesmo nome do arquivo TypeScript.
É
o código transpilado para a sintaxe do JavaScript. 

https://blog.geekhunter.com.br/introducao-a-typescript/ 14/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Como tinha dito antes, quando a compilação for realizada, todo o código TS se tornará um
código JS.

Existe uma maneira mais simples de executar um arquivo TypeScript  através de plugin
instalado no Visual Studio Code: Coder Runner. Com esse plugin instalado, teremos que
instalar outra dependência: ts-node. Para isso execute o comando abaixo:

npm i -g ts-node

Agora, quando quiser executar um arquivo TypeScript, use o atalho do Windows:

Ctrl + Alt + N.

Alguns frameworks front-end para construção de aplicações Web SPA, como React e
Angular, também trabalham com TypeScript. Então vamos falar um pouco sobre isso.
Vamos lá?

React TypeScript

Integração do Typescript com o React


 

https://blog.geekhunter.com.br/introducao-a-typescript/ 15/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

ReactJs é uma biblioteca JavaScript com cara de framework desenvolvida pelo Facebook
para construção de interfaces de usuário (IU), bastante popular na comunidade dev.

O template padrão que o React usa é com o JavaScript, mas pode ser alterado para o
TypeScript facilmente.

No React com Javascript, os arquivos têm extensões .js ou .jsx. Com o template TypeScript,
as extensões são .ts ou .tsx.

De qualquer forma, para ambos os templates, a essência da sintaxe do JSX continua a


mesma. Basicamente, todas as caraterísticas do TypeScript que já falamos estarão
disponíveis para serem utilizadas.

Para um projeto React com TypeScript, execute o comando abaixo:

npx create-react-app <<nome_do_seu_projeto>> --template Typescript

Esse comando acima cria um projeto pronto para ser utilizado com TypeScript. Se você já
tiver um projeto criado, pode adicionar o TypeScript ao projeto através do comando
abaixo:

npm install --save-dev typescript

Nesse último caso, precisamos modificar a seção scripts no arquivo package.json. Uma vez
que temos o acesso ao comando tsc, fazemos da seguinte forma:

“scripts”: {

“build”: “tsc”,

},

 
E então, para executar o projeto, rode o comando seguinte:

https://blog.geekhunter.com.br/introducao-a-typescript/ 16/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

npm run buildx

Existem outras questões pertinentes e importantes em relação ao React com TypeScript,


mas não é do escopo deste artigo falar sobre isso, mas fica a ciência que existem.

Angular TypeScript

Representação da relação entre Angular e Typescript

Angular é um framework moderno criado pelo Google construído inteiramente com


TypeScript para aplicações Web SPA baseada em componentes.

A documentação do Angular não apenas oferece suporte ao TypeScript como, sendo a sua
linguagem primeira, oferece uma referência mais atualizada.

Na utilização do Angular, assim como outros frameworks, é comum a utilização do seu CLI
(Command Line Interface). É por ele que iremos criar um projeto Angular.

Instalação
 

https://blog.geekhunter.com.br/introducao-a-typescript/ 17/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando

Para instalar o command line interface do Angular, execute o comando abaixo:

npm i -g @angular/cli

Para criar um projeto Angular, execute o comando abaixo definindo o nome do seu
projeto.

ng new <<nome_do_seu_projeto>>

Como o Angular é construído com TypeScript, não é preciso de uma configuração prévia e,
portanto, já podemos sair programando com o superset no projeto.

Conclusão
Essa foi uma introdução ao Typescript, você pode conhecer algumas funcionalidades, os
motivos de utilizá-lo em determinados momentos e algumas instalações com Angular e
React.

Em resumo, o Typescript é uma linguagem que possui uma forte tipagem, fornecendo
maior performance e produtividade na hora de se rodar uma aplicação.

Outro ponto é a utilização da orientação à objetos em Javascript, que pode gerar dúvidas e
confusão. Com o Typescript isso não ocorre, visto suas propriedades que são mais
direcionadas e facilitadas para a programação orientada à objetos!

Espero que tenham gostado e bons estudos! 😀

 

https://blog.geekhunter.com.br/introducao-a-typescript/ 18/26

Você também pode gostar