Global type in description file

This article will introduce TypeScript About the global type definition in the description file . This article will focus on JQuery As an example .

elicit questions

Directly in ts Use... In the document JQuery The syntax will prompt the following errors ：

This is because JQuery.js There is no JQuery Type related notes , So it can't be ts The correct in the file is identified , At this time, you need to use the type annotation file , To get through ts and js Gap between , help ts To understand the JQuery Related to the grammar .

Define global variables

jquery.d.ts

//  Define the receive parameter as a function , The return value is void Global variable of 
declare var $: (param: () => void) => void;

At this time ts It can be correctly identified in the document $ Represents the type of .

demo.ts

$(function () {
  alert(123)
})

Define global functions

The first way

jquery.d.ts

//  Define global functions :  The function name is  $,  Parameter type is function , The return value is void
declare function $(param: () => void): void;

At this time, you can ts Identify the defined global function in the file .

demo.ts

$(function () {
  alert(123)
})

The second way

jquery.d.ts

// Define global functions :  The function name is  $,  Parameter type is string, The inside contains a file named  html, receive  string  Parameters , A function whose return value is an object 
declare function $(param: string): {
  html: (html: string) => {}
}

At this time, you can ts Identify the defined global function in the file .

The third way

It is a variant of the second way , Make the code readable .

jquery.d.ts

//  Define global functions 
interface JqueryInstance {
  html: (html: string) => {};
}

declare function $(selector: string): JqueryInstance

At this time, you can ts Identify the defined global function in the file .

demo.ts

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

The fourth way

It is a variant of the third way , Conducive to code management , The encapsulation idea in design pattern is used .

jquery.d.ts

//  Define global functions 
interface JqueryInstance {
  html: (html: string) => JqueryInstance;
}
//  Use  interface  The grammar of , Implement function overloading 
interface JQuery {
  (readyFunc: () => void): void
  (selector: string): JqueryInstance
}
declare var $:JQuery

At this time, you can ts Identify the defined global function in the file .

demo.ts

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

Define the namespace

jquery.d.ts

//  How to type an object , And type definition of classes , And the nesting of namespaces 
declare namespace $ {
  namespace fn {
    class init {}
  }
}

At this time, you can ts The defined namespace is used in .

demo.ts

$(function () {
  new $.fn.init()
})

summary

The function of type definition file ：

help ts To understand the introduction of js What's in the library , because js There is no... In the library ts The concept of type , So in ts Introduction in js When I was in the library , Can't understand ’$' What is the , So you need to define type annotations , help ts To understand the .

Global function overload ： You can use the same function name , But functions with different parameter types and return value types .