.d.ts声明文件的写法

1、如果在HTML页面中用<script>标签引入，page.ts中的$，ts是无法识别的，需要.d.ts描述文件

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script src="./src/page.ts"></script>

 

---------

page.ts

$(function () {
    $('body').html('<div>123</div>')
    new $.fn.init()
})

jquery.d.ts

//定义全局变量
// declare var $: (param: () => void) => void;

//定义全局函数
interface JqueryInstance {
    html: (html: string) => JqueryInstance
}

//函数重载
declare function $(readyFunc: () => void): void
declare function $(selector: string): JqueryInstance

// 对象和类进行类型定义，以及命名空间的嵌套
declare namespace $ {
    namespace fn {
        class init {
        }
    }
}

//使用interface的语法实现函数重载
// interface JQuery{
//     (readyFunc: () => void): void
//     (selector: string): JqueryInstance
// }
// declare var $:JQuery

 

2、如果使用模块化方式引入

npm install jquery

---------------

page.ts

import $ from 'jquery'

$(function () {
    $('body').html('<div>123</div>')
    new $.fn.init()
})

jquery.d.ts

//以es6的语法讲解如何在d.ts中声明模块
//模块化的声明文件
declare module 'jquery' {
    interface JqueryInstance {
        html: (html: string) => JqueryInstance
    }

    //混合类型
    function $(readyFunc: () => void): void
    function $(selector: string): JqueryInstance

    namespace $ {
        namespace fn {
            class init {
            }
        }
    }
    export = $
}