Parâmetros de Compilação noEmitOnError e target - TypeScript

No TypeScript, não é permitido definir uma variável com o mesmo nome mais de uma vez no mesmo escopo, nem alterar o valor de uma constante.

Agora, vamos analisar o seguinte pequeno programa em TypeScript:

let x = 10;
console.log(x); // 10

var x = 20;     // ! Erro
console.log(x); // Mas o console exibirá 20

const t = 50;
t = 256;        // ! Erro
console.log(t); // Mas o console exibirá 256

Durante a compilação, é esperado que vejamos uma série de erros, como:

app.ts:1:5 - error TS2451: Cannot redeclare block-scoped variable 'x'.
let x = 10;

app.ts:4:5 - error TS2451: Cannot redeclare block-scoped variable 'x'.
var x = 20;    // ! Error

app.ts:7:1 - error TS2588: Cannot assign to 't' because it is a constant.
t = 256;       // ! Error

Found 3 errors. Watching for file changes.

No entanto, se as configurações padrão de compilação forem aplicadas, o arquivo JavaScript será gerado normalmente, contendo o seguinte código:

var x = 10;
var x = 10;
console.log(x); // 10
var x = 20; // ! Erro
console.log(x); // Mas o console exibirá 20
var t = 50;
t = 256; // ! Erro
console.log(t); // Mas o console exibirá 256

E, no final, o console do navegador exibirá o seguinte resultado:

10
20
256

Para evitar que o arquivo JavaScript seja gerado caso ocorram erros de compilação, podemos usar o parâmetro --noEmitOnError, que impede a geração do arquivo em caso de erros. Esse parâmetro pode ser especificado diretamente ao chamar o compilador no terminal:

tsc --noEmitOnError app.ts

Ou podemos configurá-lo no arquivo de configuração tsconfig.json, definindo a opção "noEmitOnError" como true:

{
  "compilerOptions": {
      "target": "es5",
      "noEmitOnError": true,
      "outFile": "app.js"
  }
}

Parâmetro target

Vamos corrigir o exemplo anterior para que ele seja compilado corretamente:

let x = 10;
console.log(x); // 10

var y = 20;
console.log(y); // 20

const t = 50;
console.log(t); // 50

Ao compilar com as configurações padrão, o arquivo JavaScript gerado será o seguinte:

var x = 10;
console.log(x); // 10
var y = 20;
console.log(y); // 20
var t = 50;
console.log(t); // 50

Podemos observar que o compilador utiliza a palavra-chave var para todas as declarações, apesar de que até navegadores mais antigos já suportam os operadores let e const. O motivo é que, por padrão, o TypeScript compila para o padrão ES3, que só suporta o operador var. Contudo, var, let e const são apenas um aspecto dessa questão. A maioria das funcionalidades do padrão ES2015 já é amplamente suportada nos navegadores mais comuns, e novos padrões continuam surgindo. Se quisermos que o compilador utilize um padrão mais moderno, precisamos especificar a opção --target ou -t ao compilar.

Por exemplo, vamos pegar um arquivo que contém erros:

let x = 10;
console.log(x); // 10

var x = 120;        // ! Erro
console.log(x);     // Mas o console exibirá 20

const t = 50;
t = 256;            // ! Erro
console.log(t);     // Mas o console exibirá 256

Agora, vamos compilar o arquivo para o padrão "ES2015":

tsc app.ts -t ES2015

Aqui, não especificamos o parâmetro noEmitOnError, portanto, o compilador relatará os erros, mas ainda assim gerará o arquivo JavaScript. O arquivo gerado será praticamente idêntico ao código TypeScript:

let x = 10;
console.log(x); // 10
var x = 120;    // ! Erro
console.log(x); // Mas o console exibirá 20
const t = 50;
t = 256;        // ! Erro
console.log(t); // Mas o console exibirá 256

No entanto, ao executar o script em um navegador que suporte let e const, os erros serão exibidos conforme esperado:

app.js:4 Uncaught SyntaxError: Identifier 'x' has already been declared

Para evitar a geração do arquivo JavaScript ao ocorrerem erros de compilação, podemos configurar essa opção no arquivo tsconfig.json da seguinte forma:

{
  "compilerOptions": {
      "target": "es2015",
      "noEmitOnError": true,
      "outFile": "app.js"
  }
}

Assim, garantimos que o compilador utilize um padrão moderno e que o arquivo só seja gerado se não houver erros de compilação.