Erro de compilação ao habilitar : "strictNullChecks": true

Você chamou um toString () que não existe no meu código. Reparou? Por que fez isso? Qual o sentido?

Bom dia,

Fiz isso para solucionar o problema que tive ao realizar o exercicio da aula de Jquery, foi a solução que me foi sugerida aqui no fórum https://cursos.alura.com.br/forum/topico-jquery-no-typescript-41542

No vídeo eu não uso e funciona. Desconfio que o tsd do jQuery foi atualizado e mudaram o type retornado por Val para Number. Preciso ver...

Poste o código completo do seu controller para eu olhar.

Você usou a versão do TypeScript e da definição do jQuery que uso? Cole o conteúdo do seu arquivo package.json.

No aguardo.

O tsd indica que o retorno pode ser Number, String ou array de String. Tem algo bizarro aí que precisa ser descoberto.

Aguardo o que pedi para analisar.

Acabei de testar o projeto do curso e tudo continua funcionando. Aguardo seu feedback das informações.

Segue controller e package

import { NegociacoesView, MensagemView } from '../views/index'
import { Negociacao, Negociacoes } from '../models/index' 

export class NegociacaoController {

    private _inputData: JQuery;
    private _inputQuantidade: JQuery;
    private _inputValor: JQuery;

    private _negociacoes = new Negociacoes();        
    private _negociacoesView = new NegociacoesView('#negociacoesView');
    private _mensagemView = new MensagemView('#mensagemView');

    constructor() {
        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');
        this._negociacoesView.update(this._negociacoes);
    }

    adiciona(event: Event) {
        event.preventDefault();


        const negociacao = new Negociacao(
            new Date(this._inputData.val().toString().replace(/-/g, ',')),
            parseInt(this._inputQuantidade.val().toString()),
            parseFloat(this._inputValor.val().toString()));

        this._negociacoes.adiciona(negociacao);
        this._negociacoesView.update(this._negociacoes);
        this._mensagemView.update("Negociação incluida com sucesso!");

    }

}

{
  "name": "alurabank",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "tsc",
    "watch": "tsc -w",
    "server": "lite-server --baseDir=app",
    "start": "concurrently \"npm run watch\" \"npm run server\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jquery": "^3.2.6",
    "concurrently": "^3.4.0",
    "lite-server": "^2.3.0",
    "typescript": "^2.3.2"
  }
}

Você parece ter instalado um Type do jQuery mais novo e, infelizmente, bugado. Isto porque ele indevidamente não entende que .val() deve retornar mais de um tipo.

Sendo assim, você fará.

npm uninstall @types/jquery --save-dev

E depois fará:

npm install @types/jquery@2.0.42 --save-dev

Essa versão especifica corretamente o val().

Para garantir, depois de executar esses comandos, faça:

• apague a pasta node_modules.
• apague o arquivo package-lock.json, caso exista.
• execute o comando npm install para baixar todas as dependências novamente.

Nem sempre a versão mais nova é a melhor. O problema é que os Typings estão toda hora sendo alterados e bugs são comuns. O ideal é ficar com aquele que você sabe que esta funcionando. O dia que corrigirem esse typing mais novo, você atualizada.

Não esquece de abrir e fechar o visual studio para ele levar em consideração o typing atualizada. tá?

Aguardo seu retorno!

Ah, e segue a documentação do val() do jQuery que indica que a função pode retornar mais de um tipo, algo que parece não ter sido mapeado nesse typing que você esta usando:

http://api.jquery.com/val/

E por fim, o problema do toString() com strictNullChecks é que ele pode retornar null, caso o valor não possa ser convertido para uma string. Esse foi o problema.

Obrigado professor, segui os passos e meu projeto está funcionando perfeitamente agora. Uma coisa interessante referente ao strictNullChecks é que no retorno do array de negociacao eu não tomei erro pois no meu código eu deixei assim :

return new Array().concat(this._negociacoes);

Isso se deve ao fato do typescript inferir o tipo para o Array?

Isso, porque você está retornando um novo array que não pode ser nulo.

Hum sim, obrigado :)