前言
本文主要讲怎么写一个typescript的描述文件(以d.ts结尾的文件名,比如xxx.d.ts)。
最近开始从js转ts了。但是要用到一些描述文件(d.ts),常用的比如jquery等都可以通过 npm下载到别人已经写好的npm install @types/jquery。但是还是有一些小众的或者公司内部的公共库或者以前写过的公用js代码需要自己手动写描述文件。
之前也从网上面也找了一些资料,但还是看的云里雾里模糊不清,经过一段摸索,将摸索的结果记录下来,也希望可以给别人一个参考。
如果你只写js,d.ts对你来说也是有用的,大部分编辑器能识别d.ts文件,当你写js代码的时候给你智能提示。效果像这样:
详情可以看我以前写过的一些文章:https://www.jb51.net/article/138211.htm
通常,我们写js的是时候有两种引入js的方式:
1,在html文件中通过<script>标签全局引入全局变量。
2,通过模块加载器require其他js文件:比如这样var j=require('jquery')。
全局类型
首先以第一种方式举例。
变量
比如现在有一个全局变量,那对应的d.ts文件里面这样写。
declare var aaa:number
其中关键字declare表示声明的意思。全局变量是aaa,类型是数字类型(number)。当然了也可以是string类型或者其他或者:
declare var aaa:number|string //注意这里用的是一个竖线表示"或"的意思
如果是常量的话用关键字const表示:
declare const max:200
函数
由上面的全局变量的写法我们很自然的推断出一个全局函数的写法如下:
/** id是用户的id,可以是number或者string */ decalre function getName(id:number|string):string
最后的那个string表示的是函数的返回值的类型。如果函数没有返回值可以用void表示。
在js里面调用的时候就会提示:
我们上面写的注释,写js的时候还可以提示。
有时候同一个函数有若干种写法:
get(1234) get("zhangsan",18)
那么d.ts对应的写法:
declare function get(id: string | number): string declare function get(name:string,age:number): string
如果有些参数可有可无,可以加个"htmlcode">
declare function render(callback"htmlcode">render() render(function () { alert('finish.') })class
当然除了变量和函数外,我们还有类(class)。
declare class Person { static maxAge: number //静态变量 static getMaxAge(): number //静态方法 constructor(name: string, age: number) //构造函数 getName(id: number): string }constructor表示的是构造方法:
其中static表示静态的意思,用来表示静态变量和静态方法:
对象
declare namespace OOO{ }当然了这个对象上面可能有变量,可能有函数可能有类。
declare namespace OOO{ var aaa: number | string function getName(id: number | string): string class Person { static maxAge: number //静态变量 static getMaxAge(): number //静态方法 constructor(name: string, age: number) //构造函数 getName(id: number): string //实例方法 } }其实就是把上面的那些写法放到这个namespace包起来的大括号里面,注意括号里面就不需要declare关键字了。
效果:对象里面套对象也是可以的:
declare namespace OOO{ var aaa: number | string // ... namespace O2{ let b:number } }效果:
混合类型
有时候有些值既是函数又是class又是对象的复杂对象。比如我们常用的jquery有各种用法:
new $() $.ajax() $()既是函数又是对象
declare function $2(s:string): void declare namespace $2{ let aaa:number }效果:
作为函数用:
作为对象用:
也就是ts会自动把同名的namespace和function合并到一起。
既是函数,又是类(可以new出来)
// 实例方法 interface People{ name: string age: number getName(): string getAge():number } interface People_Static{ new (name: string, age: number): People /** 静态方法 */ staticA():number (w:number):number } declare var People:People_Static效果:
作为函数使用:
类的静态方法:
类的构造函数:
类的实例方法:
模块化
除了上面的全局的方式,我们有时候还是通过require的方式引入模块化的代码。
比如这样的效果:
对应的写法是这样的:
declare module "abcde" { export let a: number export function b(): number export namespace c{ let cd: string } }其实就是外面套了一层 module "xxx",里面的写法和之前其实差不多,把declare换成了export。
此外,有时候我们导出去的是一个函数本身,比如这样的:
对应的写法很简单,长这个样子:
declare module "app" { function aaa(some:number):number export=aaa }以此类推,导出一个变量或常量的话这么写:
declare module "ccc" { const c:400 export=c }效果:
UMD
有一种代码,既可以通过全局变量访问到,也可以通过require的方式访问到。比如我们最常见的jquery:
其实就是按照全局的方式写d.ts,写完后在最后加上declare namespace "xxx"的描述:
declare namespace UUU{ let a:number } declare module "UUU" { export =UUU }效果这样:
作为全局变量使用:
作为模块加载使用:
其他
有时候我们扩展了一些内置对象。比如我们给Date增加了一个format的实例方法:
对应的d.ts描述文件这样写:
interface Date { format(f: string): string }总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]