Introdução ao TypeScript e configuração do ambiente

Introdução ao TypeScript

O TypeScript foi lançado oficialmente pela Microsoft em 2012 e agora tem sido continuamente atualizado e mantido por 8 anos. O TypeScript cresceu muito rápido e agora se tornou uma habilidade obrigatória para o front end. TypeScript é na verdade um superconjunto de JavaScript, o que significa que TypeScript é construído em JavaScript e será eventualmente transformado em JavaScript. É como o Homem de Ferro da Marvel. Antes de usar uma armadura, ele era mediano. Embora inteligente e rico, ainda era próximo aos humanos. Mas com a armadura, ele é tão poderoso que pode até lutar com os deuses.

Talvez você ache que o que eu disse é muito exagerado.Quando comecei a aprender, pensei da mesma forma, mas demorou cerca de 2 anos, especialmente para projetos de grande escala, e era muito fácil de usar. Por exemplo, sua sintaxe estendida, orientação a objetos e tipagem estática. Se for um projeto de front-end, posso dar as cartas, exigirei fortemente que todos usem a sintaxe TypeScript para programação.

Use VSCode para escrever código

Link para download: https://code.visualstudio.com/

Se você já participou do trabalho, acredito que pelo menos 80% dos front-ends ao seu redor estão usando este editor.

Usando o VSCode para explicar, há outra vontade principal de que todos sejam produtos da Microsoft, para que tenham boa compatibilidade e suporte.O VSCode tem muitas adaptações de sintaxe especificamente para TypeScript, então será fácil de escrever Seja feliz.

Construção do ambiente de desenvolvimento TypeScript

Se você deseja usar o TypeScript para escrever código, primeiro precisa instalar seu ambiente de desenvolvimento, o que não é complicado.

1. Instale o ambiente operacional do Node

Você pode Node.jsir ao site oficial para baixar o Node para instalação (https://node.js.org). Recomenda-se que você baixe a LTSversão, que é a versão de suporte de longo prazo. Não vou demonstrar o processo de instalação.Este processo é o mesmo que instalar o QQ sem nenhuma dificuldade.

Se você já instalou, pode abrir a ferramenta de linha de comando e usar o node -vcomando para ver a versão instalada, mas geralmente há um comando que precisa ser verificado, ou seja npm -v, se ambos os comandos podem exibir o número da versão, isso significa que sua instalação do Node não tem nenhum problema.

2. Instale o typeScript globalmente

Se quiser usar o TypeScript, você deve primeiro instalá-lo globalmente em seu sistema TypeScript. Aqui você pode instalá-lo diretamente no VSCode. O comando de instalação pode usar npm ou yarn

npm install typescript -g
yarn global add typescript

Você pode usar qualquer um dos dois. Escolha de acordo com suas preferências. Usei o do vídeo npmpara instalar.

3. Crie um diretório de projeto e compile os arquivos TS

Em algum lugar do seu computador, crie uma nova pasta, armazene o código de exercícios typeScript e arraste-o para o VSCode, crie um novo Demo1.tsarquivo e escreva o código abaixo:

function test() {
    
    
  let web: string = "Hello World";
  console.log(web);
}

test();

Neste momento node Demo1.ts, a execução do seu uso é malsucedida, porque o Node não pode executar o TypeScriptarquivo diretamente , você precisa tsc Demo1.tsconvertê-lo. Após a conversão ser concluída, o typeScriptcódigo é compilado em javaScriptcódigo e um novo Demo1.jsarquivo é gerado . Neste momento, você entra na linha de comando e entra node Demo1.jsno terminal. Os caracteres podem ser reproduzidos sem problemas.

4. Instalação e uso do nó ts

Mas a eficiência desta operação é muito baixa. Você pode usar um ts-nodeplug-in para resolver este problema. Com este plug-in, não precisamos mais compilar e usá- ts-nodelo para ver diretamente o resultado da escrita.

Use o npmcomando para instalar globalmente, digite o seguinte comando diretamente na linha de comando:

npm install -g ts-node

Após a conclusão da instalação, você pode inserir diretamente os seguintes comandos no comando para visualizar os resultados.

ts-node Demo1.ts

Bem, aprenda muito hoje. Parabéns por aprender novas habilidades de programação, amigos, vamos! ! !

Link original: http://www.jspang.com/detailed?id=63


Há um projeto de curso de mini programa WeChat, necessidades de projeto completas, entre em contato com QQ pessoal: 505417246

Preste atenção à seguinte conta pública WeChat, você pode receber miniaplicativo WeChat, Vue, TypeScript, front-end, uni-app, full-stack, Nodejs, Python e outros materiais de aprendizagem práticos. O
resumo de conhecimento de front-end mais recente e completo e o código-fonte do projeto será lançado para o público do WeChat assim que possível. Número, preste atenção, obrigado

Depois de prestar atenção ao relato oficial , responda às perguntas da entrevista de front-end e receba um grande número de dados em pdf de resumo de perguntas da entrevista de front-end
Insira a descrição da imagem aqui

Acho que você gosta

Origin blog.csdn.net/m0_46171043/article/details/115263422
Recomendado
Clasificación