Introdução ao uso básico de ts

Brevemente

No artigo anterior, apresentamos brevemente a construção do ambiente TypeScript. Por melhor que seja ts, por mais poderoso que seja, ele também requer javascript. Portanto, o pré-requisito para aprender ts é conhecer js.
ts fornece verificação estática de tipo.Como é usado?A seguir apresentaremos o uso de cada tipo básico, um por um.

vamos cachorro

Tipos básicos do TypeScipt

valor booleano

O tipo de dado mais básico é o valor verdadeiro/falso simples, chamado de booleano em JavaScript e TypeScript (e também em outras linguagens).

let isTure: boolean = false
isTure = 'zsl'
console.log(isTure);

Ao atribuir um valor diferente de falso ou verdadeiro ao valor booleano, uma grande onda vermelha aparecerá no editor e um prompt detalhado aparecerá quando o mouse for movido sobre ela.

Se atribuirmos nulo e indefinido, nenhum erro será reportado, pois por padrão o TypeScript trata nulo e indefinido como pertencentes a qualquer tipo. Se não quisermos que isso aconteça, precisamos habilitar strictNullChecks
no arquivo de configuração.Após habilitar, trate null como tipo nulo e indefinido como tipo indefinido.

Número tipo de número

Como o JavaScript, todos os números no TypeScript são números de ponto flutuante. O tipo desses números de ponto flutuante é número. Além de oferecer suporte a literais decimais e hexadecimais, o TypeScript também oferece suporte a literais binários e octais introduzidos no ECMAScript 2015.
O tipo de número é um número de ponto flutuante de precisão dupla de 64 bits, que é propenso ao problema de falta de precisão, como 0,1+0,2 != 0,3; é também a razão pela qual às vezes o valor é adicionado e o resultado tem muitas casas decimais.

corda

Use string para representar o tipo de dados de texto. Assim como o JavaScript, você pode usar aspas duplas ( " ) ou aspas simples ( ' ) para denotar strings.

//  默认进行类型推断
let str = 'zsk'
let strs = new String('zsk')
//  或
let str2: string = 'zsk'





str = 0
console.log(str);
console.log(strs);
console.log(str2);

Embora str = 0 não esteja de acordo com a especificação typescript, você ainda pode ter sucesso se compilá-lo. Podemos configurar noEmitOnError como true e a compilação falha quando o arquivo ts relata um erro.

variedade

TypeScript pode manipular elementos de array como JavaScript. Existem duas maneiras de definir matrizes. Na primeira, [] pode ser seguido do tipo do elemento, indicando um array composto por elementos deste tipo:

//	表示数字数组
let list: number[] = [1, 2, 3];

A segunda maneira é usar genéricos de matriz, Array<tipo de elemento>:

let list: Array<number> = [1, 2, 3];

Obviamente, o acima é um único tipo de array.Se eu quiser que strings e números existam em arrays, então posso usar união (|) para obter o efeito.
Qualquer e desconhecido também pode alcançar o efeito, mas há desvantagens: qualquer: É equivalente a desativar a verificação de tipo de ts, desconhecido é melhor do que qualquer e pode verificar o tipo, mas se você quiser a verificação de tipo correta, você precisa para julgar corretamente a variável definida por desconhecido Exatamente qual tipo. .

//  数值和字符串组成的数组
let list: (number | string)[] = [1, 23, '2', []]

//  unknown类型的数组
let list2: Array<unknown> = [1, 23, '2', 'any', []]


//  unknown类型的数组
let list3: Array<any> = [1, 23, '2', 'any', []]

tupla

O tipo tupla permite representar um array com um número e tipo de elementos conhecidos, que não precisam ser do mesmo tipo. Por exemplo, você pode definir um par de tuplas cujos valores são string e number.

/**
 * 
 * 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。
 */

//  声明
tuple = ['zsk', 18]
console.log(tuple);
//当访问一个越界的元素，会使用联合类型替代
// tuple.push( 1, 2, '321')
tuple[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型

console.log(tuple[5].toString()); // OK, 'string' 和 'number' 都有 toString

tuple[6] = true; // Error, 布尔不是(string | number)类型

Não há definição correspondente para tupla em js, portanto, se você forçar a saída da compilação, ficará indefinido.
Além disso, se o array ts usar indexação dinâmica, ele não encontrará atributos fora dos limites. Métodos de matriz podem ser usados.

enumerar

O tipo enum é um complemento aos tipos de dados padrão do JavaScript. A enumeração é definir e nomear uma classe de dados com funções semelhantes, o que é mais intuitivo e compreensível.
As definições são declaradas usando a palavra-chave enum

//  值默认从0开始
enum Color {
    
    
  red = 2,  //  改变值
  green = 'zsk',
  blue = 'a'
}

console.log('Color', Color);

//  定义
let colorDetail: Color = Color.red
//  使用
colorDetail = Color.green

//  赋数值类型不检查
colorDetail = 123
console.log('colorDetail', colorDetail);

Qualquer

Às vezes, queremos atribuir um tipo a variáveis ​​cujo tipo não é claro na fase de programação. Esses valores podem vir de conteúdo dinâmico, como entrada do usuário ou bibliotecas de código de terceiros. Nesse caso, não queremos que o verificador de tipos verifique esses valores e deixe-os passar diretamente pela verificação da fase de compilação. Então podemos usar qualquer tipo para marcar essas variáveis:

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

Vazio

De certa forma, o tipo void é como o oposto do tipo any, o que significa que não há nenhum tipo. Quando uma função não retorna um valor, normalmente você verá que seu tipo de retorno é void:

function warnUser(): void {
    
    
    console.log("This is my warning message");
}

Declarar uma variável do tipo void não é muito útil, pois você só pode atribuir a ela indefinido e nulo:

let unusable: void = undefined;

Nulo e Indefinido

No TypeScript, indefinido e nulo têm seus próprios tipos chamados indefinido e nulo, respectivamente. Assim como void, seus próprios tipos não são muito úteis:

// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

Por padrão, null e undefined são subtipos de todos os tipos. Ou seja, você pode atribuir nulo e indefinido a variáveis ​​do tipo número.

No entanto, quando você especifica o sinalizador --strictNullChecks, null e undefined só podem ser atribuídos a void e seus respectivos.

Nunca

O tipo never representa o tipo de valores que nunca existem. Por exemplo, o tipo never é o tipo de valor de retorno de expressões de função ou expressões de função de seta que sempre lançam uma exceção ou nunca retornam um valor; Quando protegido.

O tipo never é um subtipo de qualquer tipo e é atribuível a qualquer tipo; no entanto, nenhum tipo é um subtipo ou atribuível ao tipo never (exceto o próprio never). Mesmo qualquer não pode ser atribuído a nunca.
Aqui estão algumas funções que retornam o tipo never:

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    
    
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    
    
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    
    
    while (true) {
    
    
    }
}

Objeto

object representa um tipo não primitivo, ou seja, um tipo diferente de número, string, booleano, símbolo, nulo ou indefinido.
APIs como Object.create podem ser melhor representadas usando o tipo de objeto. Por exemplo:

declare function create(o: object | null): void;

create({
    
     prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

tipo de afirmação

Esta é a maneira de dizer ao compilador, "confie em mim, eu sei o que estou fazendo" por meio de declarações de tipo. Asserções de tipo são como conversões de tipo em outras linguagens, mas sem verificação e desestruturação de dados especiais. Não tem impacto em tempo de execução, funciona apenas durante a fase de compilação. O TypeScript assume que você, o programador, realizou as verificações necessárias.
As asserções de tipo vêm em dois tipos. Uma é a sintaxe "colchete angular":

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

A outra é a sintaxe as:

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

As duas formas são equivalentes. Qual deles usar é principalmente uma questão de preferência pessoal; no entanto, quando você usa JSX no TypeScript, apenas as asserções de sintaxe são permitidas.

epílogo

Esses tipos básicos são as unidades básicas de ts, nas quais classes e interfaces podem ser combinadas para obter efeitos mais interessantes.