• TypeScript完全解读(26课时)_20.声明文件



    首先学习识别已有的js库的类型
    识别已有的js库的类型
    UMD既可以作为全局库使用,也可以作为模块使用

    先在着手来编写一个全局的库

    新建文件

    接收一个title,改变页面title的值
    这里用到 &&的特性,如果操作符两边的条件都为true,那他的返回值才是true
    如果第一个为false了,所以它肯定也不是true,后面的逻辑不会走,利用这个特性可以简化我们的代码,就不用写if document是否为空的判断了
    这句话的意思就是如果document为真才会执行后面的语句

    如果document存在就返回document.title.如果不存在就返回为空字符串

    然后再定义一个变量,调用getTitle()方法赋值

    我们在这里全局引用一下

    运行起来是找不到这个文件的。


    在终端执行npm run build看一下运行之后的效果,在dist文件夹下面只有一个index.html和main.js文件
    index.ts内引入的js文件都打包到main.js文件夹内,并没有把我们的handle-title.js引进来,所以使用这种相对路径的方式是没法引入的

    这里可以使用一个webpack的插件,把这个handle-title.js文件直接拷贝过去,不需要编译
    npm install -D copy-webpack-plugin:安装这个插件

    webpack.config.js内把这个插件引进来

    它接收一个对象,对象有两个属性


    这里用到Node.js里的一个模块Path,在上面先引入一下

    path.join拼接一个路径,__dirname代表当前js执行的一个绝对路径
    因为webpack.config.js是在build的文件夹下,所以要想找到handle-title.js这个文件的路径就需要往上返一个目录



    to:就是复制到哪个文件夹下

    npm run build再来重新编译一下,handle-t

    引用的路径改成同级别的js文件

    再次npm run build,生成的最终结果

    我们在js里面输出一句话,来证明我们引用成功了

    可以看到我们引用成功了,打印出了123

    ahndle-title.js里面定义的方法是全局的,那么我们在我们项目的每一天个ts文件内都可以引用到,
    创建一个新的文件

    然后在index.ts内引入

    现在调用会报错,找不到名称,就是因为我们需要给它写一个声明文件

    我们在src下新建index.d.ts文件

    15分32秒
    在tsconfig.json内增加include的选项

    会引入src下面的所有.ts的文件

    还需要引入src目录下的.d.ts的格式的文件 

    如果不写include的配置,会把所有的文件都引进来
    下面在这个文件夹里面,编写声明
    全局写生命苦的模板:
    https://www.tslang.cn/docs/handbook/declaration-files/templates.html

    global.d.ts 当你要为一个全局库写声明文件的模板

    暴露在全局的函数重载,前面要用declar修饰符修饰,这是一个全局的
     
    这里给myLib定义的接口,让这个库作为一种类型,定义一下只要是这种类型,必须有哪些字段

    这个库还有这一些全局的属性,这里导出为命名空间了


    handle-title.js里面写声明

    用declare去修饰,设置传入的title的值必须是stirng或者是数字的,、因为它没有返回值,这里返回类型就写void


    第二个getTitle方法和第三个全局的变量

    这个地方还是有报错

    但是这里已经打出了ts-learn

    是因为我们这里的命名,不应该写成index.d.t和index.js重名,都叫做index所以只会引入index.ts

    index.d.ts改名为:global.d.ts 这个里面用来放所有的全局的一些东西 声明

    这个地方就不会报错了,npm start重新编译一下;修改完文件需要重新编译才会重新加载这些声明文件

    再来调用setTitle的方法,可以看到我们没有引入,但是可以使用这个函数,还有正确的类型提示

    页面的title已经改变了

    打印出来我们getTitle方法返回的值;

    这就是一个简单的全局声明的书写,可以参考官方的模块

    模块化库:

    也就是依赖了模块解析器的库
    接下来看下,如何判断一个库是模块化库
    在模块化中你一般会看到,impport引入语句,输出语句,或者无条件的调用一些require或者define方法,这些都是要依赖模块解析器的。

    或者赋值给export点什么赋一个值,用来导出一个东西

    或者module.expports导出一个默认的东西,这种他就是一个模块化的库

    极少会在模块化库中看到对window、global的赋值,当然这也不是绝对的,有些库他就是要操作window的一些属性
    https://www.tslang.cn/docs/handbook/declaration-files/templates.html
    官方模板,module开头的有四个文件

    module-class.d.ts

    如果你要引入一个模块可以直接当做一个函数来调用,就可以参考:module-function.d.ts
    如果这个模块引入之后,可以当做类来使用,可以使用new关键字来创建实例,就可以参考module-class.d.ts
    如果既不能做实例也不能做函数使用就参考:module.d.ts
    实战的时候会讲

    UMD库

    将全局库和模块库的功能进行了合并,他会首先判断环境中有没有模块加载器以及特定的方法
    比如去判断define,有没有这个方法 define 、typeof有没有结合

    不等于undefined,说明是有define方法的

    如果说判断下module等于这个object

    module上面还有exports属性,说明他是有模块加载系统的。如果这两种都没有,就走全局的形式,一般有这些判断的在UMD库中会看到这些判断逻辑

    现在很多都是UMD库,既可以在html中用script方式引入,也可以使用模块系统来加载,比如jquery、moment这些库

    处理库的声明文件

    基本上所有的库都有第三方给他们编写的声明文件
    比如我们现在想使用一个库,在node_modules/arr-diff这么一个库,可以看到这个库里面只有这四个文件,它没有一个声明文件,如果使用里面的方法就会报错

    需要安装它的声明:npm install @types/arr-diff -D:作为开发依赖来安装 如果安装成功了说明有这个库的声明文件吗,如果没有安装成功,说明没有社区给他编写声明文件,那我们就需要自己写了

    看到这个带加号的说明有这个声明文件

    node_modules/@types/arr-diff/index.d.ts声明文件

    它的声明文件比较简单。就是导出了一主方法,可以在全局中使用也可以在模块中使用


    再把它卸载掉:npm uninstall @types/arr-diff

    模块插件或者UDM插件

    处理库声明文件里面第一部分:模块插件或者UDM插件
    一些模块或者拆件是支持插件机制的,比如我们常见的jquery,它的插件就非常多,可以为这个库数写声明文件的为库的键?定义声明文件?(听不大清楚,可能是这样的),可以参考:module-plugin.d.ts
    https://www.tslang.cn/docs/handbook/declaration-files/templates.html

    修改全局的模块

    有一些是影响全局的全局插件,有些库会在原生的js数据类型的原型对象上添加一些方法,使用原生的数据能够调用更为丰富的方法,
    下面来举个例子,我们要string的远行对象上加个方法

    在string 的原型对象上,构造函数原型对象上添加一个getFirstLetter方法,会放回当这个值的第一个字符

    在浏览器中查看效果

    这种模块引进来以后会修改全局,对全局的string函数都会构成影响,
    这个模块,我们要为它写声明文件
    它会给String做生命合并,定义一个接口String在里面定义个方法getFirstLetter它的返回值类型是string

    那么我们要引入这个模块

      在写的时候已经有代码提示了name.getFirstLetter

    如果把这个声明去掉

    那么就会报错了

    这就是修改全局的模块写声明文件

    使用依赖

    库多数会依赖其他库,比如node.js的一些模块会依赖node原生的一些自带的内置的一些模块,比如fs或者刚才我们用的那个Path,所以可以在定义库声明文件的时候,声明对其他库的依赖,从而加载其他库的声明,如果依赖全局的声明就用三个斜线referemce type这种形式来指定加载了某个全局库

    moment是有的,他就会在这里引入全局库moment的声明文件

    如果我们依赖的是模块库,就可以使用import语句。例如这里引入moment,这会把这个模块引进来。现在就可以在里面适应moment的一些东西

    如果全局库依赖的是某个UMD模块,也可以使用reference来引入,来指定对某个UDM模块的依赖

    最后有三点要注意的地方:
    1.防止命名冲突,在写全局声明的时候,在全局范围定义大量类型有时候会导致命名冲突,所以建议相关的命名放在命名空间里。命名空间很大的作用就是防止命名的污染,用的时候才用对象访问属性的方式
    2.es6模块插件的影响,一些开发者为一些库开发了插件,用于在原有库的基础上,添加更多的功能,这往往需要修改原有库的导出的模块的。在讲模块的时候说过,es6模块标准中,导出的模块是不允许修改的,但是在CommenJS和其他一些加载器里是允许的。
    所以要使用es6模块的话要注意这一点

    3.es6模块的调用,我们在使用一些苦的时候,导出的模块可以作为函数直接调用,在es6的模块顶层对象上是一个对象,他不能作为函数调用,比如直接用export导出几个内容,
    之前在c.js里面导出了这些东西

    在使用的时候,使用解构赋值的这种形式就

    就可以直接打印出来引入的这个

    假设要在c.js导出一个函数,在引入进来的地方呢要直接调用,就需要使用默认导出

    快捷外部模块声明

    如果使用一个新模块,不想花时间精力为这各模块写声明,ts在2.0版本支持了快捷外部模块声明
    在typings文件夹下创建moment文件夹,在下面创建index.d.ts

    在这里面写声明,这样你再引入模块的时候,是没有问题的。当让我们知道这个moment库它自身就带了声明文件,不需要再用@types去安装独立的声明文件

    一些没有声明文件,又没有社区为它编写声明文件,我们可以这样快速的导出这个模块,。这样我们在引入的时候是没有问题的


    为一些模块编写声明文件,会在后面的实战过程中来看下实际的操作







     

  • 相关阅读:
    React 之 jsx
    React 之 初识
    vue 之 svg
    c#进阶 之 特性
    c#进阶 之 反射Reflection
    面试题解答分析
    c#进阶 之 泛型
    c#进阶 之 修饰符
    c#进阶 之 方法汇总
    微信开发学习(二)
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/10913665.html
Copyright © 2020-2023  润新知