TypeScript

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. Tipos fornecem uma maneira de descrever a forma de um objeto, fornecendo melhor documentação e permitindo que o TypeScript valide se seu código está funcionando corretamente. Como TypeScript é um superconjunto de JavaScript, os programas JavaScript existentes também são programas TypeScript válidos.

TypeScript
Paradigma	multiparadigma
Surgido em	1 de outubro de 2012 (12 anos)
Última versão	5.4.5 (10 de abril de 2024)
Criado por	Microsoft
Estilo de tipagem	estática forte inferida
Principais implementações	tsc
Influenciada por	C# Java JavaScript
Licença	Apache 2.0
Extensão do arquivo	.ts .tsx
Página oficial	www.typescriptlang.org

Foi considerada pelo público a 4ª linguagem "mais amada", de acordo com uma pesquisa conduzida pelo site Stack Overflow em 2018, e está entre as 15 linguagens mais populares, de acordo com uma pesquisa conduzida pela RedMonk.

Anders Hejlsberg, arquiteto da linguagem C# e criador das linguagens Delphi e Turbo Pascal, trabalhou no desenvolvimento do TypeScript. A linguagem pode ser usada para desenvolver aplicações JavaScript no lado cliente e lado servidor (Node.js ou Deno). Existem várias opções disponíveis para transcompilação. O TypeScript Checker padrão pode ser usado, ou o compilador Babel pode ser chamado para converter TypeScript em JavaScript.

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. Isso permite que outros programas usem os valores definidos nos arquivos como se fossem entidades TypeScript estaticamente digitadas. Existem arquivos de cabeçalho de terceiros para bibliotecas populares, como jQuery, MongoDB e D3.js. Cabeçalhos TypeScript para os módulos básicos do Node.js também estão disponíveis, permitindo o desenvolvimento de programas Node.js dentro do TypeScript.

História

O TypeScript foi divulgado pela primeira vez em outubro de 2012 (na versão 0.8), após dois anos de desenvolvimento interno na Microsoft.

Logo após o anúncio, Miguel de Icaza elogiou a linguagem em si, mas criticou a falta de suporte maduro a IDE da Microsoft, Visual Studio, que não estava disponível no Linux e no OS X naquela época. Em abril de 2021 há suporte em outras IDEs e editores de texto, incluindo Emacs, Vim, Webstorm, Atom e o próprio Visual Studio Code da Microsoft.

TypeScript 0.9, lançado em 2013, adicionou suporte para tipos genéricos (generic types).

TypeScript 1.0 foi lançado na conferência de desenvolvedores Build da Microsoft em 2014. O Update 2 do Visual Studio 2013 passa a fornecer suporte integrado para TypeScript.

Em julho de 2014, a equipe de desenvolvimento anunciou um novo compilador TypeScript, alegando ganhos de desempenho de 5 vezes. Simultaneamente, o código-fonte, que estava inicialmente hospedado no CodePlex, foi movido para o GitHub.

Em 22 de setembro de 2016, o TypeScript 2.0 foi lançado; ele introduziu vários recursos, incluindo a capacidade de os programadores opcionalmente impedirem que variáveis ​​recebam valores nulos, às vezes referido como o erro de bilhões de dólares.

TypeScript 3.0 foi lançado em 30 de julho de 2018, trazendo muitas adições à linguagem como expressões de spread, parâmetros rest com tipos de tupla, parâmetros rest genéricos e assim por diante.

TypeScript 4.0 foi lançado em 20 de agosto de 2020. Embora esta versão não tenha introduzido nenhuma alteração significativa, ele adicionou recursos de linguagem, como Custom JSX Factories e Variadic Tuple Types.

Exemplos

Genéricos

Exemplo de uma árvore binária genérica em TypeScript:

interface Tree<T> {
  value: T,
  left?: Tree<T>, // Tree<T> | undefined
  right?: Tree<T>,
}

let tree: Tree<number> = {
  value: 5.96,
  // left: undefined,
  right: { value: 1.0 },
};

// Desestrutura `value`, ignorando demais membros
let { value } = tree;
console.log(value);

// Desestrutura membros, ignorando `value`
let { left, right } = tree;
console.log(`-> ${left?.value}`);
console.log(`-> ${right?.value}`);

Componentes Web

Ver artigos principais: Interface gráfica do utilizador e Componentes Web

Exemplo de uma interface gráfica usando componentes Web com o Lit:

import { css, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { choose } from 'lit/directives/choose.js';

@customElement('my-counter')
export class Counter extends LitElement {
  static styles = css`
    :host {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 100vh;
    }
    .label {
      font: 1.125rem Noto, sans-serif;
    }
  `;

  @property({ type: Number })
  start = 5;

  @state()
  private _count: number;

  connectedCallback() {
    super.connectedCallback();
    this._count = Math.max(0, this.start);
  }

  render() {
    const disabled = this._count === 0;
    return html`
      ${choose(this._count, [
        [0, () => html`<span class="label">Fim.</span>`],
        [1, () => html`<span class="label">Encerra no próximo clique!</span>`]
      ],
      () => html`<span class="label">Encerra em ${this._count} cliques.</span>`)}
      <button ?disabled=${disabled} @click=${this.decrement}>Contar</button>
    `;
  }
 
  decrement() {
    if (this._count > 0) {
      this._count--;
    }
  }
}

E o uso:

<my-counter start="5"></my-counter>

Ver também

• CoffeeScript
• Dart (linguagem de programação)
• JavaScript

Ligações externas

• Sítio oficial
• TypeScript no GitHub