Instalando e compilando TypeScript a partir da linha do comando

Para começar a trabalhar com TypeScript, precisamos instalar as ferramentas necessárias. O TypeScript pode ser instalado de duas maneiras: através do gerenciador de pacotes NPM ou como um plugin do Visual Studio.

Instalação via NPM

Para instalar via NPM, é necessário primeiro ter o Node.js instalado (caso ainda não tenha sido). Depois de instalar o Node.js, execute o seguinte comando na linha de comando (Windows) ou no terminal (Linux):

npm install -g typescript

Se estiver usando MacOS, também será necessário incluir o comando sudo. O terminal pedirá seu login e senha para autorizar a instalação do pacote:

sudo npm install -g typescript

Se o TypeScript já estiver instalado, você pode atualizá-lo para a versão mais recente com o comando:

npm update -g typescript

Para verificar a versão instalada, utilize o comando:

tsc -v

Para começar, vamos criar um diretório para o projeto. No meu caso, usarei a pasta localizada em C:/typescript. Dentro desse diretório, adicione o arquivo index.html. Abra-o em qualquer editor de texto e insira o seguinte código:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>www.programicio.com</title>
  </head>
  <body>
    <h2 id="header"></h2>
    <script src="app.js"></script>
  </body>
</html>

Este é um arquivo HTML comum, onde definimos um cabeçalho vazio - o elemento <h2>. Neste elemento, vamos inserir algum conteúdo. O arquivo JavaScript app.js também está vinculado à página.

Agora, no mesmo diretório, crie o arquivo app.ts (importante que seja .ts, não .js, pois este é o código TypeScript). É um arquivo de texto comum, mas com a extensão .ts. No arquivo app.ts, adicione o seguinte código:

class User {
  name: string;
  constructor(_name: string) {
    this.name = _name;
  }
}

const tom: User = new User("Tom");
const header = this.document.getElementById("header");
if (header) header.innerHTML = "Hello " + tom.name;

O que está acontecendo aqui? Primeiro, definimos uma classe User - um modelo de dados que será utilizado na página web. Essa classe tem um campo name, que é do tipo string. Para passar dados para esse campo, criamos um método especial: o construtor, que recebe uma string como parâmetro _name e a atribui ao campo name:

Em seguida, criamos uma constante tom, que é uma instância dessa classe:

const tom: User = new User("Tom");

Ou seja, a constante tom representa um usuário cujo nome é "Tom".

Depois, obtemos o elemento com o id header na página web e o atribuímos à constante header:

const header = this.document.getElementById("header");

Esse elemento representa o cabeçalho <h2> que foi definido na página index.html.

Finalmente, alteramos o conteúdo desse elemento com a propriedade innerHTML:

if (header) header.innerHTML = "Hello " + tom.name;

Aqui, estamos passando para a propriedade innerHTML uma string, que é concatenada com o valor da propriedade tom.name. Isso significa que esperamos ver essa string sendo exibida no cabeçalho da página.

Agora, salve e compile esse arquivo. Para isso, use o comando cd para navegar até o diretório onde o arquivo app.ts está localizado (no meu caso, C:/typescript). Para compilar, execute o seguinte comando:

tsc app.ts

Após a compilação, um arquivo app.js será gerado no diretório do projeto, e ele terá o seguinte conteúdo:

var User = /** @class */ (function () {
  function User(_name) {
    this.name = _name;
  }
  return User;
})();
var tom = new User("Tom");
var header = this.document.getElementById("header");
if (header) header.innerHTML = "Hello " + tom.name;

Primeira aplicação em TypeScript

Agora, basta abrir a página index.html no navegador para ver o resultado do código TypeScript.

Compilando TypeScript