TypeScript声明合并的实现

目录
  • 1.接口合并
  • 2.命名空间
  • 3.命名空间和类合并
  • 4.命名空间和函数合并
  • 5.命名空间和枚举合并

1.接口合并

interface TestInterface {
    name:string;
}
interface TestInterface {
    age:number;
}
//相当于下面
interface TestInterface {
    name:string;
    age:number;
}
class Person implements TestInterface{
    name:string;
    age:number;
}

1.1同名接口如果属性名相同, 那么属性类型必须一致

interface TestInterface {
    name:string;
}
interface TestInterface {
    name:number;//报错
}

1.2同名接口如果出现同名函数, 那么就会成为一个函数的重载

interface TestInterface {
    getValue(value:number):number;
}
interface TestInterface {
    getValue(value:string):number;
}
let obj:TestInterface = {
    getValue(value:any):number{
        if(typeof value === 'string'){
            return value.length;
        }else{
            return value.toFixed();
        }
    }
}
console.log(obj.getValue("abcdef"));
console.log(obj.getValue(3.14));

2.命名空间

namespace Validation{
    export let name:string = 'lnj';
}
namespace Validation{
    export let age:number = 18;
}
console.log(Validation.name);
console.log(Validation.age);

2.1同名的命名空间中不能出现同名的变量,方法等

namespace Validation{
    export let name:string = 'lnj';
    export let say = ()=> "abc";
}
namespace Validation{
    export let name:string = 'zs';//报错
    export let say = ()=> "abc";//报错
}

2.2同名的命名空间中其它命名空间没有通过export导出的内容是获取不到的

namespace Validation{
    let name:string = 'lnj';//输出name = 获取不到name
    //  export let name:string = 'lnj'; 输出name =lnj

}
namespace Validation{
    export let say = ()=> {
        console.log(`name = ${name}`);
    };
}
Validation.say();

3.命名空间和类合并

注意点: 类必须定义在命名空间的前面
会将命名空间中导出的方法作为一个静态方法合并到类中

class Person {
    say():void{
        console.log('hello world');
    }
}
namespace Person{
    export const hi = ():void=>{
        console.log('hi');
    }
}
console.dir(Person);

4.命名空间和函数合并

注意点: 函数必须定义在命名空间的前面

function getCounter() {
    getCounter.count++;
    console.log(getCounter.count);
}
namespace getCounter{
    export let count:number = 0;
}

5.命名空间和枚举合并

注意点: 没有先后顺序的要求

enum Gender {
    Male,
    Female
}
namespace Gender{
    export const Yao:number = 666;
}
console.log(Gender);

到此这篇关于TypeScript声明合并的实现的文章就介绍到这了,更多相关TypeScript声明合并内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • TypeScript 使用 Tuple Union 声明函数重载

    问题: TypeScript 中为函数添加多个签名后,依然需要添加相应的代码来判断并从不同的签名参数列表中获取对应的参数.过去常见的写法: function refEventEmitter(event?: string): void; function refEventEmitter(event: string, callback: () => void): void; function refEventEmitter(callback: () => void): void; function

  • js捆绑TypeScript声明文件的方法教程

    js捆绑TypeScript声明文件的方法教程

    前话 TypeScript是JavaScript类型的超集,这是TypeScript的文档介绍的一句话,那么他们存在联系呢? 我的理解是,TypeScript在JavaScript基础上引入强类型语言的特性.开发者使用TypeScript语法进行编程开发,最终通过转换工具将TypeScript转换成JavaScript. 使用TypeScript能够避免在原生JavaScript上开发所带来的弱类型语言的坑.(我该输入啥?调用后返回啥?哎还是看看源码吧...) 嗯!很好,强类型的JavaScri

  • 如何获取TypeScript的声明文件.d.ts

    一.TypeScript的声明文件就像C/C++用.h文件.当使用TypeScript调用其他已经编写好的类库时,可以提供IntelliSense智能提示. 二.使用npm指令来获取.d.ts文件 install -save @types/jquery -g 运行后在type/jquery目录下生成4个文件:index.d.ts,lincense,package.json,readme.md,其中的index.d.ts即为jquery的声明文件. 三.npm需要Nodejs环境,安装步骤如下 1

  • 详解TypeScript使用及类型声明文件

    详解TypeScript使用及类型声明文件

    目录 简介 Script 与 Vue3 defineProps 与 Typescript defineEmits 与 Typescript ref 与 Typescript computed 与 Typescript 事件对象 与 Typescript 模板 Ref 与 Typescript 可选链操作符 非空断言-TS TypeScript类型声明文件 基本介绍 内置类型声明文件 第三方库类型声明文件 自定义类型声明文件 简介 声明文件是以.d.ts为后缀的文件,开发者在声明文件中编写类型声明

  • TypeScript声明文件的语法与场景详解

    目录 简介 语法 内容 模块化 模块语法 三斜线指令 reference amd-module 场景 1. 在内部项目中给内部项目写声明文件 2. 给第三方包写声明文件 全局变量的第三方库 修改全局变量的模块的第三方库的声明 修改window ESM和CommonJS UMD 模块插件 总结 简介 声明文件是以.d.ts为后缀的文件,开发者在声明文件中编写类型声明,TypeScript根据声明文件的内容进行类型检查.(注意同目录下最好不要有同名的.ts文件和.d.ts,例如lib.ts和lib.

  • TypeScript类型声明书写详解

    本文总结一下TypeScript类型声明的书写,很多时候写TypeScript不是问题,写类型就特别纠结,我总结下,我在使用TypeScript中遇到的问题.如果你遇到类型声明不会写的时候,多看看lodash的声明,因为lodash对数据进行各种变形操作,所以你能遇到的,都有参考示例. 基本类型 // 变量 const num: number = 1; const str: string = 'str'; const bool: boolean = true; const nulls: null

  • TypeScript声明合并的实现

    目录 1.接口合并 2.命名空间 3.命名空间和类合并 4.命名空间和函数合并 5.命名空间和枚举合并 1.接口合并 interface TestInterface { name:string; } interface TestInterface { age:number; } //相当于下面 interface TestInterface { name:string; age:number; } class Person implements TestInterface{ name:strin

  • 关于TypeScript声明合并

    目录 介绍 基础概念 合并接口 合并命名空间 命名空间与类和函数和枚举类型合并 合并命名空间和类 非法的合并 模块扩展 全局扩展 介绍 TypeScript中有些独特的概念可以在类型层面上描述JavaScript对象的模型. 这其中尤其独特的一个例子是“声明合并”的概念. 理解了这个概念,将有助于操作现有的JavaScript代码. 同时,也会有助于理解更多高级抽象的概念. 对本文件来讲,“声明合并”是指编译器将针对同一个名字的两个独立声明合并为单一声明. 合并后的声明同时拥有原先两个声明的特性

  • TypeScript命名空间合并讲解

    目录 同名的命名空间之间的合并 命名空间和其他类型的合并 合并同名的命名空间和类 合并同名的命名空间和函数 同名的命名空间和枚举 前言: 回顾上一节的内容,在上一节中我们介绍了TS中最常见的声明合并:接口合并 我们从中了解了声明合并其实指的就是编译器会针对同名的声明合并为一个声明,合并的结果是合并后的声明会同时拥有原先两个或多个声明的特性 而接口合并的合并需要里面的成员是否有函数成员.对于里头的函数成员来说,每个同名函数声明都会被当成这个函数的一个重载,当接口 A与后来的接口 A合并时,后面的接

  • TS中最常见的声明合并(接口合并)

    目录 1.合并接口 1.1非函数成员 1.2函数成员 前言: 今天要讲的内容还是TS相关,在TS中最常见的声明合并:接口合并 在聊接口合并之前,我们先来聊聊声明合并 声明合并: 什么是声明合并? 其实很好理解,TS中的声明合并,指的就是编译器会针对同名的声明合并为一个声明 合并的结果: 合并后的声明会同时拥有原先两个或多个声明的特性 疑问: 那这两个或多个具体指的是什么呢? 其实得分几种情况讲,今天要讲的就是其中一种,最简单也最常见的声明合并类型是接口合并 1.合并接口 我们刚刚说了,"合并后的

  • Typescript 中的 interface 和 type 到底有什么区别详解

    interface VS type 大家使用 typescript 总会使用到 interface 和 type,官方规范 稍微说了下两者的区别 An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot. An interface can have multiple merged declarations, but a type

  • 详解Vue3.0 前的 TypeScript 最佳入门实践

    详解Vue3.0 前的 TypeScript 最佳入门实践

    前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript + Vue ,毛计喇,学之...-真香! 注意此篇标题的"前",本文旨在讲Ts混入框架的使用,不讲Class API 1. 使用官方脚手架构建 npm install -g @vue/cli # OR yarn global add @vue/cli 新的 Vue CLI 工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue cr

随机推荐