introdução

No último artigo, mencionei que vou criar uma coluna para compartilhar com vocês meus ganhos e notas no aprendizado do TypeScript, bem como um pouco de compartilhamento de experiências. A coluna foi criada. A partir de agora, um artigo será atualizado a cada dia para compartilhar com você, amigos que querem aprender e discutir podem continuar prestando atenção.

No desenvolvimento front-end da Web, JavaScript (JS) sempre foi a linguagem de programação dominante. Embora o JS tenha as características do , mas no desenvolvimento de projetos de grande porte, funções como JS e 灵活, dificultam a manutenção e a depuração do programa durante o processo de desenvolvimento. Para resolver esses problemas, o TypeScript (TS) surgiu para resolver uma série de problemas acima.易用缺少类型检查编译时错误检查

TypeScript é um tipo desenvolvido pela Microsoft 静态类型的超集que é baseado em JavaScript e adiciona novos recursos como 类型注解, 接口, e assim por diante. 类TS possui 良好的类型检查e pode melhorar a soma 编译时错误检查do código , tornando-o amplamente utilizado no desenvolvimento de projetos de grande porte .可读性可维护性可靠性

Neste artigo, abordaremos a transição de JS para TS e forneceremos um guia para iniciantes sobre como começar a usar TS.

Por que você precisa usar o TypeScript?

Ao usar JS para desenvolvimento, muitas vezes nos deparamos com alguns problemas, como:
- 无法使用 IDE 进行代码自动补全
- 常量定义容易被误修改
- 在代码执行时无法进行编译时的错误检查
- etc.
O surgimento de TS resolve esses problemas: introduz novos conceitos, como anotações de tipo, interfaces e enumerações, e realiza verificação de tipo e verificação de erro no código em tempo de compilação, o que pode melhorar a legibilidade e a confiabilidade do código. Além disso, o TS suporta ES6 e recursos posteriores e também pode fornecer melhor suporte IDE durante o desenvolvimento.

Uma breve olhada na sintaxe básica do TypeScript

1. Digite as anotações

No TS, você pode 定义的变量后面adicionar 英文的冒号e 变量的类型especificar o tipo do atributo, para que o IDE possa realizar a verificação de tipo nas variáveis que definimos.

No TS, você pode usar anotações de tipo para especificar o tipo de variáveis, como:

let str: string = "Hello TypeScript";
let num: number = 123;
let bool: boolean = true;

2. Interface

As interfaces TypeScript (Interfaces) podem ser usadas para criar tipos nomeados para descrever a forma de um objeto (Shape). Eles são usados extensivamente no TypeScript para descrever parâmetros de função, objetos, classes, etc. Uma interface pode incluir declarações de propriedade e método, mas nenhum detalhe de implementação. Apenas define quais propriedades e métodos o objeto deve ter. Defina uma interface usando interfacea palavra-chave ,
A interface no TS é usada para definir o contrato da estrutura de dados, e a interface pode ser usada para descrever as propriedades e métodos do objeto, como:
```
interface Person {
      
      
    name: string;
    age: number;
    sayHello(): void;
}
```

3. classe

As classes podem ser usadas para definir objetos em TS, que contêm atributos e métodos, como:

class Person {
      
      
    name: string;
    age: number;
    constructor(name: string, age: number) {
      
      
        this.name = name;
        this.age = age;
    }
    sayHello(): void {
      
      
        console.log(`Hello, ${
        
        this.name}`);
    }
}

4. Genéricos

Genéricos TypeScript são 一种在编程语言中实现通用性的技术. Os genéricos nos permitem usar tipos parametrizados ao escrever funções genéricas, classes, interfaces etc., melhorando assim a flexibilidade e a reutilização do código. No TypeScript, os genéricos podem ser aplicados a vários cenários, como funções, classes e interfaces.
Os genéricos são um método de tipos indeterminados ao escrever código. Os genéricos podem tornar o código mais geral, como:
```
function identity(arg: T): T {
      
      
    return arg;
}
```

5. Enumeração

Enumerações em TS são usadas para definir um conjunto de constantes nomeadas, como:

enum Direction {
      
      
    Up = 1,
    Down,
    Left,
    Right,
}

Estratégia de transição de JS para TS

Escolha a versão TS certa

Ao escolher uma versão TS, é recomendável escolher uma 最新的稳定版本para usar os recursos mais recentes e corrigir alguns problemas conhecidos. Ao mesmo tempo, se algumas bibliotecas de terceiros forem usadas no projeto, é necessário 确保这些库支持 TS.
Adicionar arquivo de configuração TS

Você pode configurar as opções de compilação e a localização dos arquivos TS adicionando um arquivo tsconfig.jsonde configuração .
Renomeie arquivos JS para arquivos TS

Para converter um arquivo JS em um arquivo TS, você pode 将文件后缀名改为 .ts convertê-lo adicionando anotações de tipo e outros métodos.
Uso passo a passo dos recursos do TS

No processo de conversão, você pode 逐步使用 TS 特性, como anotações de digitação, interfaces, etc., a fim de aproveitar melhor as características do TS.
verificação de tipo e compilação

Obrigatório após a conversão do código para TS 进行类型检查和编译. Isso pode ser feito usando ferramentas de linha de comando ou integrado ao ambiente de desenvolvimento.

Resumir

Neste artigo, temos um breve entendimento de parte da sintaxe básica do TS e da estratégia de transformação de JS para TS, esperando ajudar os iniciantes a entender e usar melhor o TS. Embora a curva de aprendizado do TS seja íngreme, o uso do TS pode melhorar a legibilidade e a confiabilidade do código, especialmente em projetos de grande escala, o uso do TS pode melhorar a eficiência do desenvolvimento e a capacidade de manutenção do código, ajudando-nos a escrever códigos elegantemente mais rápidos e melhores.

Guia para iniciantes em TypeScript: Transição de JS para TS

Diretório de artigos