1. 程式人生 > 其它 >js智慧提示工具 — xxx.d.ts檔案

js智慧提示工具 — xxx.d.ts檔案

 xxx.d.ts語法說明:https://www.cnblogs.com/Free-Thinker/p/10695612.html

一、全域性型別

  • 變數

   比如現在有一個全域性變數,那對應的d.ts檔案裡面這樣寫。

declare var aaa:number

其中關鍵字declare表示宣告的意思。在d.ts檔案裡面,在最外層宣告變數或者函式或者類要在前面加上這個關鍵字。在typescript的規則裡面,如果一個.ts.d.ts檔案如果沒有用到import或者export語法的話,那麼最頂層宣告的變數就是全域性變數。

  • 函式

     由上面的全域性變數的寫法我們很自然的推斷出一個全域性函式的寫法如下:

/** id是使用者的id,可以是number或者string */
decalre function getName(id:number|string):string

最後的那個string表示的是函式的返回值的型別。如果函式沒有返回值可以用void表示。

  • 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
}

 

二、ES6的模組化方式(import export)   【CommonJS模式這裡不講

  除了上面的全域性的方式,我們有時候還是通過 import 的方式引入模組化的程式碼。

declare var aaa: 1
declare var bbb: 2
declare var ccc: 3 //因為這個檔案裡我們使用了import或者export語法,所以bbb和ccc在其他程式碼裡不能訪問到,即不是全域性變數

export { aaa }

 使用:

import { a1, a2 } from "./A"

console.log(a1)
console.log(a2)