摘要:接口前端程序員很難理解的點也是一門面向對象的語言,但是中它是基于原型實現的,中使用了類,這樣會更清晰的體會到面向對象這一說法,但是實際在中的面向對象更加完整,它跟這些語言一樣,通過接口和類去完整的面向對象編程。
從入門到放棄的java
初中時自學過JAVA,學了大概一個多月吧, 學了一個多月,看視頻這些,后面放棄了編程。 依稀記得,那段日子極度苦逼,我想如果當時是學javaScript就好了。
說正事,typeScript現在真的很火,聽過一句話,大項目,好點的公司,必須上typeScript,還有React,沒有為什么,這里并不是說其他的技術不好,只是說大型項目,最好TS,它對于我們后期代碼維護,前期的調試能省去很多時間。
Node.js之快速搭建微信公眾號服務器
Node.js之快速搭建服務器+前后端數據庫session交互
ES6教程全篇
前端中大廠面試必問 原生javaScript操作
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,只要符合其中一個類型即可,當然你也可以寫更多個。
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: Arrayfuck: number[] //這兩種寫法是一樣的
}
class exp implements check {
name: string age: number hobby:Arrayfuck: 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
摘要:接口前端程序員很難理解的點也是一門面向對象的語言,但是中它是基于原型實現的,中使用了類,這樣會更清晰的體會到面向對象這一說法,但是實際在中的面向對象更加完整,它跟這些語言一樣,通過接口和類去完整的面向對象編程。 從入門到放棄的java 初中時自學過JAVA,學了大概一個多月吧, 學了一個多月,看視頻這些,后面放棄了編程。 依稀記得,那段日子極度苦逼,我想如果當時是學javaScrip...
摘要:入門,第一個這是一門很新的語言,年前后正式公布,算起來是比較年輕的編程語言了,更重要的是它是面向程序員的函數式編程語言,它的代碼運行在之上。它通過編輯類工具,帶來了先進的編輯體驗,增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了,總結過去的 2017,相信小伙們一定有很多收獲...
摘要:入門,第一個這是一門很新的語言,年前后正式公布,算起來是比較年輕的編程語言了,更重要的是它是面向程序員的函數式編程語言,它的代碼運行在之上。它通過編輯類工具,帶來了先進的編輯體驗,增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了,總結過去的 2017,相信小伙們一定有很多收獲...
閱讀 630·2023-04-26 01:53
閱讀 2754·2021-11-17 17:00
閱讀 2891·2021-09-04 16:40
閱讀 1992·2021-09-02 15:41
閱讀 839·2019-08-26 11:34
閱讀 1228·2019-08-26 10:16
閱讀 1340·2019-08-23 17:51
閱讀 825·2019-08-23 16:50