TypeScript—型別定義檔案（*.d.ts）-有解無憂

一、ts檔案中引入jquery，

1.大家是否有再vue 上使用過 ts,并再 .ts檔案中參考過 jquery

1.1是不是遇到過如下問題：

import $ from 'jquery';
/***
Could not find a declaration file for module 'jquery'. 'd:/node-common/node_modules/jquery/dist/jquery.js' implicitly has an 'any' type.
  Try `npm install @types/jquery` if it exists or add a new declaration (.d.ts) file containing `declare module 'jquery';`
/

2.上述提示：

2.1.找不到模塊“jquery”的宣告檔案

2.2.嘗試npm install @types/jquery (如果存在的話)

2.3.添加一個包含declare module 'jquery'; 的宣告(.d.ts)檔案

3.嘗試安裝 `npm install @types/jquery` 檔案

執行后，發現npm倉庫下是有這個包的，而且不需要參考該包，且專案能夠正常運行了，是不是很神奇，

其實這里可以理解為，ts檔案并不知道jquery檔案到底暴露出的什么東西，無法獲取，.d.ts 會把jquery 檔案里面的方法屬性重新定義為它能夠認識的型別，

比如說常用到的$.ajax;$.get，在node_modules/types/jquery/JqueryStatic.d.ts 中我們可以看到對其的定義

interface JQueryStatic {
    ajax(settings?JQuery.AjaxSettings):Jquery.jqXHR;
    get(url: string,
        data: JQuery.PlainObject | string,
        success: JQuery.jqXHR.DoneCallback | null,
        dataType?: string): JQuery.jqXHR;
}

說到這里你可能還不太懂 .d.ts檔案怎么去用，

那么接下來和大家一起分享如何在自己的專案中使用.d.ts檔案，（如2.3中所說，也可以自己創建.d.ts檔案，對jquery 進行定義），

二、了解下TS資料型別

簡單的資料型別：

number:包括數字，浮點數，以及NAN、+-Infinity

string:字串型別

boolean：布爾型別

null,undefined型別

void型別：可以用于表示沒有回傳值的函式

物件型別

type ballType = {
    color:string;
    r:number;
}
let ball : ballType = {color:'red',r:10}

interface ball2Type{
    color:string;
    r:number;
}

let ball2:ballType = {color:'red',r:0.5}

/***
interface 和 type都可以去定義型別，具體也是有區別 如interface 只能定義function、object、class型別，type 不僅可以定義此型別，還可以定義其它型別 type msg = string; 具體差異可自行查閱資料 
*/

//順帶著說一下 可選屬性

interface ball3Type {
    color:string;
    r:number;
    index?:number // ? 把該屬性設為可選屬性，即該屬性可有可無
}
let ball3:ball3type = {color:'red',r:10} //正確
let ball4:ball3type = {color:'red'} //錯誤，ball3Type 需要有r屬性
let ball5:ball3type = {color:'red',r:10,index:1} //正確

//Partial<T> 實作可選屬性
//先看一下Partial 型別的定義
type Partial<T> = {
    [P in keyof T]?: T[P];
};
let ball6:Partial<ball3Type> = {}//正確
let ball7:Partial<ball3Type> = {r:10} //正確
//實際上 Partial 轉化 ball3Type 后，其型別就變成了,每個屬性都是可選屬性，如下
type Patial_ball3Type = {
    color?:string | undefined; // | 如 js 里面的 ‘||’ 或的意思
    r?:number | undefined;
    index?number | undefined;
}

//型別的拓展屬性
let ball8:ball3Type = {color:'red',r:10,title:'ball'} //error ，title 屬性不屬于ball3Type，所以呢，怎么處理這種方式呢，如下：

type ball4Type = {
    color:string;
    r:number;
    index?number;
    [key:string]:string|number; // 表示，可含有string型別的key，且值為stirng或number型別，
}
let ball9:ball4Type = {color:'red',r:10,title:'ball',x:10,y:10} //正確

函式型別

//宣告函式型別
type funType = (name:string) = >void;
let fun:funType = (name)=>{ console.log(name) }
//多型
interface fun2Type = {
    set(name:string):void;
    get(x:number):number;
}
let fun2:fun2Type = {
    set(name){},
    get(x){
        return x;
    }
}

還有一些混合型別，型別的并集，聯合,結構子型別等，

//簡單列舉下型別的并集和聯合
type A = {
    x:number;
    y:number;
}
type B = {
    z:number;
    x:number;
}
let m : A&B = {x:1,y;1,z:1}
let z:A|B = {z:1,x:1}

泛型

//泛型很重要，大家可以查閱資料細看，這里簡單列舉一下
//函式泛型
function get1<T>(num:T[]):T{
    return num[0]
}
//介面泛型
interface gen2Type<T>{
   getColor(ball:T):string;
   saveBall(ball:T):void;
}
//類的泛型
class gen3<T>{
    info(i:T):T{
        return i;
    }
}

三、類

//定義一個類
class A{
    //靜態成員
    static classId:number;
    //成員變數，默認為public 公有屬性
    name:string;
    age:number|void;
    s?:string;
    //建構式
    constructor(name:string,age?:number);
    //方法
    setS(s:string){
        this.s = s;
    }
}

//通過 new 實體化一個物件
const stu = new A('zhangsan');
const stu1 = new A('lisi',18);
stu1.setS("hello");
A.classId = 123;
console.log(`A.classId=${A.classId}`)

//類的繼承
class A {
    name:string;
    constructor(name:string){
        this.name = name;
    }
}
class B extends A {
    age:number;
    constructor(name:string,age:number){
        super(name);
        this.age = age;
    }
}
console.log(new B("zhangsan",18));
// B {name:'zhangsan',age:18}

//介面
interface Ani{
    kinds:number;
    draw(name:string):void;
    getKinds():number;
}
interface Bni extends Ani{
    time:Date;
    setTime(time:Date):void;
}

//當作變數型別
const M:Bni = {
    kinds:1,
    time:new Date(),
    draw(name:string){},
    getKinds(){
        return this.kinds;
    },
    setTime(time:Date){}
}
//當作介面
class M implements Bni {
    kinds = 1;
    time = new Date();
    draw(name:string){}
    getKinds(){
        return this.kinds;
    }
    setTime(time:Date){}
}

四、動手撰寫.d.ts檔案，讓ts檔案識別js

新建index.js檔案

module.exports = {
    url:'https://www.cnblogs.com/zcookies/'
}

新建custom.d.ts

//定義模塊
declare module '*/index.js'{
    const content: {
        url:string
    };
    export = content;
}

入口檔案main.ts

import config from './index.js';
console.log(config.url);
//此時發現引入index.js 不會報錯，而且會智能提示 config下面的url 屬性;

/***
1.如果沒有custom.d.ts
代碼會拋出：Could not find a declaration file for module './index.js';
且沒有智能提示；
2.如果宣告 declare module '*.js'，這樣做可以解決掉錯誤提示，但是沒有智能提示；
3.想要正確的智能提示，需要按照js檔案，輸入對應的.d.ts檔案即可，
*/

大家可以利用上面的知識點，實作對更復雜的js檔案進行宣告.d.ts檔案；

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/231403.html

標籤：JavaScript

上一篇：使用 webpack 手動搭建 vue 專案

下一篇：事件類

TypeScript—型別定義檔案（*.d.ts）