preface

TypeScript type declarations use basic types such as Boolean, number, string, and Array, as well as declarations of DOM elements or common methods such as setInterval. I struggled with these non-base type declarations when I first started working with TypeScript, so this article will document the non-base type declarations I’ve struggled with.

Release notes

  • TypeScipt version:TypeScript 3.1;
  • PixiJS version:5.0.1;

Non-base type declaration

Type declarations for DOM elements

When TypeScript is installed, the lib.dom.d.ts file is introduced by default. This file provides the types of DOM elements that we can use directly.

// <div>
const div:HTMLDivElement = document.createElement('div');

// <img>
const img:HTMLImageElement = document.createElement('img'); const img:HTMLImageElement = new Image(); .Copy the code

Canvas type declaration

const canvas:HTMLCanvasElement = document.createElement('canvas');
const ctx:CanvasRenderingContext2D = canvas.getContext('2d');
Copy the code

SetInterval statement

let timer:number = setInterval(()=>{
    
},500);
Copy the code

The arguments statement

function fn() {let args: IArguments = arguments;
}
Copy the code

Declaration of a custom type

A type declaration for a nested array

// Interface Position {x:number; y:number; } const positionArray:Array<Array<Array<Position>>> = [[{x:0, y:0,}]]Copy the code

Type declarations in PixiJS

const bg:PIXI.Sprite = new PIXI.Sprite();
Copy the code
bg.on('pointerdown',(e:PIXI.interaction.InteractionEvent):void=>{
    
});
Copy the code

conclusion

  • There are many built-in objects in JavaScript that can be treated directly as defined types in TypeScript, and their definition files are in the TypeScript core library definition files.

Refer to the link

  • Getting started with TypeScript: Built-in objects

More articles

  • Check out other articles of netease Creative Department: github.com/f2e-netease…
  • Check out more of my articles: github.com/ningbonb/bl…