Hello World em TypeScript
Tags: braziliandevs, tutorial, typescript, javascript
Published: 2024-01-08 02:59:14

Olá pessoal, hoje iremos conhecer como criar um projeto em **TypeScript** e imprimir a mensagem “ **Hello, world!”** no terminal.

O **TypeScript** é uma linguagem desenvolvida pela Microsoft em 2012, traz uma abordagem mais estruturada ao JavaScript, permitindo a definição explícita de tipos. Esta funcionalidade auxilia na detecção precoce de erros durante o desenvolvimento, proporcionando maior robustez ao código. Além disso, o **TypeScript** oferece recursos adicionais, como interfaces, classes e módulos.

Para iniciar a estrutura do projeto , crie uma pasta com o nome hello-world-typescript, utilize o comando abaixo para criar pelo terminal:
bash
```
mkdir hello-world-typescript
```

Entre na pasta:

```bash
cd hello-world-typescript
```

Será necessário ter o **Node.js** instalado na máquina, para realizar a instalação acesse esse post [Instale Node.js no Xubuntu](https://franciscochaves.com.br/blog/instale-nodejs-no-xubuntu).

Após a instalação do **Node.js** , inicie o projeto com o comando abaixo:

```bash
npm init -y
```

Instale o **TypeScript** como dependência de desenvolvimento :

```bash
npm install -D typescript
```

Pode-se instalar o **TypeScript** globalmente com o comando abaixo:

```bash
npm install -g typescript
```

O comando para criar o arquivo de configuração com o **TypeScript** instalado globalmente com o `tsc` (_TypeScript compiler_):

```bash
tsc --init
```

Outra alternativa para criar o arquivo de configuração do **TypeScript** é com o `npx`:

```bash
npx tsc --init
```

Resultado no terminal após a criação do arquivo **_tsconfig.json_** :

```
Created a new tsconfig.json with:
                                            TS
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig
```

A estrutura do projeto será a seguinte:

```
.
└── hello-world-typescript
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    └── tsconfig.json
```

- node\_modules 
  - Pasta com as dependências instaladas
- package-lock.json 
  - Árvore de dependências do projeto
- package.json 
  - Arquivo de configuração do **Node.js**
- tsconfig.json 
  - Arquivo de configuração do **TypeScript**

Crie um pasta para os códigos em **TypeScript** com o nome **_src_** (source):

```bash
mkdir src
```

Dentro da pasta **_src_** , crie um arquivo com o nome **_index.ts_** , a extensão **_.ts_** é referente a arquivos do tipo **TypeScript** :

```bash
touch index.ts
```

Adicione o conteúdo abaixo no arquivo **_index.ts_** , pode-se observar que a variável `hello` é do tipo `string`:

```ts
const hello: string = 'Hello, world!';

console.log(hello);
```

Para realizar a transpilação (converter o código de uma linguagem para outra) dos arquivos **TypeScript** para JavaScript, utilize o comando `tsc` :

```bash
npx tsc ./src/index.ts
```

Pode-se observar que foi gerado um novo arquivo na pasta **_src_** com o nome **_index.js_** e conteúdo na linguagem **JavaScript** :

```js
var hello = 'Hello, world!';

console.log(hello);
```

A estrutura do projeto após criar a pasta **_src_** e transpilar o arquivo **_index.ts_** :

```
.
└── hello-world-typescript
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── src
    │ ├── index.js
    │ └── index.ts
    └── tsconfig.json
```

O arquivo **_index.js_** foi criado na mesma pasta do **_index.ts_** , mas pode-se alterar o destino dos arquivos transpilados para uma pasta diferente adicionado duas configurações no arquivo **_tsconfig.json_**.

As configurações:

- `rootDir`
  - A pasta dos arquivos **TypeScript**
- `outDir`
  - A pasta de destino dos arquivos transpilados

O arquivo `tsconfig.json`:

```json
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src/",
    "outDir": "./dist/"
  }
}
```

Delete o arquivo **_index.js_** da pasta **_src_** e execute o comando abaixo:

```bash
npx tsc
```

Pode-se observar que foi criada uma nova pasta com o nome **_dist_** que possui um arquivo **_index.js_** na linguagem **JavaScript**.

Estrutura do projeto:

```
.
└── hello-world-typescript
    ├── dist
    │ └── index.js
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── src
    │ └── index.ts
    └── tsconfig.json
```

A pasta **_dist_** será o código utilizado em produção, para testar utilize o **Node.js** com o comando abaixo:

```bash
node ./dist/index.js
```

Resultado da execução do arquivo **_index.js_** :

```
Hello, world!
```

Link para o repositório do projeto: [https://gitlab.com/franciscochaves/hello-world-typescript](https://gitlab.com/franciscochaves/hello-world-typescript)

Valeu pessoal 😎✌️!

## Referências

TYPESCRIPT. TypeScript. Disponível em: [https://www.typescriptlang.org/](https://www.typescriptlang.org/). Acesso em: 6 de jan. de 2024.

DUARTE JUNIOR, Luiz Fernando. [Live] Aulão de TypeScript. LuizTools, 1 de jan. de 2024. 1 vídeo (1h 19min 50s). Disponível em: [https://www.youtube.com/watch?v=omfawXuJ-o4](https://www.youtube.com/watch?v=omfawXuJ-o4). Acesso em: 6 de jan. de 2024.