【TypeScript】Detalles de sintaxis, tipos y funciones

Uso de alias de tipo (tipo)

• Para resolver el problema de que la definición del tipo de unión es demasiado larga
• Usar alias de tipo

// 使用关键字type定义类型别名对象,可以复用
type myname = number | string
function hander1(name: myname) {
    
    
    console.log(name)
    if (typeof name === 'string') {
    
    
        console.log(name.length)
    }
}
//不使用类型别名
function hander2(x: number,y:number,z?:number) {
    
    
}
//使用类型别名
type myx={
    
    x: number,y:number,z?:number}
function hander3(mytype:myx) {
    
    
}

Uso de declaraciones de interfaz.

• La palabra clave se declara mediante la interfaz.
• En comparación con los alias de tipo, less =

//接口interface,没有=号
interface myX2 {
    
    
    x: number 
    y: number 
    z?: number
}
//使用接口声明
function hander4(mytype: myX2) {
    
    
}

La diferencia entre los dos:

• Los alias de tipo son muy similares a las declaraciones de interfaz y se pueden usar arbitrariamente al definir objetos.
• Diferencia principal:
• El tipo de tipo se utiliza en una gama más amplia.
• El tipo define un alias y no se permiten dos alias con el mismo nombre.

type myname = number | string

• 1. Los tipos de interfaz solo se pueden utilizar para declarar objetos.
• 2. Cuando un tipo de interfaz declara un objeto, se puede declarar varias veces.
• 3. Los tipos de interfaz admiten la herencia
• 4. El tipo de interfaz admite la implementación por parte de la clase.

//接口interface,没有=号，可以多次声明
interface myX2 {
    
    
    x: number 
    y: number 
}
//接口interface,没有=号
interface myX2 {
    
    
    z?: number
}
//使用接口声明
function hander4(mytype: myX2) {
    
    
}




//接口interface，支持继承
interface myX2 {
    
    
    x: number 
    y: number 
}
interface myX3 extends myX2 {
    
    
    z?: number
}
function hander5(mytype: myX3) {
    
    
    console.log(mytype.x,mytype.y,mytype.z)
}
hander5({
    
    x:1,y:2,z:3})

tipo de unión y tipo de intersección

tipo de unión

• ts nos permite utilizar una variedad de operadores para construir nuevos tipos a partir de tipos existentes
• tipo de unión Un tipo compuesto por dos o más tipos.
• La representación puede ser cualquiera de estos tipos de valores.
• Cada tipo en un tipo de unión se llama miembro de la unión.

// 联合类型
function hander(name: number | string) {
    
    
    console.log(name)
}
hander(1)
hander("123")

//联合类型
let nainfo: number | string = "abc"
nainfo = 1
nainfo = "123"

//但联合类型要使用的时候,要注意类型缩小,类似
// 联合类型
function hander1(name: number | string) {
    
    
    console.log(name)
    if (typeof name === 'string') {
    
    
        console.log(name.length)
    }
}
hander1(1)
hander1("123")

• Aviso:
• Después de tomar el valor del tipo de unión, ya que puede ser de cualquier tipo, ¿cómo usarlo?
• De manera similar a obtener un número, algunos métodos de cadena no se pueden usar
• resolver:
• Debe utilizar la colección reducida, es decir, la reducción de tipos, e inferir un tipo más específico en función del código reducido.

tipo cruz

• Los tipos que se cruzan indican que se deben cumplir múltiples tipos de condiciones
• Los tipos de intersección utilizan el signo comercial.

//交叉类型，两种或者多种类型同时满足
type myY = number & string//想同时满足数值和字符串类型，不可能，估没有意义
type myY2 = number & string

interface myX2 {
    
    
    x: number
    y: number
}
interface myX3 {
    
    
    z?: number
    p: () => void
}
//表示即满足myX2也得满足myX3，否则里面会有报错提示
const info: myX2 & myX3 = {
    
    
    x: 1,
    y:2,
    p:()=>{
    
    
        console.log("方法")
    }
}

tipo aserción

• A veces, ts no puede obtener información de tipo de cuota específica y, en este momento, se requiere una afirmación de tipo.
• TS solo permite que las afirmaciones de tipo se conviertan a versiones más específicas o menos específicas del tipo; esta regla evita conversiones imposibles

Obtener elemento DOM

// <img class="img">。使用类型缩小使用，只知道会返回html类型，但不知道具体类型
const imgE1 = document.querySelector("img")
// imgE1.src = "",会报错
if (imgE1 != null) {
    
    
    imgE1.src = ""
}
// <img class="img">。此时imgE2为element，不能直接使用,使用类型断言
//当你确信他存在且为html时，直接使用类型断言为更具体的样子，
const imgE2 = document.querySelector(".img") as HTMLImageElement
imgE2.src = ""

• Parecidos, así. Las afirmaciones de tipo se vuelven menos específicas como

const num = 12
const num2 =num as any

• También puedes seguir adelante y afirmar tipos menos específicos para ser más específicos.
• Sin embargo, esta afirmación de ida y vuelta no es compatible, lo que tiene riesgos potenciales para la seguridad.

const num = 12
const num2 =num as any
const num3 =num2 as string

aserción de tipo no nulo

• Cuando el valor pasado puede no estar definido, el método no se puede ejecutar en este momento
• ¡Al usar el símbolo!, debe asegurarse de que un determinado identificador tenga un valor y puede omitir la detección del mismo por parte de TS en la etapa de compilación.

interface hander{
    
    
    name:string,
    age:number,
    size?:number
}
const info: hander={
    
    
    name:"乞力马扎罗",
    age:18
}
//访问可以用可选的
console.log(info?.size)

//赋值的时候,可选链不行
// info?.size=23

// 解决方法：
// 1，类型缩小
if(info.size){
    
    
    info.size=23
}
// 2.非空类型断言,有点危险，确保非空值的父值一定有值，才能使用
info!.size=23
console.log(info.size)//23

Uso de tipos literales

• Trate el valor asignado como un tipo y solo use literales cuando lo use
• No tiene mucho sentido de forma predeterminada, pero es posible unir varios tipos, solo puedes ser uno de nosotros.

type numtype = "left" | "top" | "up"
const num3: numtype = "left"

// 使用背景
// 一般请求方式，get或者post
// 采用这种方式，可以让用户必须传get或者post，否则报错
type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    

}
reqest('http//xxx.com', 'get')

• usar fondo

// 使用背景
// 一般请求方式，get或者post
// 采用这种方式，可以让用户必须传get或者post，否则报错
type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    

}
const  hander={
    
    
    url:'xxx',
    method:'post'
}
// reqest('http//xxx.com',hander.method)
//报错，报错原因，不认识你这个hander.method获取的是string类型，不是get或者post

• Solución 1

// 解决方法1:类型断言
reqest('http//xxx.com',hander.method as "post")

• Solución 2

// 解决方法2，直接让hander对象是个字面量类型
const  hander1 :{
    
     url:string,method:'post'}={
    
    
    url:'xxx',
    method:'post'
} as const
reqest('http//xxx.com',hander1.method)
// 或者，字面量推理
const  hander2={
    
    
    url:'xxx',
    method:'post'
} as const
reqest('http//xxx.com',hander2.method)

tipo de estrechamiento (tipo de estrechamiento)

• Puede cambiar la ruta de ejecución de ts utilizando una declaración de juicio similar a la siguiente

if(info.size){
    
    
    info.size=23
}

• Declaraciones como esta también se llaman guardias de tipo.
• En una ruta de ejecución determinada, los tipos que son más pequeños de lo que fueron declarados se pueden reducir, un proceso llamado reducción
• Tipos comunes de protección
• typeof, verifique el tipo devuelto

type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    
    if(typeof url ==='string'){
    
    
        console.log(url)
    }
}

• Estrechamiento igual (=== y !== y ==, etc.), juicio literal

type requestype = "get" | "post"
function reqest(url: string, method: requestype) {
    
    
    if(method==="get"){
    
    
        console.log(method)
    }
}

• instancia de, indicando si es una instancia de este

//传入一个实例
function reqest(data:string|Date) {
    
    
   if(data instanceof Date){
    
    
    console.log(data.getTime())
   }
}

• in, usado para determinar si un objeto tiene una propiedad con un nombre, el operador in
• etc…

Tipos de funciones de TypeScript

expresión de tipo de función

• Las expresiones de tipos de funciones se pueden escribir para representar tipos de funciones.
• En ts, el nombre del parámetro formal en el tipo de función no se puede omitir

// 函数类型表达式
// 格式：(参数列表)=>返回值
const fun: (num2: number) => number = (arg: number): number => {
    
    
   return 123
}
// 为了可阅读性,类型形参里的名不能省略
type funtype = (num2: number) => number//这个就代表一个函数类型
const fun2: funtype = (arg: number) => {
    
    
   return 123
}

// 例子，传入计算方式，计算两位数字,js写法
function cals(func) {
    
    
   const num1 = 12
   const num2 = 13
   const res = func(num1, num2)
}
function func1(num1, num2) {
    
    
   return num1 + num2
}
cals(func1)

//ts写法
type calstype = (num1: number, num2: number) => number
function cals1(func: calstype) {
    
    
   const num1 = 12
   const num2 = 13
   const res = func(num1, num2)
}
function func2(num1: number, num2: number) {
    
    
   return num1 * num2
}
cals1(func2)

Detección de reglas internas

// ts对于很多的类型的检测报不报错，取决于它的内部规则
interface gule {
    
    
   name: string
   age: number
}
//直接写报错，原因，第一次定义的时候，会检测规则报错
//  const info:gule={
    
    
//    name:"山头",
//    age:12,
//    size:'大'
//  }

//但取决于内部规则，赋值完，再使用，这样就没检测，单指size的增加，其他已定义的还是会检测
const p = {
    
    
   name: "山头",
   age: 12,
   size: '大'
}
const info: gule = p

firma de llamada de función

• En js, además de ser llamadas, las funciones también pueden tener valores de atributos
• Las expresiones de tipo no admiten la declaración de propiedades.
• Cuando desee una función con propiedades, escriba una firma de llamada en un tipo de objeto

//函数表达式，这里是箭头
//不能声明其他属性
type obj2 = (num1: number) => number



//调用签名
interface obj {
    
    
   name: string
   age: number
   //函数可以调用：函数调用签名，这里是冒号
   (num1: number): number
}

const func: obj = (num1: number): number => {
    
    
   return 123
}
func(123)

¿Cómo elegirlos?

• Si simplemente describe el tipo de función en sí (se puede llamar al tipo de función), use una expresión de función
• Si describe la función como un objeto que se puede llamar y también tiene otras propiedades, use la firma de llamada de función

tipo de parámetro opcional

• Los parámetros opcionales deben colocarse después de los parámetros requeridos.

// 可选参数类型是什么
// 当不传的时候，y就是undefined类型，也就是number|undefined联合类型
function fun(x:number,y?:number){
    
    
   console.log(x,y)
   if(y!=undefined){
    
    
      console.log(y)
   }
}
fun(1)

el valor predeterminado del parámetro

// 函数的参数有默认值
// 有默认值的情况下，参数的类型注解可以省略
// 此时，有默认值的参数，哪怕是number，也可以接收一个undefined类型
function fun(x:number,y=100){
    
    
   console.log(x,y)
   if(y!=undefined){
    
    
      console.log(y)
   }
}
fun(1)

parámetros restantes

• La sintaxis de parámetros restantes nos permite representar un número indefinido de parámetros como una matriz.
• Usando los parámetros restantes, podemos definir una función que calcule una suma cuyos parámetros formales no sean fijos.

function sum (first, ...args) {
    
    
    console.log(first); // 10
    console.log(args); // [20, 30] 
}
sum(10, 20, 30)；
// 或者
// 剩余参数，通过这种方式扩展了类型注解
function fun(...arrs: (string| number)[]) {
    
    

}
fun(1,2,3,'4')

sobrecarga de funciones

• En ts, puede escribir diferentes funciones sobrecargadas para indicar que la función se puede llamar de diferentes maneras.
• Generalmente se escriben dos o más firmas sobrecargadas. Luego escribe una función general e implementa

// 需求。将两个数字或者字符串相加
// 联合类型，这个案例用不了

// 普通实现
// function add(n1, n2) {
    
    
//    return n1 + n2
// }
// add(1,2)通用函数不可调用

//函数重载
//1，先编写重载函数
function add2(n1:number, n2:number):number
function add2(n1:string, n2:string):string

//2，再编写通用的函数
function add2(n1:any, n2:any) {
    
    
   return n1 + n2
}
console.log(add2(1,2))//3
console.log(add2("1","2"))//12

// add2("1",2)//函数 不能被调用，没有对应的重载函数

Sobrecarga de funciones: tipo de unión (uso preferido)

• Utilice tipos de unión donde pueda

//函数重载-联合类型
//定义一个函数，可以传入字符串或者数组，获取他们的数组
//1，编写重载函数-联合类型
function add2(arg:string|any[]) {
    
    
   return arg.length
}
console.log(add2("123"))//3