TypeScript 中的非基礎型別宣告

NingBo發表於2019-05-10
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 過程中用到的一些非基礎型別宣告，一些使用過但疏漏的會在日後補充到文章；
  • 文件名詞描述可能存在不恰當的情況，歡迎指正；
  • 本文長期更新，如果你有遇到什麼問題可以留言，我們一起探討。

更多文章

相關文章