前言
在使用 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…