国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何從JavaScript跨越到TypeScript [基礎進階知識點]

zhunjiee / 2870人閱讀

摘要:接口前端程序員很難理解的點也是一門面向對象的語言,但是中它是基于原型實現的,中使用了類,這樣會更清晰的體會到面向對象這一說法,但是實際在中的面向對象更加完整,它跟這些語言一樣,通過接口和類去完整的面向對象編程。

從入門到放棄的java

初中時自學過JAVA,學了大概一個多月吧, 學了一個多月,看視頻這些,后面放棄了編程。 依稀記得,那段日子極度苦逼,我想如果當時是學javaScript就好了。

說正事,typeScript現在真的很火,聽過一句話,大項目,好點的公司,必須上typeScript,還有React,沒有為什么,這里并不是說其他的技術不好,只是說大型項目,最好TS,它對于我們后期代碼維護,前期的調試能省去很多時間。

Node.js之快速搭建微信公眾號服務器

Node.js之快速搭建服務器+前后端數據庫session交互

ES6教程全篇

前端中大廠面試必問 原生javaScript操作


想學習typeScript,我覺得你首先要對原生javaScript非常熟練,最基礎的知識最重要,然后要掌握ES5+ES6+ES7(7以后的最好知道一些),新技術掌握了,以后就不會那么累。 typeScript =type+ javaScript ,在ES5/6/7+javaScript基礎上加了一個type!

TS相對JS來說,它真的非常嚴格,只要稍微不匹配接口或者值的類型,又或者是參數的個數不對,值改變后跟原值類型不

一致,都會導致報錯。 建議使用npm 全局安裝typeScript 然后使用 tsc *.ts 進行編譯TS文件

"typeScript的新增核心概念:"

let app:string=2;這段代碼就會報錯,因為值 2 是一個number,而規定app是string類型,這樣在TS中會報錯的


新增值的類型:

any:可以是任意類型

vold:一個空的返回類型,比如function move():vold{} 這樣代表這個函數沒有返回值 ,如果換成any,那么就隨便這個

函數返回什么類型,但是他必須return 否則TS會報錯


新增概念:類型推論

let app = "hello" ; app=1 ; 這段代碼就會報錯,因為TS把他當成了 let app:string = "hello",再次改變

app的值,必須是string類型,否則報錯 ,這就是類型推論


聯合類型

let app: string | number = "hello" ; app = 1; 這段代碼是不會報錯的,因為app是一個聯合類型的變量,它即可以是

string又可以是number,只要符合其中一個類型即可,當然你也可以寫更多個。


接口 interface (前端程序員很難理解的點)

javaScript也是一門面向對象的語言,但是ES5中它是基于原型實現的,ES6中使用了class類,這樣會更清晰的體會到

面向對象這一說法,但是實際在TS中的面向對象更加完整,它跟JAVA這些語言一樣,通過接口和類去完整的面向對象編程。

你可以把對象想象成一個女人 (在TS中抽象成一個變量 let app )

我們使用接口去描述這個女人 (在TS中使用 let app : interfacename)

最后使用一些方法去獲得這個女人的聯系方式 (在TS中使用class類里面的方法去實現)

比如 :

class ask{

    name:string;
    
    tel ? :number  ;   //這里為什么加問號,因為你不一定能拿到她的號碼,如果拿不到,那么便可以不傳參數,
    
    但是如果不加? ,你又沒那么號碼,那么你沒有參數傳進來,TS就會報錯 
    
    age:number ;
    
    constructor(name,age,tel){
         this.name=name;
         this.age=age;
         this.tel=tel
    }
}

interface check {

    name : string;
    
    age:number;
    
    tel ? :number;  
    
}

let woman :check = new ask ("rose",20,1888888888);//假設你拿到美女所有資料 傳入構造函數 

這樣你可以打印一把 console.log(woman),看看它是怎樣的,上面這段代碼是沒有報錯的。

上面的代碼通過tsc命令編譯成JS文件后

var ask = /* @class / (function () {

function ask(name, age, tel) {


    this.name = name;
    
    
    this.age = age;
    
    
    this.tel = tel;
    
    
}
return ask;

}());

let woman = new ask("rose", 20, 1888888888);

console.log(woman)

"這里要注意,很多TS的代碼編譯后,是不會出現在JS文件中,比如const enum的枚舉, interface這些,當然后面還會遇到更多"




-------------


### 元組的概念

JS中的數組,能儲存大量的內容,所謂的元祖,其實就是數據類型的不同的數組

[1,"1",true,false] 其實這個就是一個元組,只是叫法不一樣。

-------


### 枚舉 enum 和 const enum的區別

enum app { red, blue, pink, deeppink }

console.log(app.red, app.blue, app.pink, app.deeppink) // 輸出0,1,2,3

enum app2 { red = 2, blue, pink, deeppink }

console.log(app2.red, app2.blue, app2.pink, app2.deeppink) // 輸出2,3,4,5

枚舉默認的第一個值是0;也可以自己定義,如果自定義和系統默認的沖突,TS是不認識的,

他也不會報錯,但是我不建議你這樣做,畢竟誰沒事找事呢?

### 還有一種常量枚舉 

const enum Directions {

Up,
Down,
Left,
Right

}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
// 結果是 0 1 2 3

* 假如包含了計算成員,則會在編譯階段報錯:

 * const enum Color {Red, Green, Blue = "blue".length};   

* 常數枚舉與普通枚舉的區別是,它會在編譯階段被刪除,并且不能包含計算成員。  一試便知 

類和接口 (最重要的之一)
* 一個類一次只可以繼承一個接口,但是可以一次對應多個接口
* 要想實現多個類繼承,那么使用子類繼續繼承其他類,循環下去

interface check {

name: string;
age: number;
hobby: Array
fuck: number[]   //這兩種寫法是一樣的

}

class exp implements check {

name: string
age: number
hobby:Array
fuck: number[]
constructor(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}

}

let app = new exp("hello", 18, [1, 2, 3], [2, 3, 4])

-------經過TS編譯后得到  

var exp = /* @class / (function () {

function exp(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}
return exp;

}());
var app = new exp("hello", 18, [1, 2, 3], [2, 3, 4]);

typeScript可能最難的就是如何理解優雅的面向對象編程,接口interface只是為了描述而已,


真正去實現,需要class類去實現,ES6在typeScript中位置舉足輕重,

所以我建議你先去學習原生javaScript+ES6再來學習typeScript,那樣會輕松很多,


下面放一個阮一峰的ES6的學習文檔鏈接,里面寫得非常詳細,一定要認真看。 

 
[ECMAScript 6 入門](http://es6.ruanyifeng.com/)  

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/53896.html

相關文章

  • 如何JavaScript跨越TypeScript [基礎進階識點]

    摘要:接口前端程序員很難理解的點也是一門面向對象的語言,但是中它是基于原型實現的,中使用了類,這樣會更清晰的體會到面向對象這一說法,但是實際在中的面向對象更加完整,它跟這些語言一樣,通過接口和類去完整的面向對象編程。 從入門到放棄的java 初中時自學過JAVA,學了大概一個多月吧, 學了一個多月,看視頻這些,后面放棄了編程。 依稀記得,那段日子極度苦逼,我想如果當時是學javaScrip...

    wangym 評論0 收藏0
  • 前端進階資源整理

    摘要:前端進階進階構建項目一配置最佳實踐狀態管理之痛點分析與改良開發中所謂狀態淺析從時間旅行的烏托邦,看狀態管理的設計誤區使用更好地處理數據愛彼迎房源詳情頁中的性能優化從零開始,在中構建時間旅行式調試用輕松管理復雜狀態如何把業務邏輯這個故事講好和 前端進階 webpack webpack進階構建項目(一) Webpack 4 配置最佳實踐 react Redux狀態管理之痛點、分析與...

    BlackMass 評論0 收藏0
  • SegmentFault 技術周刊 Vol.40 - 2018,來學習一門新的編程語言吧!

    摘要:入門,第一個這是一門很新的語言,年前后正式公布,算起來是比較年輕的編程語言了,更重要的是它是面向程序員的函數式編程語言,它的代碼運行在之上。它通過編輯類工具,帶來了先進的編輯體驗,增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了,總結過去的 2017,相信小伙們一定有很多收獲...

    caspar 評論0 收藏0
  • SegmentFault 技術周刊 Vol.40 - 2018,來學習一門新的編程語言吧!

    摘要:入門,第一個這是一門很新的語言,年前后正式公布,算起來是比較年輕的編程語言了,更重要的是它是面向程序員的函數式編程語言,它的代碼運行在之上。它通過編輯類工具,帶來了先進的編輯體驗,增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了,總結過去的 2017,相信小伙們一定有很多收獲...

    nihao 評論0 收藏0

發表評論

0條評論

zhunjiee

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<