Tabla de contenido
Espacios de nombres y enumeraciones
Espacios de nombres y funciones
prefacio
Este artículo está incluido en la serie de artículos de resumen de conocimiento de TypeScript , ¡las correcciones son bienvenidas!
Creo que después de leer el módulo TS en el artículo anterior , tiene una cierta comprensión del mecanismo del módulo de TS, por lo que este artículo le presentará la fusión y el uso de módulos o tipos de declaraciones con nombres duplicados.
La primera vez que entramos en contacto con un concepto similar provino del artículo sobre funciones , donde la sobrecarga de funciones es la fusión de declaraciones.
La fusión de declaraciones significa que el compilador fusionará declaraciones con el mismo nombre en una sola declaración, y la declaración fusionada tendrá las características de las dos o más declaraciones originales al mismo tiempo. Cuando se definen dos o más variables, tipos o módulos con el mismo nombre de variable, se producirá la fusión de declaraciones.
La fusión de declaraciones en TS incluye la fusión entre interfaces, funciones, espacios de nombres, enumeraciones y clases. A continuación, profundizaré en estos tipos de fusiones.
Fusión del mismo tipo
fusión de interfaz
mismo nombre de miembro
Los nombres de los miembros de las interfaces en la fusión de interfaces se pueden repetir, pero los tipos deben ser los mismos
interface IAnimal {
name: string
}
interface IAnimal {
name: number // 后续属性声明必须属于同一类型。属性“name”的类型必须为“string”，但此处却为类型“number”
color: string
}
const animal: IAnimal = {
name: "阿黄",
color: "black"
}La ortografía correcta debe ser
// global.d.ts
interface IAnimal {
name: string
}
interface IAnimal {
color: string
}
// 相当于
interface IAnimal {
name: string
color: string
}
// src/index.ts
const animal: IAnimal = {
name: "阿黄",
color: "black"
}mismo nombre de método
Si aparece el mismo nombre de función en dos interfaces, se manejará de acuerdo con la sobrecarga de la función
// global.d.ts
interface IAnimal {
getVal(val: number): number
}
interface IAnimal {
getVal(val: string): string
}
// 相当于
interface IAnimal {
getVal(val: number): number
getVal(val: string): string
}
// src/index.ts
const animal: IAnimal = {
getVal(val: any) {
return val
}
}consejos : Las funciones de flecha no admiten la sobrecarga de funciones, que no se mencionó en el artículo sobre funciones. Dado que las funciones de flecha son expresiones de funciones, no declaraciones de funciones, la sobrecarga de funciones no es compatible.
función
función puede referirse a este artículo
Espacios de nombres
Volvamos a la pregunta del artículo del módulo : ¿debe definirse un espacio de nombres mediante un bloque de código?
Mencionamos en el módulo que la implementación del espacio de nombres en realidad usa un iife (función de ejecución inmediata) para modificar variables externas para lograr el propósito de encapsulación.
// global.d.ts
declare namespace global_type {
interface IAnimal {
name: string
color: string
}
}
declare namespace global_type {
let animal: IAnimal
}
// 相当于
declare namespace global_type {
interface IAnimal {
name: string
color: string
}
// let animal: IAnimal //使用let不能重复定义变量，这句会报错，所以先注释了
}
// src/index.ts
global_type.animal = {
name: "",
color: ""
}Los tipos o variables en espacios de nombres con el mismo nombre se pueden obtener directamente. Por ejemplo, IAnimal en el código anterior se puede obtener directamente en el espacio de nombres.
enumerar
Las enumeraciones también siguen las reglas de combinación y las claves de la enumeración son valores únicos, por lo que no se permite la duplicación.
// global.d.ts
declare enum Position {
x = 0
}
declare enum Position {
y = 1
}
declare enum Position {
z = 2
}
/*相当于
declare enum Position {
x = 0,
y = 1,
z = 2
}*/
// src/index.ts
const { x, y, z } = Positiondiferentes tipos de fusiones
Clases e interfaces
Las reglas de fusión directa de clase e interfaz son las mismas que las de la fusión directa de interfaz
// global.d.ts
declare class Animal {
name: string
}
declare interface Animal {
age: number
}
declare let animal: Animal
// index.ts
animal = new class {
name: string
age: number
}Espacios de nombres y enumeraciones
Cuando el espacio de nombres y la enumeración tienen el mismo nombre, también habrá una fusión de declaración. Combinando los principios de implementación del espacio de nombres y la enumeración mencionados anteriormente, no es difícil de entender. La fusión de los dos puede considerarse como la fusión del objeto Position.
// global.d.ts
declare enum Position {
x = 0,
y = 1,
z = 2
}
declare namespace Position {
const _x = Position.x
}
/*
可以看成
enum Position {
x = 0,
y = 1,
z = 2,
_x = Position.x
}*/
declare let x: Position.x
declare let y: Position.y
// src/index.ts
x = Position._xEspacios de nombres y clases
Cuando un espacio de nombres se fusiona con una clase, los atributos correspondientes se colocan estáticamente en la clase . La definición del espacio de nombres en realidad asigna atributos a un objeto en el contexto. Cuando un espacio de nombres se encuentra con una clase, puede verse como si agregara un atributo estático de la clase.
class Animal {
age: number
}
namespace Animal {
export let age: number = 10
}
console.log(Animal);// [class Animal] { age: 10 }
const animal = new Animal()
animal.age = Animal.ageconsejos : las declaraciones de espacio de nombres no se pueden colocar antes de la clase o función con la que se fusiona
Espacios de nombres y funciones
Las funciones son similares a las clases, agregando sus propias propiedades estáticas
function Animal() {
return Animal.age// 取自身的age属性
}
namespace Animal {
export let age: number = 10
}
console.log(Animal);// [Function: Animal] { age: 10 }
const age = Animal()
console.log(age);// 10escribir al final
Lo anterior es todo el contenido del artículo. El artículo lo lleva principalmente a comprender la fusión del mismo tipo y diferentes tipos en TS, incluida la relación de fusión entre funciones, espacios de nombres, enumeraciones, clases e interfaces.
Gracias por leer hasta el final. Si crees que el artículo es bueno, espero que puedas apoyarlo, ¡gracias!
Artículos relacionados
Fusión de declaraciones · Tutorial introductorio de TypeScript