Escolar Documentos
Profissional Documentos
Cultura Documentos
Front-end
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.
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
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.
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.
https://blog.geekhunter.com.br/introducao-a-typescript/ 3/26
24/09/2021 01:24 Typescript: uma introdução para você já sair programando
Bom, já que TS nasceu de JS e veio para suprir algumas limitações, vou apresentar
algumas diferenças básicas entre os dois:
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
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.
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
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.
Number
É para todo e qualquer tipo de número, seja ele ponto flutuante ou inteiro.
String
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
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.
Array
Representa o tipo Array dentro da linguagem. É válido informar que podemos criar arrays
de duas formas dentro do TypeScript.
A primeira:
A segunda:
Uma peculiaridade muito legal, porém não recomenda é fato de podermos definir um
array com tipos diferentes:
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
Tuple
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,
Unknown
valorDesconhecido = true;
valorDesconhecido = 100.0;
valorDesconhecido = 5;
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
Void
O tipo void é visto como um tipo de retorno de funções que não retornam valor nenhum,
geralmente chamadas de procedimentos.
console.log(“Minha Função”);
A documentação desses tipos, bem como exemplo, você pode encontrar nesse link.
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
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;
}
console.log(msg)
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);
}
Encapsulamento
class ClasseExemplo {
return this._nome;
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.
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)
printNome(): void {
console.log(‘Nome’ + this.nome)
constructor() {
printNome(): void {
otherPrint(): void {
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.
interface ClasseInterface {
atributo1: string;
atriburo2?: number
print();
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.
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
npm i -g typescript
Verificando instalação
tsc -v
Começando a utilização
tsc --init
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
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
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.
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:
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
Angular TypeScript
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
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!
https://blog.geekhunter.com.br/introducao-a-typescript/ 18/26