类型定义文件(*.d.ts)

阅读数:18 评论数:0

跳转到新版页面

分类

html/css/js

正文

类型定义文件

在TypeScript中, 我们可以很简单的, 在代码编写中定义类型:

interface IBaseModel {
  say(keys: string[] | null): object
}
 
class User implements IBaseModel {
  name: string
  constructor (name: string) {
    this.name = name
  }
}

但是主流的库都是JavaScript编写的, TypeScript身为JavaScript的超集, 自然需要考虑到如何让JS库也能定义静态类型. 最终在TypeScript 2.0的时候重新整理DefinitelyTyped. DefinitelyTyped就是让你把"类型定义文件(*.d.ts)", 发布到npm中, 配合编辑器(或插件), 就能够检测到JS库中的静态类型. 类型定义文件的以.d.ts结尾, 里面主要用来定义类型.

类型定义

我们可以使用type用来定义类型变量, 在参数名后面, 冒号前面添加一个问号,则表明该参数是可选的:

/ 基本类型
type UserName = string
 
// 类型赋值
type WebSite = string
type Tsaid = WebSite
 
// 对象
type User = {
  name: string;
  age: number;
  website: WebSite;
}
 
// 方法
type say = (age: number) => string
// 类
class TaSaid {
  website: string;
  say: (age: number) => string;
}

我们也可以使用interface定义我们的复杂类型,

interface Application {
    init(): void
    get(key: string): object
}

declare

declare可以创建*.d.ts文件中的变量, declare只能作用域最外层:

declare var foo: number;
declare function greet(greeting: string): void;
 
declare namespace tasaid {
  // 这里不能 declare
  interface blog {
    website: 'http://tasaid.com'
  } 
}

namespace

为防止类型重复, 使用namespace用于划分域块, 分离重复的类型, 顶层的namespace需要declare输出到外部环境, 子命名空间不需要declare.

// 命名空间
declare namespace Models {
  type A = number
  // 子命名空间
  namespace Config {
    type A = object
    type B = string
  }
}
 
type C = Models.Config.A

集成发布

有两种主要方式用来发布类型定义文件到npm

(1)与你的npm包捆绑在一起(内置类型定义文件)

(2)发布到npm上的https://www.npmjs.com/~types




相关推荐

一、概述 图片是 Web 页面中最耗费带宽和加载时间的资源之一。 压缩图片 压缩图片可以减少图片的文件大小,从而减少加载时间。 使用矢量图形 使用矢量图形(如 SVG)可以减少文件大小,并且

一、概述 当关注用户体验,不希望因为一些不重要的任务(如统计上报)导致用户感觉到卡顿的话,就应该考虑使用requestIdleCallback。因为requestIdleCallback回调的执行的前

缓存页面主要Jul为了防止重复渲染dom,减少加载时间及性能消耗,提高用户体验。 一、旧版的语法 <keep-alive> <router-view v-if="$route.meta.kee

方式一、使用provide/inject 如果你想在多个组件之间共享变量,你可以使用 provide 和 inject API。在父组件中使用 provide 来定义一个可以被子组件注入的变量,然后在

原因是 返回的数字和el-option选框里value值的类型对应不上一个是 Numer 一个是 String 解决方法 <el-form-item prop="performType" label=

类型是String时,不需写冒号。 text-color='red' 类型是基它类型时,需要写冒号,比如布尔值。 :collapse='true'

一、概述 NUXT 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染(SSR)应用,也可充当静态站点引擎生成静态站点应用。服务端渲染又称 SSR (Server Side Render

shamefully-hoist=true 是一个在 Vue 3 项目中使用 Vite 时的配置选项。这个选项用于解决某些情况下的依赖冲突问题。 在 Vue 3 项目中,你可以在 vite.confi

一、组件编码规范 PascalCase 大写驼峰式 如: MClass camelCase 小写驼峰式 比如: MyClass kebab-case 小写短横线  比如:my-class

方法一、使用new URL 在 Vite 中,你可以使用 new URL 的方式来引用静态资源,这样 Vite 会处理资源的路径,并且在构建时会将资源复制到输出目录: <script setup> c