添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
儒雅的核桃  ·  CellChat ...·  2 年前    · 
果断的汉堡包  ·  Thread.currentThread() ...·  2 年前    · 
独立的饺子  ·  2021-04-20 - 过年好_ - 简书·  2 年前    · 
卖萌的滑板  ·  有趣的 CSS - ...·  2 年前    · 

<TS> 给Window增加自定义属性声明-可使用已经定义好的类型来声明

给Window增加一个简单的类型声明

创建一个 xxx.d.ts 文件, 使用 declare 声明类型 <注意:此文件中不可以具有 import 等导入方法>

<env.d.ts>
/// <reference types="vite/client" />
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
declare interface Window {
  canvas: {
    e: boolean[],
    x: number,
    y: string

给Window增加一个复杂的类型声明

因为在声明文件中使用 import 会导致被当作一个模块导致类型声明失效,如果我们要给Window增加一个已经声明好的类型就需要先创建一个文件用于定义全局命名空间,我们可以在命名空间中引入类型

创建 xxx.d.ts 文件 -> 创建命名空间 -> 在Window声明文件中使用命名空间定义的类型

<window.d.ts>
import { CanvasPlus, Canvas } from '@/declare'
declare namespace WindowCanvas {
  interface CanvasInterface extends Canvas {
    canvas: CanvasPlus
export = WindowCanvas
export as namespace WindowCanvas
<env.d.ts>
/// <reference types="vite/client" />
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
declare interface Window {
  windowCanvas: WindowCanvas.CanvasInterface