El tipo de definición de ts, array generics, la diferencia entre ts y js

Prefacio:

        ts información relacionada, incluidos los tipos de definición y la información genérica de la matriz.

Introducción oficial:

1. Ruan Yifeng

Qué es TypeScript · El tutorial introductorio de TypeScript resume el pensamiento desde la perspectiva de los programadores de JavaScript y comprende TypeScript paso a paso. http://ts.xcatliu.com/introduction/what-is-typescript.html

2. sitio web oficial de ts

Comience con TypeScript en 5 minutos TypeScript Chinese Network TypeScript: superconjunto de JavaScript https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

Introducción e instalación de ts,

1. Introducción a ts:

• TypeScript es JavaScript con un sistema de tipos agregado para proyectos de cualquier tamaño.
• TypeScript es un lenguaje de tipado débil y estático.
• TypeScript es totalmente compatible con JavaScript, no modifica las características del tiempo de ejecución de JavaScript.
• TypeScript se puede compilar en JavaScript y luego ejecutarse en cualquier entorno que pueda ejecutar JavaScript, como navegadores y Node.js.
• TypeScript tiene muchas opciones de compilación, y depende de usted qué tan estricta sea la verificación de tipos.
• TypeScript puede coexistir con JavaScript, lo que significa que los proyectos de JavaScript pueden migrar gradualmente a TypeScript.
• TypeScript mejora las funciones del editor (IDE), proporcionando finalización de código, sugerencias de interfaz, saltos a definiciones, refactorización de código y otras capacidades.
• TypeScript tiene una comunidad activa y las bibliotecas de terceros más utilizadas proporcionan declaraciones de tipos.
• TypeScript evoluciona con el estándar y cumple con el último estándar ECMAScript (etapa 3).

2. La diferencia entre ts y js

js es un lenguaje débilmente tipificado dinámicamente, mientras que ts es un lenguaje débilmente tipificado estáticamente.

        Lenguaje fuertemente tipado: no está permitido cambiar el tipo de datos de una variable a menos que se realice una conversión.

        Idiomas débilmente escritos: a las variables se les pueden asignar diferentes valores.

        Lenguajes tipificados estáticamente: los tipos de todas las variables se determinan en tiempo de compilación.

        Lenguajes tipificados dinámicamente: los tipos de todas las variables se determinan en la etapa de ejecución.

Los beneficios de ts:

        La mayoría de los errores pueden quedar expuestos en la etapa de compilación, lo que da como resultado una mejor capacidad de mantenimiento. Por lo tanto, ts puede lograr una mejor estabilidad y eficiencia de desarrollo en proyectos a gran escala con cooperación de varias personas. el código js puede ejecutarse en ts

3. instalación y consulta de ts

Puede usar el paquete de complemento ts de vue o instalarlo globalmente

npm install -g typescript

Consultar información de la versión actual - comando

tsc

Convertir archivos ts a archivos js

tsc greeter.ts

Definir tipo:

Hay dos tipos de datos de ts, uno es el tipo de datos original de js y el otro es un nuevo tipo de datos

El tipo de datos original de js:

        Tipos primitivos: número, cadena, booleano, nulo, indefinido, símbolo

        Tipo de objeto: objeto (matriz, objeto, función, etc.)

        Nuevo tipo en es6: el símbolo   representa un valor único

        Nuevo tipo en es10: BigInt  puede representar cualquier entero grande

caso:

typeof 1n === 'bigint'; // true
typeof BigInt('1') === 'bigint'; // true

let a = 'hhh' //string
let b = 666   //number
let c = true //boolean
let d = null //null 
let e = undefined //undefined 
let f = {name:'maobuhui'} //object
let h = Symbol() //Symbol

Para el método de escritura del tipo original de js en ts, agregue el tipo directamente al definir

let a:string = 'hhh'
let b:number = 666
let c:boolean = true
let d:null = null
let e:undefined = undefined
let f:object = {name:'maobuhui'}
let g:bigint = 100n
let h:symbol = Symbol()

Nuevos tipos de datos agregados por ts:

1. Tipo de unión: define múltiples tipos al mismo tiempo

let a: string | number;
a= 'seven';
a= 7;

2. Las interfaces definen objetos

//定义：
interface videoItem {
  author: string
  authorIconSrc?: string //可选参数
}

//使用，格式必须和定义的接口一致，对象多一些属性，少一些都不行，除非加了 ？：的可传可不传
let tom: videoItem= {
    author: 'Tom'
};

3. Tipo de matriz

let a: number[] = [1, 1, 2, 3, 5]; //如果出现其他类型会报错

4. Declaración de funciones

5. Escriba la afirmación

Especificar manualmente el tipo concreto del valor 

//使用类型断言
s = e as string
或者： 
s = <string>e

案例：
获取 DOM 元素的时候指定具体元素
const box = document.getElementById('img') as HTMLImageElement
指定了具体类型后 , 就可以使用 box.src 了

Aserción no nula: si sabe claramente que las propiedades del objeto no deben estar vacías, puede usar la aserción no nula !

 console.log(inputRef.current!.value)

//正常情况下，通过document.getElementById获取元素，有可能获取不到，
但是加上!非空断言就表示是一定能获取到的

let a = document.getElementById('main')!

6. Tupla   Una tupla es una matriz especial que puede limitar el contenido y la longitud de la matriz.

Uso básico

let x: [string,number]
x = ['a',123]
x = [123,'a']//error
x = [123,123,'a']//error

parámetros opcionales

let x:[string,number?]
x = ['a']
x = ['a', 123]

elementos restantes

let x:[number,...string[]]
x = [123,"q","w","e"]

solo lectura

let x:readonly[number,string] = [123,"q"]
//此时对x进行任何修改都会抛出异常

7. Enumeración

Las enumeraciones  enum se definen mediante palabras clave.

8. Clase: clase, herencia de clase

El uso y clase classherencia de ts class class, la nueva

9. Genéricos

que es generico

        Como su nombre lo indica, hay varios tipos, y TS se refiere al uso de variables para guardar el tipo que se utilizará

naturaleza genérica

        La esencia de los genéricos es un tipo parametrizado, es decir, el tipo de datos a operar se especifica como un parámetro.Este tipo de parámetro se puede utilizar en la creación de clases, interfaces y funciones, convirtiéndose respectivamente en clases genéricas , interfaces genéricas y funciones genéricas

Defina una función genérica:

        función nombre de función <parámetro de tipo> (parámetro formal: parámetro de tipo): parámetro de tipo {}

        Escriba <> (corchetes angulares) después del nombre de la función y agregue variables de tipo entre los corchetes angulares. La variable de tipo
        es equivalente a un contenedor de tipo, que puede capturar el tipo proporcionado por el usuario (el usuario especifica el tipo específico cuando llamando a la función) usando
funciones genéricas

        Método 1: valor de retorno const = nombre de función (parámetro real) type deduce el tipo del parámetro real y lo pasa al parámetro de tipo Método 2:
        valor de retorno const = nombre de función <tipo de parámetro real> (parámetro real) El anterior no -Se usa la aserción nula En este método,
        el <> en este método es el tipo específico

10. Declaración de tipo

//参数a,b,函数返回值的类型都申明为number类型，如果传参中有非number类型的数据，
则会显示红色波浪线
function sum(a: number, b: number): number {
    return a + b
}

console.log(sum(1, 9)); //10

//此处的a相当于const定义的，a的值永远为10
let a: 10;

//b的值只能为 'male'或者'female'
let b:     'male' | 'female'

//b的值只能为 boolean类型或者string类型
let c:     boolean | string

//any 表示任意类型，可以给d赋上任意类型的值(相当于对d关闭了TS的类型检测)
let d: any 
d = true
//等同于 let d

let s: string
s = d // d是any类型，s也变成了any类型（所以开发中尽量避免使用any）

//unknown 表示未知类型，也可以给d赋上任意类型的值
let e: unknown
e = 'hellow'

let s: string
//s = e 
// 语法检测不通过，因为s是string类型，e是unknown类型，它们类型不用，不允许直接赋值

//如果就是想把e的值赋给s，有两种解决办法
方法一：
    if(typeof e === "string") {
        s  = e
    }

方法二：
    // 使用类型断言
    s = e as string
        或者： 
    s = <string>e

// void 用来表示空，以函数为例，就表示没有返回值
function fn(): void {
}

function fn(): void {
    //return undefined
    //return;
    //return null
}

Una vez que la función informa un error, finalizará de inmediato, nunca se usa raramente

// {} 用来指定对象类型
    let a: {name: string}
// a中有且只有name属性，且name值必须为string类型
    a = {name: '猪八戒'}

let b: {name: string, age?: number}
// b中必须有name属性，且name值必须为string类型；age可有可无；
b = {name: '猪八戒'}
    或者
b = {name: '猪八戒', age: 18}

let c: {name: string, [propName: string]: number}

// b中必须有name属性，且name值必须为string类型；剩余属性的个数，
属性名不做要求，但是必须是number类型

c = {name: '猪八戒', haha: 12, xixi: 99}

// () => {} 用来指定函数对象类型
let d: (a: number, b: number)=>number

//函数d只接收两个number类型的参数，且返回值必须为number类型
d = function(n1: number, n2: number): number {
    return n1 + n2
}

// [] 用来指定对数组类型
let a: number[]
等同于
let a: Array<number>
a = [1,3,6,5,9]

//tuple是元组（ts新增），元组表示固定长度的数组
let a: [string, number]
//数组a中只有两个元素，第一个为string类型，第二个为number类型
a = [1, '2']

//enum是枚举（ts新增）
enum Gender{
    male,
    female
}

let a: {name: string, gender: Gender}
a = {name: '猪八戒', gender: Gender.male} 

// & 表示同时
let a: {name: string} & {age: number}
等同于
let a: {name: string, age: number}
//对象a中必须同时有name和age，且类型为指定类型
a = {name: '猪八戒', age: 18}

//类型的别名 
type myType = 1 | 2 | 3 
let a: myType
let c: mType
a = 1, c = 3 
// a、c的值为1或2或3，都行

...Para obtener más información, consulte el sitio web oficial