Bem, bem-vindo de volta e nesta lição, vamos guiá-lo para instalar o TypeScript no seu projecto e certificando-se de que todo o resto você pode querer usar funciona corretamente. E como você deve saber, se você viu algum dos meus outros vídeos, Eu sou um usuário do Visual Studio, então vou usar isso para configurar isso. E ao fazer isso, vou criar um projeto totalmente novo e será um aplicativo da Web ASP.NET Core. E vou dar um nome lá e vou usar o modelo MVC aqui, não configurado para HTTPS. Estou usando o Core 3.1. Isso deve funcionar em qualquer outra versão que você está usando do Core. E a primeira coisa que eu quero fazer ser capaz de usar TypeScript vou adicionar esse pacote, então vou usar o NuGet para fazer isso e semelhante, esta é a versão da Microsoft do Node Package Manager. E eu vou precisar deste pacote que constrói meu TypeScript em JavaScript. Então, vou apenas adicionar isso aqui no projeto. E quaisquer dependências, assim como o npm, todas as dependências devem ser instaladas ao mesmo tempo. A próxima coisa que preciso fazer vou adicionar um arquivo de configuração TypeScript. Posso fazer isso no Visual Studio apenas fazendo Add New Item. E quero procurar aqui o TypeScript, procure para que eu não tenha que ir a todos os lugares. Aqui vamos nós. Tsconfig.json. Então você pode simplesmente deixar assim chamado. Agora, você obterá um conjunto padrão de opções quando você coloca isso lá e eu tenho um conjunto bastante típico de outras opções que eu gosto de fazer e este é o lugar onde você pode configurar o caminho o compilador TypeScript funciona. Observe, por exemplo, aqui, Estou visando ECMAScript 6. Eu tenho uma biblioteca que vai entender ES2017 e ser capaz de manipular o DOM. E o mais importante, no mínimo, Eu quero dizer qual é o meu diretório de saída vai ser para meus arquivos TypeScript que se tornam JavaScript. Portanto, neste caso, eles estão em wwwroot / js. Então, vamos ter certeza de que tenho isso. Aqui vamos nós. Eu já tenho essa pasta lá. Então está bom, muito bom até agora. Eu também preciso de um lugar que vou armazenar meus scripts TypeScript. Então, vou adicionar uma nova pasta aqui chamada Scripts. Não em wwwroot. Isso existe fora disso. E vamos adicionar um arquivo TypeScript aqui e ver se podemos fazer algo funcionar. Portanto, um arquivo TypeScript termina em ts. Lá vamos nós, e vou chamá-lo de main.ts. Então o que vai acontecer aqui é que vamos fazer nosso TypeScript e toda vez que eu construo este projeto no Visual Studio, toda vez que eu compilar, isso vai se transformar em um bom e velho JavaScript normal. Então você pode ver de cara as coisas que é um pouco diferente. Temos a digitação aqui, por exemplo. Podemos dizer que é uma string e usado antes de definido. Eu recebo essas pequenas linhas verdes onduladas aqui. Portanto, este é o poço do Visual Studio, em vez disso, o linting do TypeScript aqui que mostra essas coisas como erros e avisos. Então, neste caso, por exemplo, Eu tenho o nome lá e é inferido de um literal de string, então eu realmente não precisava disso. Então, isso vai me denunciar por esse tipo de coisa. E então este chamador foi usado antes de ser definido mas acho que ficaremos bem lá. E você pode apenas considerar isso como dicas. Se isso é irritante para você, há um arquivo que você pode abrir, eslintrc, e você normalmente o encontrará em seu diretório de usuários, direto da raiz do diretório de usuários. Você pode ver lá, existem algumas opções que você pode alterar. Então, se você definir como zero, isso o tornará falso. Portanto, afirmações de tipo consistente. Estes são apenas alguns dos que eu normalmente mudo porque, novamente, eles são dicas para a maior parte e se você sabe de que tipo do JavaScript que você está criando lá, então tudo bem, tanto melhor. Então, eu deveria apenas ser capaz para ainda construir o projeto com este porque acredito que é apenas um aviso. Então, vamos construir aqui e veja se funciona. Tive sucesso e eu deveria ter, lá vamos nós, aqui está o meu arquivo principal que está em wwwroot e, novamente, nenhuma evidência necessariamente que veio do TypeScript. É apenas o bom e velho JavaScript normal. Então, se eu for, vamos entrar aqui e vou criar uma página e vamos testar e ter certeza que isso realmente funciona. Agora, algumas dessas funcionalidades, vamos adicionar mais tarde. Por agora, tudo o que tenho é o principal e vou chamar minha função tsHello. Portanto, é apenas JavaScript normal. Eu tenho meu link de script lá. Eu chamo tsHello, que termina no meu arquivo JavaScript principal. E eu vou ser capaz de apenas trazer isso à tona e vejo o valor quando clico nesse botão e isso deve nos dar pelo menos uma boa ideia para começar com o que está funcionando aqui. E observe, não estamos vendo nada ainda, então vamos verificar nosso console e podemos ver lá, ok, é porque temos um pouco de JQuery na página e JQuery ainda não é compatível. Então, vamos construir isso em e então voltaremos e faremos tudo. Então, o que precisamos fazer a seguir é adicionar suporte para JQuery. Vamos adicionar isso ao nosso arquivo package.json e não temos um ainda, então, no Visual Studio, vou fazer isso de novo como um novo item adicionado. E isso está na lista aqui como um arquivo de configuração npm. Podemos apenas deixá-lo com o nome de package.json e vou adicionar às minhas dependências de desenvolvimento lá que eu sou dependente de JQuery e acredito que a versão que estou usando é 3.5.1. Vou adicionar isso lá e isso deve me permitir para agora usar JQuery e, de fato, Acho que posso adicionar outro arquivo TypeScript. E use JQuery nesse arquivo também. Vamos ver, então vamos fazer isso e vamos chamá-lo de biblioteca. Vamos apenas ir em frente e pegar qualquer que seja a versão JQuery aqui. Ok, então vou apenas executar uma pequena função lá. Diz novamente não consigo encontrar o nome mas deve ser capaz de no momento em que construirmos novamente e no momento em que executarmos essa página. E acabamos de obter aquele sinalizador desnecessário para qualquer um. Então ts-example-2 em nossa página, vamos voltar para tsHello, é só um pequeno intervalo que vamos colocar algo e vamos chamar essa versão de programa a partir daqui. Tudo bem, então vamos tentar isso e veja se trabalhamos. E vamos tentar de novo e não vemos nada. Ok, ainda temos $ não definidos. Portanto, vamos ter certeza de que ele está realmente no lugar. Ok, estou fazendo referência a isso nos meus módulos do Node em vez de wwwroot. Então, esse é apenas um problema particular do meu projeto aqui. Então, vamos incluir isso. Aqui vamos nós. E vamos tentar mais uma vez aqui. Agora, se você ainda está tendo problemas com este e os problemas que você pode estar tendo é que o JQuery não é reconhecido. Há uma pequena coisa que você precisa fazer. No meu caso particular, adicionei JQuery usando npm. Então, se você executar esta pequena declaração, isso deve fazer com que o suporte de JQuery ainda funciona em seu aplicativo, e vou torná-lo um pouco maior para você. Então, se você adicionou JQuery, se você está usando como parte do modelo que já estava lá, você pode não precisar disso. Mas, neste caso, estou ligado a ele na minha página usando npm. Isso deve fazer com que funcione. Vamos trazer esse olá, mundo de volta. Veja, às vezes, olá, o mundo não é assim tão fácil, não é? Vamos trazer isso de volta e veja se funciona. Ah, agora temos nossa folha de estilo. Aqui vamos nós. Então eu recebi o olá, e pronto, minha versão JQuery é 3.5.1. Portanto, nesta lição, aprendemos como instalar o JQuery em nosso aplicativo da web. E como ter certeza de que temos suporte para bibliotecas de terceiros. Fique ligado, em nossa próxima lição, faremos nossos primeiros recursos em vista do TypeScript, parte um.
