TypeScript 中的非基础类型声明

电玩女神 2022-01-19 23:25 370阅读 0赞

## 前言 ##

在使用 `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_f2e-netease]
 *  查看我的更多文章：[github.com/NalvyBoo/bl…][github.com_NalvyBoo_bl]

[github.com_f2e-netease]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ff2e-netease%2Fblog
[github.com_NalvyBoo_bl]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FNalvyBoo%2Fblog