Typescript - declaration files and built-in objects

Preface

This paper mainly records TypeScript Declaration files and built-in objects in , Summary of daily study .

One 、 Declaration file

When using third-party libraries , We need to refer to its declaration file , To get the corresponding code completion 、 Interface prompt and other functions .

️、 What is a declaration statement

If we want to use a third-party library jQuery, A common way is in the html Pass through <script> Tags introduced jQuery, Then you can use global variables $ perhaps jQuery 了 . But in ts in , The compiler doesn't know $ or  jQuery What is it? . At this time , We need to use declare var To define its type .

declare var jQuery: (selector: string) => any;

jQuery('#foo');

️、 What is a declaration document

Usually we put the statement in a separate file （jQuery.d.ts） in , This is the declaration file .

Declaration file must be in .d.ts For the suffix .

Generally speaking ,ts Will parse all the... In the project *.ts file , Of course, it also includes .d.ts Final document .

️、 Third party statement documents

Recommended @types Unified management of third-party library statement file [email protected] It's easy to use , Direct use npm Install the corresponding declaration module , With jQuery give an example ：

npm install @types/jquery --save-dev

Two 、 Built-in objects

JavaScript There are many built-in objects in , They can be directly in TypeScript As a defined type .

The built-in object refers to the object in the global scope according to the standard （Global） Objects that exist on . The standard here refers to ECMAScript And other environments （ such as DOM） Standards for .

️、ECMAScript Built in objects for ：Boolean、Number、String、Error、Date、RegExp etc. .

let b: Boolean = new Boolean(1)
let n: Number = new Number(true)
let s: String = new String('abc')
let d: Date = new Date()
let r: RegExp = /^1/
let e: Error = new Error('error message')

// let bb: boolean = new Boolean(2) //  Report errors ： You can't type “Boolean” Assign to type “boolean”.“boolean” It's primitives , but “Boolean” Is a wrapper object .

️、DOM and BOM Built in objects for ：Window、Document、 HTMLElement、DocumentFragment、Event、NodeList etc. .

const div: HTMLElement = document.getElementById('app')
const divs: NodeList = document.querySelectorAll('div')
document.addEventListener('click', (event: MouseEvent) => {
  console.dir(event.target)
})
const fragment: DocumentFragment = document.createDocumentFragment()

️、TypeScript Definition file of core library Defines the types needed by all browser environments , And it is preset in TypeScript Medium . 

When you are using some common methods ,TypeScript In fact, I've done a lot of types of judgment for you , such as ：

Math.pow(10, '2') //  Report errors ： type “string” Argument to cannot be assigned to type “number” Parameters of .

In the example above ,Math.pow Must accept two number Parameters of type . in fact Math.pow The types of are defined as follows ：

interface Math {
    /**
     * Returns the value of a base expression taken to a specified power.
     * @param x The base value of the expression.
     * @param y The exponent value of the expression.
     */
    pow(x: number, y: number): number;
}

  For another DOM Examples in ：

document.addEventListener('click', function(e) {
  // console.log(e.targetCurrent); //  Report errors ： type “MouseEvent” Property does not exist on “targetCurrent”.
});

In the example above , addEventListener The method is in TypeScript Defined in the core library ：

interface Document extends Node, GlobalEventHandlers, NodeSelector, DocumentEvent {
    addEventListener(type: string, listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
}

therefore e To be inferred as MouseEvent, and  MouseEvent It's not targetCurrent Attribute , That's why I made a mistake .

️、 use TypeScript Write Node.js

Node.js Not part of the built-in object , If you want to use TypeScript Write Node.js, A third-party declaration file needs to be introduced ：

npm install @types/node --save-dev