Tutorial do TypeScript: Conheça os fundamentos do TypeScript



TypeScript é um superconjunto fortemente tipado de JavaScript. Neste Tutorial do TypeScript, entraremos em detalhes e compreenderemos o básico.

TypeScript é um superconjunto fortemente tipado de que compila em JavaScript simples. Você pode usar essa linguagem para desenvolvimento de JavaScript em escala de aplicativo. Além disso, pode ser executado em qualquer navegador, host e sistema operacional. Neste Tutorial do TypeScript, vamos nos aprofundar no TypeScript e entender os fundamentos na seguinte sequência:

Introdução ao TypeScript

TypeScript é um superconjunto tipado de JavaScript que compila para JavaScript simples. TypeScript é puramente orientado a objetos com classes, interfaces e linguagens de programação estaticamente tipadas como C # ou . Requer um compilador para compilar e gerar um arquivo JavaScript. Basicamente, o TypeScript é a versão ES6 do JavaScript com alguns recursos adicionais.





Um código TypeScript é escrito em um arquivo com extensão .ts e então compilado em JavaScript usando o compilador. Você pode escrever o arquivo em qualquer editor de código e o compilador precisa ser instalado em sua plataforma. Após a instalação, o comando tsc .ts compila o código TypeScript em um arquivo JavaScript simples.

Sintaxe:



var message: string = 'Bem-vindo à Edureka!' console.log (mensagem)

Na compilação, ele gera o seguinte código JavaScript:

// Gerado por typescript 1.8.10 var message = 'Bem-vindo ao Edureka!' console.log (mensagem)

Recursos do TypeScript

recursos - tutorial de digitação - edureka

  • Multiplataforma: O compilador TypeScript pode ser instalado em qualquer sistema operacional, como Windows, MacOS e Linux.



  • Linguagem Orientada a Objetos : TypeScript fornece recursos como Aulas , Interfaces e módulos. Portanto, ele pode escrever código orientado a objetos para desenvolvimento do lado do cliente e do lado do servidor.

  • Verificação de tipo estática : TypeScript usa tipagem estática e ajuda a verificação de tipo em tempo de compilação. Assim, você pode encontrar erros ao escrever o código sem executar o script.

  • Digitação Estática Opcional : TypeScript também permite digitação estática opcional, caso você esteja usando a digitação dinâmica de JavaScript.

  • Manipulação DOM : Você pode usar o TypeScript para manipular o DOM para adicionar ou remover elementos.

  • Recursos do ES 6 : TypeScript inclui a maioria dos recursos planejados do ECMAScript 2015 (ES 6, 7), como classe, interface, funções de seta, etc.

Vantagens de usar TypeScript

  • TypeScript é rápido, simples, fácil de aprender e é executado em qualquer navegador ou mecanismo JavaScript.

  • Isto é semelhante para JavaScript e usa a mesma sintaxe e semântica.

  • Isso ajuda os desenvolvedores de back-end a escrever front-end codificar mais rápido .

  • O código TypeScript pode ser chamado de um código JavaScript existente . Além disso, funciona com bibliotecas e estruturas JavaScript existentes sem problemas.

  • O arquivo de definição, com extensão .d.ts, fornece suporte para bibliotecas JavaScript existentes, como Jquery, D3.js , etc. Assim, o código TypeScript pode adicionar Bibliotecas JavaScript usando definições de tipo para aproveitar os benefícios de verificação de tipo, preenchimento automático de código e documentação em bibliotecas JavaScript digitadas dinamicamente existentes.

  • Inclui recursos de ES6 e ES7 que pode ser executado em motores JavaScript de nível ES5, como Node.js .

Agora que você entendeu o que é TypeScript, vamos prosseguir com este Tutorial do TypeScript e dar uma olhada nos diferentes tipos.

Tipos TypeScript

O Type System representa os diferentes tipos de valores suportados pelo idioma. Ele verifica o validade do fornecido valores antes de serem armazenados ou manipulados pelo programa.

Pode ser classificado em dois tipos, como:

  • Construídas em : Inclui número, string, booleano, void, nulo e indefinido.
  • Usuário definido : Inclui Enumerações (enums), classes, interfaces, arrays e tupla.

Agora vamos prosseguir com este Tutorial do TypeScript e entender mais sobre as variáveis.

Tutorial do TypeScript: Variáveis

Uma variável é um espaço nomeado na memória que é usado para armazenar valores.

A sintaxe de tipo para declarar uma variável no TypeScript inclui dois pontos (:) após o nome da variável, seguido por seu tipo. Semelhante ao JavaScript, usamos o var palavra-chave para declarar uma variável.

Existem quatro opções quando declaramos uma variável:

var [identificador]: [anotação de tipo] = valor
var [identificador]: [anotação de tipo]
var [identificador] = valor
var [identificar]

Exemplo:

var name: string = 'Daisy' var empid: number = 1001 console.log ('nome' + nome) console.log ('id do funcionário' + empid)

Na compilação, ele irá gerar o seguinte código JavaScript:

// Gerado pelo texto de tipo 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('nome' + nome) console.log ('id do funcionário:' + empid)

Resultado:

nome: margarida
id de funcionário: 1001

Agora vamos passar para o próximo tópico de nosso Tutorial TypeScript.

diferença entre ansible e chef

Operadores

Um operador é usado para definir funções que serão executadas nos dados. Os dados com os quais os operadores trabalham são chamados de operandos. Existem diferentes tipos de operadores em TypeScript, como:

  • Operadores aritméticos
  • Operadores lógicos
  • Operadores relacionais
  • Operadores bit a bit
  • Operadores de atribuição

Operadores aritméticos

Operadores Descrição

Adição (+)

retorna a soma dos operandos

Subtração (-)

retorna a diferença dos valores

Multiplicação (*)

retorna o produto dos valores

Divisão (/)

executa a operação de divisão e retorna o quociente

Módulo (%)

executa a operação de divisão e retorna o resto

Incremento (++)

Aumenta o valor da variável em um

Diminuir (-)

Diminui o valor da variável em um

Exemplo:

var num1: número = 10 var num2: número = 2 var res: number = 0 res = num1 + num2 console.log ('Soma:' + res) res = num1 - num2 console.log ('Diferença:' + res) res = num1 * num2 console.log ('Produto:' + res)

Resultado:

Soma: 12
Diferença: 8
Produto: 20

Operadores lógicos

Operadores Descrição

AND (&&)

Ele retorna verdadeiro apenas se todas as expressões especificadas retornarem verdadeiro

OU (||)

Retorna verdadeiro se pelo menos uma das expressões especificadas retornar verdadeiro

NÃO (!)

Ele retorna o inverso do resultado da expressão.

Exemplo:

var média: número = 20 var porcentagem: número = 90 console.log ('Valor da média:' + média + ', valor da porcentagem:' + porcentagem) var res: booleano = ((média> 50) && (porcentagem> 80 )) console.log ('(média> 50) && (porcentagem> 80):', res)

Resultado:

Valor médio: 20, valor percentual: 90
(média> 50) && (porcentagem> 80): falso

Operadores Relacionais

Operadores Descrição

>

Maior que

<

Menos do que

> =

Melhor que ou igual a

<=

Menor ou igual a

==

Igualdade

! =

Não igual

Exemplo:

var num1: número = 10 var num2: número = 7 console.log ('Valor de num1:' + num1) console.log ('Valor de num2:' + num2) var res = num1> num2 console.log ('num1 maior que num2: '+ res) res = num1

Resultado:

Valor de num1: 10
Valor de num2: 7
num1 maior que num2: verdadeiro
num1 menor que num2: falso

Operadores bit a bit

Operadores Descrição

E bit a bit (&)

executa uma operação booleana AND em cada bit de seus argumentos inteiros.

OR bit a bit (|)

Ele executa uma operação booleana OR em cada bit de seus argumentos inteiros.

XOR bit a bit (^)

Ele executa uma operação booleana OU exclusiva em cada bit de seus argumentos inteiros.

NOT bit a bit (~)

Este é um operador unário e opera invertendo todos os bits do operando.

Desvio à esquerda (<<)

Ele move todos os bits em seu primeiro operando para a esquerda pelo número de casas especificado no segundo operando.

Shift à direita (>>)

O valor do operando esquerdo é movido para a direita pelo número de bits especificado pelo operando direito.

Shift à direita com zero (>>>)

É semelhante ao operador >>, exceto que os bits deslocados à esquerda são sempre zero.

Exemplo:

var a: number = 2 // Apresentação de bits 10 var b: number = 3 // Apresentação de bits 11 var result result = (a & b) console.log ('(a & b) =>', result) result = ( a | b) console.log ('(a | b) =>', resultado)

Resultado:

(a & b) => 2
(a | b) => 3

Operadores de atribuição

Operadores Descrição

Atribuição Simples (=)

Atribui valores do operando do lado direito para o operando do lado esquerdo

Adicionar e atribuir (+ =)

Ele adiciona o operando direito ao operando esquerdo e atribui o resultado ao operando esquerdo.

Subtrair e atribuir (- =)

Ele subtrai o operando direito do operando esquerdo e atribui o resultado ao operando esquerdo.

Multiplique e atribua (* =)

Ele multiplica o operando direito pelo operando esquerdo e atribui o resultado ao operando esquerdo.

Dividir e atribuir (/ =)

Ele divide o operando esquerdo com o operando direito e atribui o resultado ao operando esquerdo.

Exemplo:

var a: número = 12 var b: número = 10 a = b console.log ('a = b:' + a) a + = b console.log ('a + = b:' + a) a - = b console .log ('a- = b:' + a)

Resultado:

a = b: 10
a + = b: 20
a - = b: 10

Esses eram os diferentes operadores. Agora vamos prosseguir com nosso Tutorial de TypeScript e aprender sobre loops.

rotações

Pode haver situações em que um bloco de código precise ser executado várias vezes. UMA ciclo declaração nos permite executar uma declaração ou grupo de declarações várias vezes.

Os loops TypeScript podem ser classificados como:

For Loop

o para loop é uma implementação de um loop definido.

Sintaxe:

for (primeira expressão segunda expressão terceira expressão) {// instruções a serem executadas repetidamente}

Aqui, a primeira expressão é executada antes do início do loop. A segunda expressão é a condição para a execução do loop. E a terceira expressão é executada após a execução de cada bloco de código.

Exemplo:

para (deixe i = 0 i<2 i++) { console.log ('Execute block statement' + i) }

Resultado:

Execute a instrução de bloco 0
Execute a instrução de bloco 1

While Loop

O loop while executa as instruções cada vez que a condição especificada é avaliada como verdadeira.

Sintaxe:

while (expressão de condição) {// bloco de código a ser executado}

Exemplo:

deixe i: número = 1 enquanto (i<3) { console.log( 'Block statement execution no.' + i ) i++ }

Resultado:

Execução da instrução de bloco nº 1
Execução da instrução de bloco nº 2

Do..While Loop

O loop do & hellipwhile é semelhante ao loop while, exceto que ele não avalia a condição pela primeira vez que o loop é executado.

Sintaxe:

faça {// bloco de código a ser executado} enquanto (expressão de condição)

Exemplo:

deixe i: número = 1 fazer {console.log ('Bloco de execução da instrução no.' + i) i ++} enquanto (i<3)

Resultado:

Execução da instrução de bloco nº 1
Execução da instrução de bloco nº 2

Além dessas, existem as instruções break e continue no TypeScript que são usadas em um loop.

Declaração de quebra

A instrução break é usada para tirar o controle de uma construção. Usar a instrução break em um loop ajuda o programa a sair do loop.

Exemplo:

var i: número = 1 enquanto (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop

Resultado:

O primeiro múltiplo de 5 entre 1 e 10 é: 5

Continuar declaração

A instrução continue ignora as instruções subsequentes na iteração atual e leva o controle de volta ao início do loop.

Exemplo:

var num: number = 0 var count: number = 0 for (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)

Resultado:

A contagem de valores ímpares entre 0 e 10 é: 5

Esses eram os diferentes loops no TypeScript. Agora, vamos prosseguir com nosso Tutorial TypeScript e entender as funções.

Funções

Em JavaScript, funções são uma das partes mais importantes, pois é uma linguagem de programação funcional. As funções garantem que o programa pode ser mantido e reutilizado e organizado em blocos legíveis. Embora o TypeScript forneça o conceito de classes e módulos, as funções ainda são parte integrante da linguagem.

Funções Nomeadas

Uma função nomeada é usada para declarar e chamar uma função por seu nome fornecido.

Exemplo:

function display () {console.log ('Função TypeScript')} display ()

Resultado:

Função TypeScript

Função Anônima

Uma função anônima é aquela definida como uma expressão. Esta expressão é armazenada em uma variável. Essas funções são chamadas usando o nome da variável na qual a função está armazenada.

Exemplo:

let greeting = function () {console.log ('TypeScript Function')} greeting ()

Resultado:

Função TypeScript

Função de seta

Notações de setas grossas são usadas para funções anônimas, ou seja, para expressões de função. Eles também são chamados de funções lambda em outras linguagens.

Sintaxe:

(param1, param2, ..., paramN) => expressão

Usar a seta grande (=>) elimina a necessidade de usar a palavra-chave ‘função’. Os parâmetros são passados ​​entre colchetes angulares e a expressão da função é colocada entre colchetes {}.

Exemplo:

deixe soma = (x: número, y: número): número => {retorno x + y} soma (10, 30) // retorna 40

Sobrecarga de função

TypeScript fornece o conceito de sobrecarga de função. Assim, você pode ter várias funções com o mesmo nome, mas diferentes tipos de parâmetro e tipo de retorno.

Exemplo:

função add (a: string, b: string): string função add (a: número, b: número): número retornar a + b} add ('Olá', 'Edureka') // retorna 'Olá Edureka' add ( 10, 10) // retorna 20

No exemplo acima, temos a mesma função add () com duas declarações de função e uma implementação de função. A primeira assinatura possui dois parâmetros do tipo string, enquanto a segunda assinatura possui dois parâmetros do tipo número.

Esses são os diferentes tipos de funções. Agora, vamos prosseguir com nosso Tutorial de TypeScript e entender as strings em TypeScript.

Tutorial de TypeScript: Strings

o é outro tipo de dados primitivo usado para armazenar dados de texto. Os valores da string são colocados entre aspas simples ou duplas.

Sintaxe:

var var_name = new String (string)

Existem diferentes propriedades de métodos disponíveis no objeto String, como:

  • Construtor - Retorna uma referência à função String que criou o objeto
  • comprimento - Isso retorna o comprimento da string
  • Protótipo - Esta propriedade permite adicionar propriedades e métodos a um objeto

Exemplo:

let name = new String ('Bem-vindo ao Edureka!') console.log ('Mensagem:' + nome) console.log ('Comprimento:' + nome.length)

Resultado:

Mensagem: Bem-vindo à Edureka!
Comprimento: 19

Métodos de String

A lista de métodos no objeto String inclui:

Método Descrição

charAt ()

Ele retorna o caractere no índice especificado

charCodeAt ()

Ele retorna um número que indica o valor Unicode do caractere no índice fornecido

concat ()

Combina o texto de duas strings e retorna uma nova string

índice de()

Retorna o índice dentro do objeto String de chamada da primeira ocorrência do valor especificado

lastIndexOf ()

Ele retorna o índice dentro do objeto String de chamada da última ocorrência do valor especificado

partida()

Usado para combinar uma expressão regular com uma string

localeCompare ()

Retorna um número que indica se uma string de referência vem antes ou depois ou é a mesma que a string fornecida na ordem de classificação

pesquisa()

Isso executa a busca por uma correspondência entre uma expressão regular e uma string especificada

substituir()

Usado para encontrar uma correspondência entre uma expressão regular e uma string e para substituir a substring correspondida por uma nova substring

fatia()

Ele extrai uma seção de uma string e retorna uma nova string

Dividido()

Divide um objeto String em uma matriz de strings, separando a string em substrings

substr ()

Retorna os caracteres em uma string começando no local especificado até o número especificado de caracteres

substring ()

Ele retorna os caracteres em uma string entre dois índices na string

toLocaleLowerCase ()

Os caracteres dentro de uma string são convertidos para minúsculas, respeitando o local atual

toLocaleUpperCase ()

Os caracteres dentro de uma string são convertidos em maiúsculas, respeitando o local atual

toLowerCase ()

Ele retorna o valor da string de chamada convertido em minúsculas

toUpperCase ()

Ele retorna o valor da string de chamada convertido em maiúsculas

para sequenciar()

Retorna uma string que representa o objeto especificado

valor de()

Retorna o valor primitivo do objeto especificado

Exemplo:

let str: string = 'Bem-vindo a Edureka' str.charAt (0) // retorna 'w' str.charAt (2) // retorna 'l' 'Bem-vindo a Edureka'.charAt (2) retorna' l 'let str1 : string = 'welcome' let str2: string = 'Edureka' str1.concat (str2) // retorna 'welcomeEdureka' str1.concat ('', str2) // retorna 'welcome Edureka' str1.concat ('' to ' ') // retorna' bem-vindo a '

Agora que você sabe sobre strings, vamos prosseguir com este tutorial do TypeScript e entender os arrays.

Arrays em TypeScript

A matriz é um tipo especial de tipo de dados que armazena vários valores de diferentes tipos de dados sequencialmente usando uma sintaxe especial. Os elementos da matriz são identificados por um número inteiro único denominado subscrito ou índice do elemento.

Sintaxe:

var array_name [: tipo de dados] // declaração array_name = [val1, val2, valn ..] // inicialização

Exemplo:

let names: Array names = ['John', 'Daisy', 'Rachel'] let ids: Array ids = [101, 700, 321]

Métodos Array

Aqui está uma lista de diferentes métodos Array que podem ser usados ​​para diferentes propósitos:

Método Descrição

filtro()

Cria uma nova matriz com todos os elementos desta matriz para a qual a função de filtragem fornecida retorna verdadeiro

cada()

Retorna verdadeiro se cada elemento nesta matriz satisfizer a função de teste fornecida

concat ()

Retorna uma nova matriz composta por esta matriz unida a outras matrizes

índice de()

Retorna o primeiro ou o menor índice de um elemento dentro da matriz igual ao valor especificado

para cada()

Chama uma função para cada elemento da matriz

Junte-se()

Une todos os elementos de uma matriz em uma string

lastIndexOf ()

Retorna o último ou maior índice de um elemento dentro da matriz igual ao valor especificado

mapa()

Cria uma nova matriz com os resultados da chamada de uma função fornecida em cada elemento desta matriz

empurrar()

Adiciona um ou mais elementos ao final de uma matriz e retorna o novo comprimento da matriz

pop ()

Remove o último elemento de uma matriz e retorna esse elemento

reduzir()

Aplique uma função simultaneamente contra dois valores da matriz da esquerda para a direita para reduzi-la a um único valor

reduzirRight ()

Aplique uma função simultaneamente contra dois valores da matriz da direita para a esquerda para reduzi-la a um único valor

marcha ré()

Inverte a ordem dos elementos de uma matriz

mudança()

Remove o primeiro elemento de uma matriz e retorna esse elemento

fatia()

Extrai uma seção de uma matriz e retorna uma nova matriz

alguns()

Retorna verdadeiro se pelo menos um elemento nesta matriz satisfaz a função de teste fornecida

ordenar()

Ele classifica os elementos de um array

para sequenciar()

Retorna uma string que representa a matriz e seus elementos

emenda ()

Ele adiciona e / ou remove elementos de uma matriz

não mudar ()

Adiciona um ou mais elementos à frente de uma matriz e retorna o novo comprimento da matriz

Exemplo:

nome da var: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (nome) // output: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // output: Tara name.push ('Rachel') console.log (name) // output: ['John', 'Daisy', 'Rachel']

Agora, vamos prosseguir com este Tutorial do TypeScript e aprender sobre interfaces.

Interfaces TypeScript

A interface é uma estrutura que define o contrato em seu aplicativo. Ele define a sintaxe a ser seguida pelas classes. Ele contém apenas a declaração dos membros e é responsabilidade da classe derivada definir os membros.

Exemplo:

interface Employee {empID: número empName: string getSalary: (número) => número // função de seta getManagerName (número): string}

No exemplo acima, o Empregado interface inclui duas propriedades empID e empName . Também inclui uma declaração de método getSalaray usando um função de seta que inclui um parâmetro de número e um tipo de retorno de número. o getManagerName método é declarado usando uma função normal.

TypeScript Aulas

O TypeScript introduziu classes para que possam aproveitar os benefícios das técnicas orientadas a objetos, como encapsulamento e abstração. A classe em TypeScript é compilada para funções JavaScript simples pelo compilador TypeScript para funcionar em plataformas e navegadores.

Uma aula inclui o seguinte:

  • Construtor
  • Propriedades
  • Métodos

Exemplo:

class Employee {empID: número empName: construtor de string (ID: número, nome: string) {this.empName = name this.empID = ID} getSalary (): number {return 40000}}

Herança

Suporta TypeScript Herança pois é a capacidade de um programa de criar novas classes a partir de uma classe existente. A classe que é estendida para criar classes mais novas é chamada de classe pai ou superclasse. As classes recém-criadas são chamadas de classes filhas ou subclasses.

Uma classe herda de outra classe usando a palavra-chave ‘extends’. As classes filhas herdam todas as propriedades e métodos, exceto membros privados e construtores da classe pai. Porém, o TypeScript não oferece suporte a herança múltipla.

Sintaxe:

classe child_class_name estende parent_class_name

Exemplo:

class Person {name: string constructor (name: string) {this.name = name}} class Employee extends Person {empID: construtor de número (empID: número, nome: string) {super (nome) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', Employee ID =' + this.empID)}} let emp = new Employee (701, 'Jason') emp.displayName () // Nome = Jason, ID do funcionário = 701

Agora que você conhece as classes, vamos prosseguir com este tutorial do TypeScript e aprender sobre os objetos.

Objetos em TypeScript

Um objeto é uma instância que contém um conjunto diferente de pares de chave-valor. Os valores podem ser valores escalares ou funções ou mesmo uma matriz de outros objetos.

Sintaxe:

var object_name = {key1: “value1”, // valor escalar key2: “value”, key3: function () {// functions}, key4: [“content1”, “content2”]

Um objeto pode conter valores escalares, funções e estruturas como matrizes e tuplas.

Exemplo:

var person = {firstname: 'Danny', lastname: 'Green'} // acessar os valores do objeto console.log (person.firstname) console.log (person.lastname)

Na compilação, ele irá gerar o mesmo código em JavaScript.

Resultado:

tipo de transformação em informática

Danny
Verde

Esses eram os diferentes elementos importantes do TypeScript. Agora, vamos prosseguir com este Tutorial do TypeScript e dar uma olhada em um exemplo para entender o caso de uso.

Tutorial do TypeScript: caso de uso

Aqui, aprenderemos como converter um existente para TypeScript.

Quando compilamos um arquivo TypeScript, ele produz o arquivo JavaScript correspondente com o mesmo nome. Aqui, precisamos garantir que nosso arquivo JavaScript original, que atua como entrada, não possa estar no mesmo diretório, para que o TypeScript não os substitua.

O processo de migração de JavaScript para TypeScript inclui as seguintes etapas:

1. Adicione o arquivo tsconfig.json ao projeto

Você precisa adicionar um arquivo tsconfig.json ao projeto. O TypeScript usa um arquivo tsconfig.json para gerenciar as opções de compilação do projeto, como quais arquivos você deseja incluir e excluir.

{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}

2. Integre com uma ferramenta de construção

A maioria dos projetos de JavaScript tem uma ferramenta de construção integrada como gulp ou webpack. Você pode integrar projetos com webpack das seguintes maneiras:

  • Execute o seguinte comando no terminal:
$ npm install awesome-typescript-loader source-map-loader

Na integração do webpack, você usa o awesome-typescript-loader combinado com o source-map-loader para depuração mais fácil do código-fonte.

  • Em segundo lugar, mescle a propriedade de configuração do módulo em nosso arquivo webpack.config.js para incluir carregadores.

3. Mova todos os arquivos .js para arquivos .ts

Nesta etapa, você deve renomear o arquivo .js para arquivo .ts. Da mesma forma, se o arquivo usar JSX, você precisará renomeá-lo para .tsx. Agora, se abrirmos esse arquivo em um editor que suporte TypeScript, alguns dos códigos podem começar a apresentar erros de compilação. Portanto, a conversão de arquivos um por um permite lidar com os erros de compilação mais facilmente. Se o TypeScript encontrar algum erro de compilação durante a conversão, ele ainda será capaz de traduzir o código.

4. Verifique se há erros

Depois de mover o arquivo js para o arquivo ts, imediatamente, o TypeScript iniciará a verificação de tipo do nosso código. Portanto, você pode obter erros de diagnóstico no código JavaScript.

5. Use bibliotecas JavaScript de terceiros

Projetos JavaScript usam bibliotecas de terceiros como ou Lodash. Para compilar arquivos, o TypeScript precisa conhecer os tipos de todos os objetos dessas bibliotecas. Os arquivos de definição de tipo TypeScript para bibliotecas JavaScript já estão disponíveis em DefinitelyTyped. Portanto, não há necessidade de instalar este tipo externamente. Você precisa instalar apenas os tipos que são usados ​​em nosso projeto.

Para jQuery, você pode instalar a definição:

$ npm install @ types / jquery

Depois disso, faça as alterações no projeto JavaScript, execute a ferramenta de construção. Agora, você deve ter o projeto TypeScript compilado em JavaScript simples que pode ser executado no navegador.

Com isso, chegamos ao final deste Tutorial do TypeScript. Espero que você tenha entendido todos os elementos importantes do TypeScript.

Confira o por Edureka. O Treinamento de Certificação de Desenvolvimento Web ajudará você a aprender como criar sites impressionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery e APIs do Google e implementá-lo no Amazon Simple Storage Service (S3).

Tem alguma questão para nós? Mencione isso na seção de comentários do “Tutorial do TypeScript” e entraremos em contato com você.