Introducción al uso básico de ts

Brevemente

En el artículo anterior, presentamos brevemente la construcción del entorno TypeScript. No importa cuán bueno sea ts, no importa cuán poderoso sea, también requiere javascript. Por lo tanto, el requisito previo para aprender ts es saber js.
ts proporciona verificación estática de tipos. ¿Cómo se usa? A continuación, se presenta el uso de cada tipo básico uno por uno.

vamos perro

Tipos básicos de TypeScipt

valor booleano

El tipo de datos más básico es el valor verdadero/falso simple, llamado booleano en JavaScript y TypeScript (y también en otros lenguajes).

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

Cuando asigna un valor que no sea falso o verdadero al valor booleano, aparecerá una gran onda roja en el editor y aparecerá un mensaje detallado cuando se mueva el mouse sobre él.

Si asignamos nulo e indefinido, no se informará ningún error porque, de forma predeterminada, TypeScript trata a nulo e indefinido como perteneciente a cualquier tipo. Si no queremos que esto suceda, debemos habilitar strictNullChecks
en el archivo de configuración.Después de habilitar, trate nulo como tipo nulo e indefinido como tipo indefinido.

Número Tipo de número

Al igual que JavaScript, todos los números en TypeScript son números de punto flotante. El tipo de estos números de coma flotante es número. Además de admitir literales decimales y hexadecimales, TypeScript también admite literales binarios y octales introducidos en ECMAScript 2015.
El tipo de número es un número de punto flotante de precisión doble de 64 bits, que es propenso al problema de falta de precisión, como 0.1+0.2 != 0.3; también es la razón por la cual a veces se agrega el valor y el El resultado tiene muchos lugares decimales.

cadena

Utilice una cadena para representar el tipo de datos de texto. Al igual que JavaScript, puede usar comillas dobles ( " ) o comillas simples ( ' ) para indicar cadenas.

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





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

Aunque str = 0 no se ajusta a la especificación de mecanografiado, aún puede tener éxito si lo compila. Podemos configurar noEmitOnError en verdadero, y la compilación falla cuando el archivo ts informa un error.

formación

TypeScript puede manipular elementos de matriz como JavaScript. Hay dos formas de definir arreglos. En el primero, [] puede ir seguido del tipo de elemento, indicando un arreglo compuesto por elementos de este tipo:

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

La segunda forma es usar matrices genéricas, Array<tipo de elemento>:

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

Obviamente, lo anterior es un solo tipo de matriz.Si quiero que tanto las cadenas como los números existan en las matrices, entonces puedo usar la unión (|) para lograr el efecto.
Any y unknown también pueden lograr el efecto, pero hay desventajas: any: es equivalente a desactivar la verificación de tipo de ts, unknown es mejor que any, y puede verificar el tipo, pero si desea la verificación de tipo correcta, necesita para juzgar correctamente la variable definida por desconocido Exactamente qué 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

El tipo tupla permite representar un array con un número y tipo de elementos conocidos, que no tienen por qué ser del mismo tipo. Por ejemplo, puede definir un par de tuplas cuyos valores sean cadena y número.

/**
 * 
 * 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 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)类型

No existe una definición correspondiente para tupla en js, por lo que si fuerza la salida de la compilación, no estará definido.
Además, si la matriz ts usa indexación dinámica, no encontrará atributos fuera de los límites. Se pueden utilizar métodos de matriz.

enumerar

El tipo de enumeración es un complemento de los tipos de datos estándar de JavaScript. La enumeración es definir y nombrar una clase de datos con funciones similares, lo que es más intuitivo y comprensible.
Las definiciones se declaran usando la palabra clave 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);

Cualquier

A veces, querremos asignar un tipo a variables cuyo tipo no está claro en la etapa de programación. Estos valores pueden provenir de contenido dinámico, como la entrada del usuario o bibliotecas de código de terceros. En este caso, no queremos que el verificador de tipos verifique estos valores y los deje pasar la verificación de la fase de compilación directamente. Entonces podemos usar cualquier tipo para marcar estas variables:

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

Vacío

En cierto modo, el tipo vacío es como el opuesto de cualquier tipo, lo que significa que no hay tipo. Cuando una función no devuelve un valor, normalmente verá que su tipo de retorno es nulo:

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

Declarar una variable de tipo void no es muy útil, porque solo puedes asignarla indefinida y nula:

let unusable: void = undefined;

nulo e indefinido

En TypeScript, tanto undefined como null tienen sus propios tipos llamados undefined y null respectivamente. Como void, sus tipos en sí mismos no son muy útiles:

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

De forma predeterminada, nulo e indefinido son subtipos de todos los tipos. Es decir, puede asignar nulos e indefinidos a variables de tipo número.

Sin embargo, cuando especifica el indicador --strictNullChecks, nulo e indefinido solo se pueden asignar a void y sus respectivos.

Nunca

El tipo nunca representa el tipo de valores que nunca existen. Por ejemplo, el tipo nunca es el tipo de valor de retorno de una expresión de función o una expresión de función de flecha que siempre arroja una excepción o nunca devuelve un valor; las variables también pueden ser del tipo nunca cuando se declaran nunca cuando están protegidas.

El tipo nunca es un subtipo de cualquier tipo y es asignable a cualquier tipo; sin embargo, ningún tipo es un subtipo o asignable al tipo nunca (aparte de nunca en sí mismo). Ni siquiera any puede asignarse a never.
Aquí hay algunas funciones que devuelven el tipo nunca:

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

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

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

Objeto

objeto representa un tipo no primitivo, es decir, un tipo distinto de número, cadena, booleano, símbolo, nulo o indefinido.
Las API como Object.create se pueden representar mejor usando el tipo de objeto. Por ejemplo:

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 aserción

Esta es la forma de decirle al compilador, "confía en mí, sé lo que estoy haciendo" a través de afirmaciones de tipo. Las aserciones de tipo son como las conversiones de tipo en otros lenguajes, pero sin verificación ni desestructuración de datos especiales. No tiene impacto en el tiempo de ejecución, solo funciona durante la fase de compilación. TypeScript asume que usted, el programador, ha realizado las comprobaciones necesarias.
Las afirmaciones de tipo vienen en dos sabores. Una es la sintaxis de "paréntesis angular":

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

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

La otra es la sintaxis as:

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

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

Las dos formas son equivalentes. Cuál usar es principalmente una cuestión de preferencia personal; sin embargo, cuando usa JSX en TypeScript, solo se permiten aserciones de sintaxis.

epílogo

Estos tipos básicos son las unidades básicas de ts, en las que se pueden combinar clases e interfaces para lograr efectos más geniales.