TypeScript 中的非基础类型声明

前言

在使用 TypeScript 进行类型声明时，除了使用到 boolean 、number、string、Array 等基础类型，还会使用到 DOM 元素的声明，或者 setInterval 等常用方法的声明。自己刚开始使用 TypeScript 的时候，会对这些非基础类型的声明感到困扰，因此，本文将记录自己困扰过的 TypeScript 非基础类型的声明。

版本说明

• TypeScipt 版本：TypeScript 3.1；
• PixiJS 版本：5.0.1;

非基础类型的声明

DOM 元素的类型声明

安装 TypeScript 时，默认会引入 lib.dom.d.ts 文件，该文件提供了 DOM 元素的类型，我们直接使用就可以。

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

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

...
复制代码

canvas 的类型声明

const canvas:HTMLCanvasElement = document.createElement('canvas');
const ctx:CanvasRenderingContext2D = canvas.getContext('2d');
复制代码

setInterval 声明

let timer:number = setInterval(()=>{
    
},500);
复制代码

自定义类型的声明

嵌套数组的类型声明

// 自定义接口
interface Position {
    x:number;
    y:number;
}

// 声明一个嵌套数组
const positionArray:Array<Array<Array<Position>>> = [
     [
          {
               x:0,
               y:0,
          }
     ]
]
复制代码

PixiJS 中的类型声明

const bg:PIXI.Sprite = new PIXI.Sprite();
复制代码

bg.on('pointerdown',(e:PIXI.interaction.InteractionEvent):void=>{
    
});
复制代码

总结

• 以上是自己在使用 TypeScript 过程中用到的一些非基础类型声明，一些使用过但疏漏的会在日后补充到文章；
• 文档名词描述可能存在不恰当的情况，欢迎指正；
• 本文长期更新，如果你有遇到什么问题可以留言，我们一起探讨。

更多文章

• 查看 网易创意部 其他小伙伴的文章：github.com/f2e-netease…
• 查看我的更多文章：github.com/NalvyBoo/bl…