TypeScript é uma linguagem de programação de código aberto desenvolvida pela Microsoft.
É um superconjunto sintático estrito de JavaScript e adiciona tipagem estática opcional à linguagem.
Esse tutorial é especialmente voltado para programadores que já conhecem JavaScript, abordará os conceitos fundamentais do TypeScript e destacará algumas das “pegadinhas” mais importantes.
O TypeScript foi desenvolvido por Anders Hejlsberg, arquiteto da linguagem C# e criador das linguagens Delphi e Turbo Pascal.
TypeScript oferece suporte a arquivos de definição que podem conter informações de tipo de bibliotecas JavaScript existentes, assim como arquivos de cabeçalho C++ podem descrever a estrutura de arquivos de objeto existentes.
O endereço oficial do TypeScript é: https://www.typescriptlang.org/.
Você pergunta:
— Se o TypeScript é um superconjunto do JavaScript, então, todo o código JavaScript também já é TypeScript?!!!
Apesar de na própria documentação oficial do TypeScript ter escrito isso, a resposta é NÃO!
Há algumas diferenças sim, por exemplo, se você criar variáveis ou constantes(var, let ou const) com o nome: name em TypeScript, não funcionará, dará erro:
var name = "Marcos"Você obterá o erro:
■ Cannot redeclare block-scoped variable 'name'.Isso porque o transpilador do TypeScript já usa uma declaração com esse mesmo nome de: name. Se for usar algo para denominar um objeto ou qualquer outra coisa, use exemplos assim:
var userName = "Eric"
let firstName = "Camila"
const theName = "Marcos"Mas, em JavaScript isso não há problema nenhum, exemplos:
var name = "Débora"
console.log(name)
alert(name)
document.write(name) // Para uso no navegadorEsse código abaixo, também NÃO FUNCIONA EM TypeScript!
o legal do JS é que tem vários easter eggs pic.twitter.com/Jbks00bTTX
— Terminal Root (@TerminalRootTV) May 24, 2024
console.log(++[[]][+[]]+[+[]])
No entanto, se você veio de outras linguagens de programação, você ainda contará com algumas dificuldades de entender TypeScript. Isso, por exemplo, funciona em TypeScript:
Em JS as constantes são modificáveis, isso demorou de entrar na minha mente pic.twitter.com/NVBd9ctCF3
— Terminal Root (@TerminalRootTV) May 5, 2024
Como Instalar o TypeScript
Para testar os códigos TypeScript você pode escrever no Playground do TypeScript. Ou instalar o comando tsc na sua máquina utilizando o NPM, assim:
sudo npm install -g typescriptDepois crie um código básico, por exemplo, main.ts(extensão .ts):
console.log("Salve, TypeScript!")Rode o arquivo com o comando tsc:
tsc main.ts
tsc main.ts --outFile index.js // Compila para um nome diferenteApós rodar esse comando ele criará um arquivo de mesmo nome, mas com extensão .js: main.js.
E rode usando um JavaScript runtime, exemplos: Bun, Node ou QuickJS:
bun main.js
node main.js
qjs main.jsVocê também pode criar um ambiente de desenvolvimento, exemplo:
mkdir aprender-typescript
cd aprender-typescript
npm init -y
npm install typescript --save-dev
npx tsc --initIsso fica mais interessante para seu LSP: Como Configurar o LSP para TypeScript no Neovim.
Você pode modificar o arquivo tsconfig.json, e deixar assim:
{
"compilerOptions": {
"outDir": "./dist",
"module": "commonjs",
"target": "es6"
},
"include": ["main.ts"]
}Ele sempre compilará o arquivo main.ts apenas rodando:
tscE criará um
main.jsdentro da pastadist.
E rodar o arquivo JavaScript:
bun dist/main.jsOu tudo de uma só vez:
tsc && bun dist/main.js
Para mais detalhes sobre o comando tsc use a ajuda:
tsc --helpTutorial básico
O TypeScript possui tipos, por isso seu nome é: TypeScript! 😃
01. Exemplos dos seus tipos primitivos:
let isDone: boolean = false;
let age: number = 42;
let userName: string = "John Doe";Não existe
floatoudoubleé tudonumber! Mas, tem outros tipos primitivos como:bigint,symbol,unknown, …
No meu caso, eu tenho o OpenGL instalado e ele definiu tipos para o TypeScript, logo, o tipo GLfloat está disponível:
Meu LSP lista todos os tipos pra mim!
Mas, se não funcionar para você(tem que ter o OpenGL instalado no sistema), defina assim:
type GLfloat = number;
let pi: GLfloat = 3.14;
console.info(pi);Há um tipo especial: any, que você pode usar sempre que não quiser que um valor específico cause erros de verificação de digitação.
let obj: any = { x: 0 };Saiba mais aqui.
02. Possui Arrays e Tuplas:
Um tipo de tupla é outro tipo de Array que sabe exatamente quantos elementos contém e exatamente quais tipos contém em posições específicas.
let numbers: number[] = [1, 2, 3];
let tuple: [string, number] = ["Olá", 42];
console.info(numbers[1])
console.log(tuple[1])03. Enumeradores
Enums permitem que um desenvolvedor defina um conjunto de constantes nomeadas. O uso de enums pode facilitar a documentação da intenção ou a criação de um conjunto de casos distintos. TypeScript fornece enumerações numéricas e baseadas em string.
enum Color { Vermelho, Verde, Azul }
let c: Color = Color.Verde;
console.log(`O número Verde é: ${c}`)04. Interfaces e Classes
Uma declaração de interface é outra maneira de nomear um tipo de objeto:
Interface
interface Person {
firstName: string;
lastName: string;
age?: number; // Opcional
}
function greeter(person: Person) {
return `E aí, ${person.firstName} ${person.lastName}?!`;
}
const myPerson: Person = {
firstName: "Mark",
lastName: "Simmons",
age: 39
};
console.log(greeter(myPerson));Classe
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
distance(distanceInMeters: number = 0) {
console.log(`O ${this.name} está a ${distanceInMeters}m de mim.`);
}
}
const myAnimal = new Animal("gato");
myAnimal.distance(10);Note:
nameestá dentro de uma classe! 😃
Dicas
- Você pode utilizar tipos de união (
|) e interseção (&) para maior flexibilidade.
function padLeft(value: string, padding: number | string) {
if (typeof padding === "number") {
return `${value}: ${padding}`
}
if (typeof padding === "string") {
return `${value} ${padding}`;
}
throw new Error(`Expected string or number, got '${typeof padding}'.`);
}
console.log(padLeft("Olá", "amigo"))
console.log(padLeft("Olá", 36))
//console.log(padLeft(9, 36)) // Erro- Evite o uso de tipos automáticos:
// Má ideia
let myStr1 = "Isso é minha string"
// Boa ideia
let myStr2 : string = "Isso sim é minha string"- Use módulos (
importeexport) para organizar seu código.
// mymodule.ts
export function dizAi(name: string) {
return `Calma ${name}`;
}
// main.ts
import { dizAi } from './mymodule';
console.log(dizAi("Calabreso"));Note: Declarei a variável
name, mas como argumento de função!
Após compilar e rodar:
tsc && bun dist/main.js
Calma CalabresoEXERCÍCIO: Gerar Números para a Mega-Sena com TypeScript
Como vamos usar a função process.stdout.write() precisamos instalar o @types/node, então rode:
npm i --save-dev @types/nodeAgora leia o código devidamente comentado com explicação de cada bloco:
// Esta função sorteia seis números distintos entre 1 e 60.
function megaSena(): number[] { // Tipo de retorno é um array de number
// Usamos um Set para armazenar os números.
// Um Set não permite duplicatas, então ele garante que todos os números sejam únicos.
const numbers: Set<number> = new Set();
while (numbers.size < 6) {
// A função Math.random() gera um número pseudoaleatório entre 0 (inclusive) e 1 (exclusivo).
// Multiplicamos por 60 e adicionamos 1 para obter um número entre 1 e 60.
const randomNumb = Math.floor(Math.random() * 60) + 1;
numbers.add(randomNumb);
}
// Após gerar seis números, convertê-los de Set para um Array e ordená-los em ordem crescente.
return Array.from(numbers).sort((a, b) => a - b);
}
// chamamos a função que retorna um Array
const array = megaSena();
// Fazemos um loop e usamos process.stdout.write para não pular linha, console.log pula
for (let index = 0; index < array.length; index++) {
process.stdout.write(`${array[index]} `)
}
console.log()Rode e não esqueça de jogar esses números! 😃
Conclusão
TypeScript oferece uma poderosa maneira de escrever JavaScript com tipos facilitando a manutenção do código.
Com os fundamentos acima, você deve estar bem equipado para começar a usar TypeScript em seus projetos. Lembre-se de aproveitar os recursos do TypeScript para criar código mais robusto.
Dê prosseguimento ao seu aprendizado e consulte a documentação no site oficial.
