Ao rodar o projeto
Aparece esses status 304, o que poderia ser?
Quando eu corrigo o strict de false para true ele me aparece esses erros:
Irei colocar os codigo abaixo:
tsconfig,json
{
//quais diretorios serão considerados e gravados os arquivos resultantes (que muda de .ts para .js)
"compilerOptions": {
//é usada para especificar o diretório de destino onde os arquivos JavaScript compilados serão salvos
"outDir": "dist/js",
//pode definir qual versão do js ira ser gerado o arquivo .ts
"target": "ES6",
//usado para não gerar os arquivos js enquanto o arquivo .ts estiver com ERRO
"noEmitOnError": true,
//para não aceitar o tipo any
"noImplicitAny": true,
//"forceConsistentCasingInFileNames" deve ser habilitada para reduzir problemas ao trabalhar com diferentes sistemas operacionais tipo windows e linux
"forceConsistentCasingInFileNames": true,
//ao ativar a strictopção de compilador do TypeScript, o compilador será executado no modo mais rigoroso, detectando mais problemas de tipagem antes da execução
"strict": true
},
//diz onde estão os arquivos .ts para a conversão em .js
"include": [
//aqui eu estou dizendo qual o diretorio, como aqui só tenho o app, eu só passo esse diretorio
"app/**/*"
]
}
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Negociações</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body class="container">
<h1 class="text-center">Negociações</h1>
<div id="mensagemView"></div>
<form class="form">
<div class="form-group">
<label for="data">Data</label>
<input type="date" id="data" class="form-control" required autofocus />
</div>
<div class="form-group">
<label for="quantidade">Quantidade</label>
<input
type="number"
min="1"
step="1"
id="quantidade"
class="form-control"
value="1"
required
/>
</div>
<div class="form-group">
<label for="valor">Valor</label>
<input
id="valor"
type="number"
class="form-control"
min="0.01"
step="0.01"
value="0.0"
required
/>
</div>
<button class="btn btn-primary" type="submit">Incluir</button>
</form>
<br />
<br />
<!-- é usando o type="module", para mostrar que esse seria o modulo principal -->
<script type="module" src="js/app.js"></script>
</body>
</html>
app.ts (onde aparece o erro (app/app.ts(6,1): error TS2531: Object is possibly 'null'.)
import { NegociacoController } from "./controllers/negociacao-controller.js";
const controller = new NegociacoController();
const form = document.querySelector('.form');
form.addEventListener('submit', event => {
event.preventDefault();//não deixa recarregar a tela
controller.adiciona();
} )`
e o ultimo
import { Negociacao } from "../models/negociacao.js";
export class NegociacoController {
//a tipagem é htmlInputElement pois vem do html.
private inputData: HTMLInputElement;
private inputQuanditdade: HTMLInputElement;
private inputValor: HTMLInputElement;
constructor() {
//pega o input do html
this.inputData = document.querySelector("#data");
this.inputQuanditdade = document.querySelector("#quantidade");
this.inputValor = document.querySelector("#valor");
}
adiciona(): void {
const negociacao = this.criaNegociacao();
console.log(negociacao);
}
criaNegociacao(): Negociacao {
//regex (expressão regular), neste caso estou procurando todos os - e o G no final da expressão é para declarar como GLOBAL
const exp = /-/g;
//conversão em tipo date;
const date = new Date(this.inputData.value.replace(exp, ","));
//passo a string para numero inteiro
const quantidade = parseInt(this.inputQuanditdade.value);
//passo a tring para float
const valor = parseFloat(this.inputValor.value);
return new Negociacao(date, quantidade, valor);
}
limparFormulario(): void {
this.inputData.value = "";
this.inputQuanditdade.value = "";
this.inputValor.value = "";
this.inputData.focus();
}
}
Alguem ajuda?
