Comprender el sistema de tipos y los tipos básicos de TypeScript.

1. ¿Qué es un programa?

Programa = estructura de datos + algoritmo = datos en varios formatos + lógica de procesamiento de datos

2. Los datos están formateados (tipo)

Cadena, número, booleano, nulo, indefinido
Objeto, matriz, función, colección

Tres, el programa puede estar equivocado

Error de cálculo (realizar algunas operaciones matemáticas con datos no numéricos)
Llame a un método inexistente, diferentes tipos de datos tienen diferentes métodos de operación o métodos, como: los datos de tipo cadena no deben participar directamente en operaciones matemáticas

4. Lenguaje escrito dinámicamente y lenguaje escrito estáticamente

[1] Lenguaje escrito dinámicamente

Idiomas que verifican el tipo de datos durante la ejecución del programa, como JavaScript

[2] Lenguaje escrito estáticamente

Lenguaje para la verificación del tipo de datos durante la compilación del programa, como: Java

Cinco, las ventajas y desventajas de los lenguajes tipados estáticamente

El núcleo de los lenguajes tipados estáticamente: el sistema de tipos

[1] Ventajas

Algunos errores potenciales se pueden encontrar en la etapa de compilación del programa (con IDE, editor o incluso en la etapa de codificación) para evitar errores después de que el programa se ejecute en el entorno de producción.
Los estándares de codificación son propicios para el desarrollo y la colaboración en equipo, pero también son más propicios para el desarrollo y la reconstrucción de proyectos a gran escala.
Coopere con el IDE y el editor para proporcionar una solicitud / verificación inteligente de código más potente
El código es documento

[2] Desventajas

problema
Falta de flexibilidad

Seis, las ventajas y desventajas de los lenguajes tipados dinámicamente

Contrario a las ventajas y desventajas de los lenguajes tipados dinámicamente

7. ¿Qué es un sistema de tipos?

El sistema de tipos consta de dos componentes importantes

Escriba anotación (definición, anotación)
Comprobación de tipo (comprobación) -control de tipo

8. Tipo de etiquetado

La anotación de tipo es agregar descripciones de tipo a los datos (variables, funciones (parámetros, valores de retorno)) en el código. Después de que se anota una variable o función (parámetro), no puede almacenar o pasar tipos que no se ajustan al tipo de anotación . Con anotaciones, el TypeScript compilador puede realizar una detección legal de tipo en estos datos de acuerdo con las anotaciones. Con anotaciones, varios editores, IDE, etc. pueden proporcionar indicaciones inteligentes

Nueve, detección de tipo

Como su nombre lo indica, detecta el tipo de datos. Tenga en cuenta que aquí, la atención se centra en el tipo de palabra. El sistema de tipos detecta el tipo, no el valor específico (aunque, a veces, también puede detectar el valor), como el rango de valores de un parámetro (entre 1-100). No podemos confiar en el sistema de tipos para completar esta detección. Debería. Es la lógica específica de nuestra capa empresarial, y el sistema de tipos detecta si su tipo de valor es un número.

10. `TypeScript` Tipo de etiquetado

En TypeScript , el formato gramatical básico de la anotación de tipo es:

数据载体:类型

let name:string = 'dingFY' // name:string
let age:number = 24 // age:number

TypeScript La etiqueta de tipo, la podemos dividir en

Anotación de tipo simple básica
Anotación de tipo avanzada en profundidad

Once, anotación de tipo simple básica

Tipo básico
Tipos vacíos e indefinidos
Tipo de objeto
Tipo de matriz
Tipo de tupla
Tipo enumerado
Sin tipo de valor
Nunca escriba
Cualquier tipo
Tipo desconocido

12. Tipos básicos

Los tipos básicos incluyen: cadena, número, booleano

let str: string = '字符串';
let n: number = 100;
let isOk: boolean = true;

Trece, tipos vacíos e indefinidos

Debido a que en Null y Undefined ambos tipos tienen un solo valor en una marca Null y Undefined tipo de variable , significa que la variable no se puede modificar

let a: null;
// ok
a = null;
// error
a = 1;

Por defecto, null suma undefined es un subtipo de todos los tipos. Eso significa que puede asignar la null suma undefined a otros tipos de variables

let a: number;
// ok
a = null;

Si se declara una variable, pero no se asigna, entonces el valor de la variable undefined, pero si tampoco es de tipo anotado, el tipo predeterminado es any

// 类型为 `number`，值为 `undefined`
let a: number;
// 类型为 `any`，值为 `undefined`
let a

Debido a que ambos null y undefined son subtipos de otros tipos, habrá algunos problemas ocultos por defecto

let a:number;
a = null;
// ok（实际运行是有问题的）
a.toFixed(1);

Sugerencias: especifique la strictNullChecks configuración en el archivo tsconfig.json para truedetectar null o undefinedevitar de manera efectiva muchos problemas comunes

{
    "compilerOptions": {
        "outDir": "./dist",
        "target": "es5",
        "watch": true,
        "strictNullChecks": true
    },
    "include": ["./src/**/*"]
}

let ele = document.querySelector('div');
// 获取元素的方法返回的类型可能会包含 null，所以最好是先进行必要的判断，再进行操作
if (ele) {
    ele.style.display = 'none';
}

14. Tipo de objeto

[1] Tipo de objeto integrado

En JavaScript , hay muchos objetos integrados, como: Object, Array, Date ..., podemos marcarlos a través del constructor o clase del objeto.

let a: object = {};
// 数组这里标注格式有点不太一样
let arr: Array<number> = [1,2,3];
let d1: Date = new Date();

[2] Tipo de objeto personalizado

En otro caso, en muchos casos, es posible que necesitemos personalizar la estructura del objeto. Esta vez podemos

Anotación literal
interfaz
Definir clase o constructor

1. Etiquetado literal:

let a: {username: string; age: number} = {
  username: 'zMouse',
  age: 35
};
// ok
a.username;
a.age;
// error
a.gender;

优点 : Conveniente y directo

缺点 : No propicio para la reutilización y el mantenimiento

2. Interfaz:

// 这里使用了 interface 关键字
interface Person {
  username: string;
  age: number;
};
let a: Person = {
  username: 'zMouse',
  age: 35
};
// ok
a.username;
a.age;
// error
a.gender;

优点 : Alta reutilización

缺点 : La interfaz solo se puede usar como una anotación de tipo, no como un valor concreto. Es solo una definición de estructura abstracta, no una entidad, y no una implementación de función concreta

3. Clase y constructor:

class Person {
	constructor(public username: string, public age: number) {
  }
}
// ok
a.username;
a.age;
// error
a.gender;

优点 : La función es relativamente poderosa y el tipo correspondiente también se define cuando se define la entidad.

缺点 : Complicado, por ejemplo, solo desea restringir la estructura de parámetros recibida por una determinada función, no es necesario definir una clase, será más fácil usar la interfaz

interface AjaxOptions {
    url: string;
    method: string;
}

function ajax(options: AjaxOptions) {}

ajax({
    url: '',
    method: 'get'
});

【3】 Extensión

Objeto de embalaje:

Aquí que el objeto envoltorio es en realidad JavaScript en el String,, Number, y Booleansabemos que el string tipo y el String tipo no son lo mismo, el TypeScript mismo es cierto en

let a: string;
a = '1';
// error String有的，string不一定有（对象有的，基础类型不一定有）
a = new String('1');

let b: String;
b = new String('2');
// ok 和上面正好相反
b = '2';

15. Tipo de matriz

TypeScript El tipo almacenado en la matriz debe ser el mismo, por lo que al etiquetar el tipo de matriz, el tipo de datos almacenados en la matriz debe estar marcado al mismo tiempo.

[1] Utilice anotaciones genéricas

// <number> 表示数组中存储的数据类型
let arr1: Array<number> = [];
// ok
arr1.push(100);
// error
arr1.push('dingFY');

[2] Etiquetado simple

let arr2: string[] = [];
// ok
arr2.push('dingFY');
// error
arr2.push(1);

16. Tipo de tupla

Las tuplas son similares a las matrices, pero los tipos de elementos almacenados no tienen que ser los mismos, pero debes prestar atención a:

El número de datos de inicialización y el tipo de etiqueta de ubicación correspondiente deben ser consistentes
Los datos fuera de límites deben ser uno de los tipos de la anotación de tupla (los datos fuera de límites se pueden etiquetar sin el tipo de unión de orden correspondiente)

let data1: [string, number] = ['dingFY', 24];
// ok
data1.push(100);
// ok
data1.push('100');
// error
data1.push(true);

Diecisiete tipos enumerados

El papel de la enumeración es la forma de organizar una colección de datos relacionados, mediante la enumeración, podemos asignar nombres descriptivos a un grupo de datos relacionados.

enum HTTP_CODE {
  OK = 200,
  NOT_FOUND = 404,
  METHOD_NOT_ALLOWED
};
// 200
HTTP_CODE.OK;
// 405
HTTP_CODE.METHOD_NOT_ALLOWED;
// error
HTTP_CODE.OK = 1;

【1】 Notas:

la clave no puede ser un número
El valor puede ser un número, llamado enumeración de tipo de número, o una cadena, llamado enumeración de tipo de cadena, pero no puede ser otros valores. El valor predeterminado es un número: 0
Los valores de enumeración se pueden omitir, si se omiten, entonces:
- El primer valor de enumeración predeterminado es: 0
- El valor de enumeración que no es el primero es el valor de enumeración numérico anterior + 1
El valor de enumeración es de solo lectura (constante) y no se puede modificar después de la inicialización

[2] Enumeración del tipo de cadena

Valor de tipo de enumeración, también puede ser de tipo cadena

enum URLS  {
  USER_REGISETER = '/user/register',
  USER_LOGIN = '/user/login',
  // 如果前一个枚举值类型为字符串，则后续枚举项必须手动赋值
  INDEX = 0
}

Nota: Si el tipo de valor de enumeración anterior es una cadena, los elementos de enumeración posteriores deben asignarse manualmente

Sugerencias: los nombres de las enumeraciones pueden estar en mayúsculas o minúsculas, se recomiendan todos en mayúsculas (por lo general, use todos los métodos de nomenclatura en mayúsculas para marcar el valor como una constante)

18. Sin tipo de valor

Indica un tipo sin ningún dato, que generalmente se usa para anotar el tipo de valor de retorno de una función sin un valor de retorno. El tipo de anotación predeterminado de la función es:void

function fn():void {
  	// 没有 return 或者 return undefined
}

En strictNullChecks es false el caso de, undefined y null se puede asignar a void , pero cuando strictNullChecks es true el caso, solo undefined se puede asignar a void

Diecinueve, nunca escriba

Cuando una función nunca se puede ejecutar return , lo que se devuelve es que never , a diferencia de void, se voidejecuta return, pero no hay valor, never no se ejecutará return, como arrojar un error, provocando que la función termine la ejecución.

function fn(): never {
  	throw new Error('error');
}

Veinte, cualquier tipo

A veces, no estamos seguros de qué tipo es el valor o no necesitamos realizar una verificación de tipo en el valor, podemos marcarlo como un any tipo

let a: any;

Cuando una variable se declara sin asignar y sin marcar, toma el any tipo predeterminado
Se puede asignar cualquier valor de tipo al any tipo
any El tipo también se puede asignar a cualquier tipo
any El tipo tiene atributos y métodos arbitrarios

Nota: Marcar como un any tipo también significa renunciar a la detección de tipo del valor y renunciar al indicador inteligente del IDE.

Sugerencia: cuando la noImplicitAny configuración se especifica en el archivo tsconfig.json, se informará un error truecuando el parámetro de la función tenga un anytipo implícito

{
    "compilerOptions": {
        "outDir": "./dist",
        "target": "es5",
        "watch": true,
        "strictNullChecks": true,
        "noImplicitAny": true
    },
    "include": ["./src/**/*"]
}

21. Tipo desconocido

Unknow, nuevo en la versión 3.0, pertenece a la versión de seguridad de cualquiera, pero es diferente de cualquiera:

lo desconocido solo se puede asignar a lo desconocido, cualquier
lo desconocido no tiene atributos ni métodos

Veintidós, tipo de función

Las funciones son muy importantes en JavaScript, al igual que TypeScript. Del mismo modo, las funciones también tienen su propio formato de anotación de tipo

parámetro
valor de retorno

函数名称( 参数1: 类型, 参数2: 类型... ): 返回值类型;

function add(x: number, y: number): number {
  	return x + y;
}

Los artículos se actualizan continuamente cada semana. Puede buscar " Colección de aplicaciones para el usuario " en WeChat para leerlo por primera vez, responder a [ Video ] [ Libro ] para recibir materiales de video de 200G y 30 materiales de libros en PDF