O Que é o TypeScript? [Introdução ao TypeScript]

Você sabe o que é o TypeScript? Ou você já ouviu falar sobre o TypeScript?

Se você já está há algum tempo no mundo do desenvolvimento web, você deve saber que o JavaScript foi desenvolvido inicialmente para criação de animações, validações de formulário, etc.

Não muito além disso, mas nos últimos anos está acontecendo algo que está fazendo os desenvolvedores repensar no que eles pode escolher para seus projetos.

Seja no front-end com bibliotecas e frameworks, ou no back-end com nodeJS.

Para ajudar os desenvolvedores a desenvolverem aplicações em larga escala, foi desenvolvida a linguagem TypeScript.

Typescript é um superset ou um super conjunto da linguagem JavaScript, foi criado pela Microsoft, JavaScript é uma das linguagens de programação mais popular atualmente.

O TypeScript suporta programação orientada por objetos, então é possível criar classe, interface e também fazer tipagem de variáveis, tem a mesma sintaxe que JavaScript.

A extensão de um arquivo TypeScript é .ts, o código TypeScript é compilado para código JavaScript.

Existem duas formas de você instalar as ferramentas do TypeScript em seu computador, a primeira é através do npm(gerenciador de pacotes do node.js).

E a outra forma é instalando plug-ins do Visual Studio do TypeScript.

Instalado com npm globalmente:

npm install -g typescript

Vamos fazer o nosso primeiro teste com código JavaScript, para isso crie um novo arquivo chamado primeiro.ts ou nomeie o arquivo com o nome que você quiser.

No arquivo que você acabou de criar, digite o seguinte código.

function primeiraFuncao(nome) {

    return "Olá, "+nome;

}

let user_name = "João";

document.write(primeiraFuncao(user_name));

Agora abra o terminal e digite o próximo comando para que execute compilador TypeScript:

tsc primeiro.ts

Logo após o comando for executado, será criado um novo arquivo com o nome primeiro.js, com o mesmo código JavaScript, pois no primeiro.ts foi escrito código JavaScript.

Tipos de variáveis

Um dos recursos que TypeScript tem, é que podemos fazer tipagem de variáveis.

Na função primeiraFuncao vamos fazer a tipagem da variável nome:

function primeiraFuncao(nome:string) {

    return "Olá, "+nome;

}

let user_name  = "João";

document.write(primeiraFuncao(user_name));

function primeiraFuncao(nome:string) {

    return "Olá, "+nome;

}

let user_name = 10;

document.write(primeiraFuncao(user_name));

error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

Veja quais são os tipos de dados que o TypeScript suporta, são os mesmo que JavaScript.

Boolean – esse tipo vai retornar true caso uma condição seja verdadeira ou vai retornar false caso a condição seja falsa.

let bool: boolean = true;

if (bool) {

    console.log("is True");

}

let decimal: number = 6;

let hex: number = 0xf00d;

let binary: number = 0b1010; 

let octal: number = 0o744;

String – Um tipo de dado fundamental para criação de programas JavaScript é o dado de texto, usamos string para referir a tipo de dados textuais.

Você pode criar uma nova string usando, aspas duplas(“) ou aspas simples(‘), você deve colocar as aspas em volta da string.

let cor:string = "red";

let lista: number[] = [1, 2, 3];

let lista: Array<number> = [1, 2, 3];

Tuple – As tupla permitem expressar uma matriz com um número fixo de elementos, onde seus tipos já conhecidos, pode ser de diferentes tipos, você pode criar uma tupla com 2 campos, um number e outro string.

let myTuple = [10, "tuple"];

Enum – Enum é um conjunto padrão de dados do JavaScript, criar enum é uma maneira de atribuir nomes mais amigáveis ​​a conjuntos de valores numéricos.

enum Cor {Red, Green, Blue} 

any – Quando você não sabe qual é o tipo do valor que vai ser atribuído a variável, para esses casos, podemos definir como do tipo any, significa qualquer valor.

let myVariable = 10;

myVariable = "text";

Como foi colocado o tipo de any na variável myVariable, você poderá colocar qualquer tipo de valor, seja number, string, boolean, etc.

Void – void é a ausência de qualquer tipo, geralmente usa-se esse tipo em retornos de funções que não retornam um valor.

function myFunction(): void { 

    console.log("Isto é uma mensagem!");

 }

Null e Undefined – muito semelhante com void, por padrão null e undefined são subtipos de outros tipos, então você poderá atribuir null ou undefined ao number.

let u: undefined = undefined;

function error(message: string): never{

     throw new Error(message);

 }

Baixar grátis Guia do Desenvolvedor Full-Stack.

Interfaces

Interface é um tipo de contrato ou assinatura, a partir da qual todos os  atributos que derivarem dessa interface, sempre vai ter a mesma estrutura.

interface Pessoa {

    f_name: string;

    l_name: string;

}

let dados = { f_name: "João", l_name: "Pedro" };

function my_function(pessoa: Pessoa) {

    return pessoa.f_name +" "+ pessoa.l_name;

}

let full_name = my_function(dados);

console.log(full_name);

Classes

Um dos recursos que o TypeScript tem, é suporte a programação orientada a objetos que é baseado em classes.

Agora vamos criar uma classe chamada Pessoa com um construtor e alguns campos públicos.

class Pessoa {

    public full_name:string;

    constructor(public f_name:string,public l_name:string){

        this.full_name = f_name +" "+ l_name;

    }

    public getFullName(){

        returnthis.full_name;

    }

}

let pessoa = new Pessoa("João", "Pedro");

let full_name = pessoa.getFullName();

console.log(full_name);

Conclusão

O que você acabou de ver, foi uma pequena introdução que o TypeScript pode oferecer, para conhecer mais sobre essa incrível linguagem, acesse a documentação para ver vários exemplos.

Há frameworks que já estão usando o TypeScript como linguagem, um exemplo é o Angular.

Então, para você usar o framework Angular, primeiramente será necessário que você tenha um conhecimento base sobre TypeScript.

Caso contrario, você poderá ter algumas dificuldades ao tentar estudar esse frameworks.

Também há bibliotecas que usam TypeScript que são Vue.js e React

Você também pode acessar o playground para você fazer alguns testes com TypeScript.

Compartilhe