d.ts文件可以注释html吗,如何编写一个d.ts文件的步骤详解_旧店_前端开发者
前言
本文主要講怎么寫一個typescript的描述文件(以d.ts結(jié)尾的文件名,比如xxx.d.ts)。
最近開始從
之前也從網(wǎng)上面也找了一些資料,但還是看的云里霧里模糊不清,經(jīng)過一段摸索,將摸索的結(jié)果記錄下來,也希望可以給別人一個參考。
如果你只寫
詳情可以看我以前寫過的一些文章://www.jb51.net/article/138211.htm
通常,我們寫
1,在
2,通過模塊加載器require其他
全局類型
首先以第一種方式舉例。
變量
比如現(xiàn)在有一個全局變量,那對應(yīng)的d.ts文件里面這樣寫。
declare var aaa:number
其中關(guān)鍵字declare表示聲明的意思。全局變量是aaa,類型是數(shù)字類型(number)。當(dāng)然了也可以是string類型或者其他或者:
declare var aaa:number|string //注意這里用的是一個豎線表示"或"的意思
如果是常量的話用關(guān)鍵字const表示:
declare const max:200
由上面的全局變量的寫法我們很自然的推斷出一個全局
/** id是用戶的id,可以是number或者string */
decalre function getName(id:number|string):string
最后的那個string表示的是
在
我們上面寫的注釋,寫js的時候還可以提示。
有時候同一個
get(1234)
get("zhangsan",18)
那么d.ts對應(yīng)的寫法:
declare function get(id: string | number): string
declare function get(name:string,age:number): string
如果有些參數(shù)可有可無,可以加個?表示非必須。
declare function render(callback?:()=>void): string
js中調(diào)用的時候,回調(diào)傳不傳都可以:
render()
render(function () {
alert('finish.')
})
class
當(dāng)然除了變量和
declare class Person {
static maxAge: number //靜態(tài)變量
static getMaxAge(): number //靜態(tài)方法
constructor(name: string, age: number) //構(gòu)造函數(shù)
getName(id: number): string
}
constructor表示的是構(gòu)造方法:
其中static表示靜態(tài)的意思,用來表示靜態(tài)變量和靜態(tài)方法:
對象
declare namespace OOO{
}
當(dāng)然了這個對象上面可能有變量,可能有函數(shù)可能有類。
declare namespace OOO{
var aaa: number | string
function getName(id: number | string): string
class Person {
static maxAge: number //靜態(tài)變量
static getMaxAge(): number //靜態(tài)方法
constructor(name: string, age: number) //構(gòu)造函數(shù)
getName(id: number): string //實例方法
}
}
其實就是把上面的那些寫法放到這個namespace包起來的大括號里面,注意括號里面就不需要declare關(guān)鍵字了。
效果:
對象里面套對象也是可以的:
declare namespace OOO{
var aaa: number | string
// ...
namespace O2{
let b:number
}
}
效果:
混合類型
有時候有些值既是函數(shù)又是class又是對象的復(fù)雜對象。比如我們常用的
new $()
$.ajax()
$()
既是函數(shù)又是對象
declare function $2(s:string): void
declare namespace $2{
let aaa:number
}
效果:
作為函數(shù)用:
作為對象用:
也就是ts會自動把同名的namespace和function合并到一起。
既是函數(shù),又是類(可以new出來)
// 實例方法
interface People{
name: string
age: number
getName(): string
getAge():number
}
interface People_Static{
new (name: string, age: number): People
/** 靜態(tài)方法 */
staticA():number
(w:number):number
}
declare var People:People_Static
效果:
作為函數(shù)使用:
類的靜態(tài)方法:
類的構(gòu)造函數(shù):
類的實例方法:
模塊化
除了上面的全局的方式,我們有時候還是通過require的方式引入模塊化的代碼。
比如這樣的效果:
對應(yīng)的寫法是這樣的:
declare module "abcde" {
export let a: number
export function b(): number
export namespace c{
let cd: string
}
}
其實就是外面套了一層 module “xxx”,里面的寫法和之前其實差不多,把declare換成了export。
此外,有時候我們導(dǎo)出去的是一個函數(shù)本身,比如這樣的:
對應(yīng)的寫法很簡單,長這個樣子:
declare module "app" {
function aaa(some:number):number
export=aaa
}
以此類推,導(dǎo)出一個變量或常量的話這么寫:
declare module "ccc" {
const c:400
export=c
}
效果:
UMD
有一種代碼,既可以通過全局變量訪問到,也可以通過require的方式訪問到。比如我們最常見的
其實就是按照全局的方式寫d.ts,寫完后在最后加上declare namespace “xxx”的描述:
declare namespace UUU{
let a:number
}
declare module "UUU" {
export =UUU
}
效果這樣:
作為全局變量使用:
作為模塊加載使用:
其他
有時候我們擴展了一些內(nèi)置對象。比如我們給Date增加了一個format的實例方法:
對應(yīng)的d.ts描述文件這樣寫:
interface Date {
format(f: string): string
}
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對前端開發(fā)者的支持。
總結(jié)
以上是生活随笔為你收集整理的d.ts文件可以注释html吗,如何编写一个d.ts文件的步骤详解_旧店_前端开发者的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 减肥到多少斤开始塑形
- 下一篇: 前端对div连线_《前端图形学从入门到放