Articles
Introdução ao TypeScript
Noções básicas do TypeScript

Noções básicas do TypeScript

Este artigo explica as noções básicas do TypeScript.

YouTube Video

Executando "Hello World!"

Primeiro, executaremos o exemplo clássico "Hello World!" em TypeScript usando o Visual Studio Code.

npm install -g typescript

Instale o typescript usando o comando npm.

Crie um arquivo tsconfig.json.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

Crie um arquivo .vscode/launch.json para habilitar a execução do arquivo main.ts no Visual Studio Code.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

Crie um arquivo main.ts que exiba "Hello World!". Você pode executá-lo no Visual Studio Code pressionando a tecla F5.

1console.log("Hello World!");

Ao configurar dessa forma, você pode executar arquivos TypeScript no VSCode.

Visão geral do TypeScript

TypeScript (TS) é um superconjunto do JavaScript desenvolvido pela Microsoft. TypeScript suporta tipagem estática, permitindo um código mais robusto e sustentável.

Tipagem Estática

  • TypeScript adiciona tipos ao JavaScript e realiza a verificação de tipos em tempo de compilação. Isso permite evitar bugs relacionados a tipos com antecedência.
1let message: string = "Hello, TypeScript";
2console.log(message);

Compilação

  • Como o TypeScript não pode ser executado diretamente em um navegador, ele precisa ser transpilado (compilado) para JavaScript. Use o tsc (TypeScript Compiler) para converter arquivos TS em arquivos JS.

Anotações de Tipos Opcionais

  • TypeScript também realiza inferência de tipos, mas permite que você especificar explicitamente os tipos quando necessário. Isso melhora a legibilidade e a confiabilidade do código.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Interfaces

  • O TypeScript fornece interface para definir a forma dos objetos. Isso permite uma gestão rigorosa da estrutura dos objetos.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Classes

  • O TypeScript fornece extensões à sintaxe de classes do JavaScript e suporta herança, modificadores de acesso (public, private, protected) e classes abstratas.
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

Genéricos

  • No TypeScript, você pode escrever código reutilizável e seguro em termos de tipos usando genéricos.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Ecossistema

  • O TypeScript é totalmente compatível com o ecossistema JavaScript e pode usar o código JavaScript existente como está. Além disso, é integrado com bibliotecas populares como React e Node.js.

Ferramentas poderosas para desenvolvedores

  • O TypeScript oferece recursos avançados, como autocompletar, suporte para refatoração e verificação de erros em editores como o VSCode.

O TypeScript é particularmente útil para aumentar a confiabilidade e melhorar a produtividade dos desenvolvedores em projetos grandes.

Variáveis no TypeScript

Isso explica os conceitos básicos e o uso de variáveis no TypeScript.

Declaração de Variáveis

No TypeScript, as variáveis são declaradas usando três palavras-chave: let, const e var. Cada palavra-chave tem características diferentes.

Exemplo de let:

let tem escopo de bloco (válido apenas dentro de chaves {}). Os valores podem ser reatribuídos posteriormente.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

Exemplo de const:

const não pode ser reatribuído, portanto, o valor atribuído uma vez não pode ser alterado. No entanto, o conteúdo de objetos e arrays pode ser modificado.

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

Exemplo de var:

var tem escopo de função e pode ser reatribuído. No entanto, ao ignorar o escopo de bloco, pode causar comportamentos inesperados em comparação com let ou const.

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

Anotações de Tipos

No TypeScript, você pode anotar explicitamente os tipos para variáveis. A inferência de tipos também é suportada, mas as anotações de tipo são úteis em cenários complexos.

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

Variáveis Não Inicializadas

Se uma variável for declarada sem inicialização, undefined será atribuído por padrão. Uma variável declarada com let deve ser explicitamente atribuída como undefined ou incluir undefined no seu tipo se não for inicializada.

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

Escopo de Variáveis

let e const têm escopo de bloco, então são válidos apenas dentro do mesmo bloco.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

Levantamento de Variáveis (Hoisting)

Como TypeScript é um superconjunto do JavaScript, ele herda a funcionalidade de levantamento (hoisting) do JavaScript. O levantamento (hoisting) refere-se ao comportamento em que declarações de variáveis e funções são tratadas como se fossem elevadas ao topo de seu escopo. No entanto, apenas a declaração é elevada, enquanto a inicialização permanece no local. Variáveis declaradas com var são elevadas, mas usar let ou const antes da declaração resulta em um erro.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • Neste caso, variáveis declaradas com var são elevadas, e seus valores são exibidos.
1console.log(b); // ReferenceError
2let b = 20;
  • Variáveis declaradas com let não são elevadas, resultando em um erro.

Resumo

O seguinte é um resumo de let, const e var.

  • let pode ser reatribuído e tem escopo de bloco.
  • const não pode ser reatribuído e tem escopo de bloco.
  • var pode ser reatribuído e tem escopo de função.
  • Todos eles permitem anotação de tipo explícita para especificar tipos de variável.

Caracteres de Escape em TypeScript

Os caracteres de escape são usados quando caracteres específicos não podem ser inseridos diretamente ou para representar caracteres que possuem significado especial dentro de uma string. No TypeScript, os caracteres de escape são usados para representar caracteres de controle ou caracteres especiais.

Por exemplo, use \n para exibir uma mensagem que inclua uma nova linha.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

Escapando Caracteres Especiais

Os caracteres de escape também são úteis ao incluir caracteres especiais em uma string. Por exemplo, talvez você queira usar aspas duplas ou aspas simples diretamente dentro de uma string.

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

Escapando a Barra Invertida em Si

Para incluir uma barra invertida em uma string, você precisa escrevê-la como uma barra invertida dupla.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Escapes de Unicode e Hexadecimal

No TypeScript, pontos de código Unicode podem ser representados usando sequências de escape.

Sequência de Escape Unicode

Você pode representar caracteres Unicode especificando um número hexadecimal de quatro dígitos após \u.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

Escape Hexadecimal

Você pode representar caracteres específicos usando um número hexadecimal de dois dígitos após \x.

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

Literals de Template e Escapes

Os literais de template são definidos ao serem delimitados por crases e fornecem uma maneira fácil de criar expressões embutidas ou strings de várias linhas. Caracteres de escape regulares podem ser usados diretamente em literals de template.

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

Casos Especiais

No TypeScript, o uso de sequências de escape inválidas dentro de uma string pode resultar em um erro de sintaxe. Portanto, é importante verificar se os caracteres de escape são válidos.

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

Exemplos Práticos de Uso

Aqui está um exemplo de como construir uma string complexa usando caracteres de escape.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

Neste exemplo, \n é usado para uma nova linha e \t é usado para adicionar indentação. Isso torna a estrutura JSON mais fácil de ler.

Resumo

Caracteres de escape são muito importantes ao trabalhar com strings no TypeScript. Quando você deseja incluir caracteres especiais ou de controle em uma string, pode criar strings expressivas usando sequências de escape adequadas. Entender e usar corretamente os caracteres de escape pode melhorar a legibilidade e a manutenção do código.

Versões do TypeScript

Vamos dar uma visão geral das versões do TypeScript aqui.

  1. TypeScript 1.0 (2014)

    A primeira versão estável do TypeScript. Recursos básicos como tipagem, classes e módulos foram introduzidos.

  2. TypeScript 2.0 (2016)

    Tipos Não Nulos, Análise de Fluxo de Controle, Propriedades Somente Leitura e o tipo Never foram introduzidos, aprimorando a inferência de tipos.

  3. TypeScript 3.0 (2018)

    Um sistema de tipos mais flexível foi introduzido, com recursos como Referências de Projeto, extensões para Tipos Tupla e melhorias nos Parâmetros Rest.

  4. TypeScript 4.0 (2020)

    Recursos como Tipos Tupla Variádicos, melhorias no editor, inferência de tipos aprimorada e Elementos de Tupla Rotulados foram adicionados para melhorar a experiência de desenvolvimento.

  5. TypeScript 4.1 (2020)

    Tipos Literais de Template foram introduzidos, tornando a manipulação de tipos de string mais poderosa.

  6. TypeScript 4.3 (2021)

    A adição da palavra-chave Override, melhorias nos modificadores de acesso dentro dos construtores e suporte aprimorado para os tipos em WeakMap e WeakSet.

  7. TypeScript 4.5 (2021)

    O tipo Awaited, ModuleSuffixes e a compatibilidade aprimorada com módulos ECMAScript foram adicionados.

  8. TypeScript 5.0 (2023)

    Padronização de Decorators, melhoria na velocidade de compilação de projetos, aprimoramento do sistema de tipos e suporte para os mais recentes recursos do ECMAScript foram realizados.

O TypeScript está em constante evolução, com várias versões lançadas a cada ano, trazendo novos recursos e melhorias.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Tipos de Dados no TypeScript