<noframes id="ffjxp">

    <th id="ffjxp"></th>

    <big id="ffjxp"></big>
      <pre id="ffjxp"></pre>
        <var id="ffjxp"><font id="ffjxp"></font></var>

        成都web前端培訓
        成都達內金融街中心

        成都前端學習路線:TypeScript—類型定義文件(*.d.ts)

        • 時間:2020-12-08 13:43
        • 發布:成都達內
        • 來源:成都達內

        一、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 實現可選屬性

        //先看一下Partial 類型的定義

        type Partial = {

        [P in keyof T]?: T[P];

        };

        let ball6:Partial = {}//正確

        let ball7:Partial = {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(num:T[]):T{

        return num[0]

        }

        //接口泛型

        interface gen2Type{

        getColor(ball:T):string;

        saveBall(ball:T):void;

        }

        //類的泛型

        class gen3{

        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文件;

        上一篇:成都web前端培訓:用React和D3創建圖表
        下一篇:成都web前端培訓:npm的下載與安裝
        • 關注微信公眾號

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        江西省

        貴州省

        廣西省

        海南省

        校花把腿张开让男生桶视频,欧美va天堂在线电影,欧美中文有码字幕在线播放,九九热线精品视频6在线