+TypeScript簡(jiǎn)介
? 1.比javascript更強(qiáng)大的開源語(yǔ)言，簡(jiǎn)稱TS，親爸是微軟。
? 2.官網(wǎng)
? 英文官網(wǎng)：https://www.typescriptlang.org 推薦
? 中文官網(wǎng)：https://www.tslang.cn
? 最新版本2.8趣效，推薦編輯器VSCode
? 3.為什么學(xué)它？
? a)錢景不錯(cuò)
? b)前景不錯(cuò)
? Egret
? Angular
? c)學(xué)它能夠讓我們順帶著學(xué)習(xí)了ES6&ES7
? d)了解后臺(tái)語(yǔ)言猪贪，是面試了解一門后臺(tái)語(yǔ)言的最佳入口和與后臺(tái)協(xié)作更順暢
? e)用熟了大幅度提升工作效率和代碼體驗(yàn)跷敬，用TS真太特么爽了
? 4.難度
? a)學(xué)習(xí)資料少
? b)使用很多后臺(tái)語(yǔ)言概念和思想，如強(qiáng)類型热押、泛型干花，接口，枚舉楞黄，這都啥B玩意
? c)絕對(duì)是好東西池凄，但是需要經(jīng)驗(yàn)，沒(méi)有OOP開發(fā)經(jīng)驗(yàn)玩不轉(zhuǎn)鬼廓，java和javascript的雜交串兒
+TypeScript編譯環(huán)境安裝
1.安裝NPM https://nodejs.org/en/ 使用LTS版本
下面要注意學(xué)習(xí)肿仑，進(jìn)入正課，敲黑板劃重點(diǎn)碎税。
TS編譯環(huán)境安裝：
2.npm install -g typescript
寫helloworld.ts
//3.寫helloworld.ts
function greeter(person) {
return "Hello, " + person;
}
let user = "big bin brother";
編譯尤慰，命令行
tsc helloworld.ts
TypeScript 項(xiàng)目設(shè)置
tsc --init
創(chuàng)建second.ts,并編譯
tsc
+TypeScript 編譯文件和輸出配置
打開tsconfig,文件，修改files和outDir
{
"compilerOptions": {
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"files":[
"main.ts"
]
}
+跟THML結(jié)合輸出
? 推薦使用easyServer,調(diào)試雷蹂，直接上index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="dist/app.js"></script>
</body>
</html>
+TS數(shù)據(jù)類型
js數(shù)據(jù)類型伟端，先玩一把。let ->var,const - >var直接寫var更沒(méi)問(wèn)題,
javascript里面：
usbno,在ts里面依然有匪煌，type.ts走起责蝠。
弱類型的缺點(diǎn)党巾，新建文檔type2.ts
let number = 12;
number+='5';
//結(jié)果125
現(xiàn)在，直接錯(cuò)誤提示
ts.config 設(shè)置霜医，noEmitOnError齿拂。不輸出
更強(qiáng)的類型檢查
function showAge(age:number){
return age;
}
console.log(showAge('12'));
好處：1.扼殺錯(cuò)誤在搖籃之中2.性能棒棒噠
開始說(shuō)TS顯式定義,
let username:string = "big bin brother";
let age:number = 12;
let isHandsome:boolean = true;
let girlFriend:object = {
"name":"如花",
"age":18
};
let arrStudent = ["狗剩","二蛋","三娃","百萬(wàn)","富貴"];
重點(diǎn)說(shuō)下數(shù)組,跟js很不一樣。
let arrStudent = ["狗剩","二蛋","三娃","百萬(wàn)","富貴"];
arrStudent.push(12);
注意強(qiáng)類型不能這樣摻合肴敛，只能同類型添加署海，比如顯式定義數(shù)組里面必須都是string，其它類型就廢了医男。
let arrStudent2:string[] = ["狗剩","二蛋","三娃","百萬(wàn)","富貴",666];//只能是string,否則報(bào)錯(cuò)
數(shù)字同理砸狞，
let arrAges:number[] = [12,5,8,'99'];
想男女混合雙打咋整，
let mixArray:(number|string)[] = [12,5,8,'99'];
當(dāng)然還有any類型镀梭，這孫子就跟js一樣了刀森，數(shù)據(jù)隨便裝，很不推薦使用丰辣。
let arrAges:any[] = [12,5,8,'99'];
下面說(shuō)一個(gè)枚舉，這貨是TS的東西禽捆，ES6和js都么有笙什，這貨有啥用？
enum Direction {
Up = 38,
Down,
Left,
Right,
}
//生肖胚想，撲克牌琐凭，麻將
function play(dir: Direction){
// ...
if(dir==38){
console.log('向下按了');
}else{
console.log(dir);
}
}
//play(38);
play('fdasfas');
有兩個(gè)好處，因?yàn)榉较蛭沂怯玫逆I碼值浊服，比如方向左鍵是37统屈，所以你輸入亂七八糟的類型直接編輯器報(bào)錯(cuò)，
定義只需要寫一個(gè)比較簡(jiǎn)便牙躺，比如你寫星期就不用寫7個(gè)愁憔，定義星期一就自動(dòng)往下排。
這里注意孽拷，我在函數(shù)中使用了類型限制dir: Direction吨掌，
參數(shù)用法跟變量很類似，如下：
沒(méi)毛病脓恕，
function sayHello(person:any) {//any的以意思是輸入?yún)?shù)類型隨意
return "Hello, " + person;
}
console.log(sayHello('dabinge'));
這樣寫膜宋，不是數(shù)字就掛了
function showAge(age:number) {
return "big bin brother今年, " + person+"了";
}
console.log(showAge('18'));
整個(gè)復(fù)雜點(diǎn)的，不過(guò)一看就懂炼幔，
function showInfo(name:string,age:number){
return name+"今年, " + age+'歲了';
}
console.log(showInfo('leo',18));
說(shuō)完了參數(shù)秋茫，咱們說(shuō)說(shuō)，返回值乃秀，跟參數(shù)一樣肛著，唯一要注意的就是void代表無(wú)返回值圆兵，比如這樣就是錯(cuò)的。
function showInfo(name:string,age:number):void{
return name+"今年, " + age+'歲了';//不允許返回
}
因?yàn)榉盒陀玫牟欢嗖咂@里講了反而讓大家暈頭轉(zhuǎn)向衙傀，所以暫時(shí)理解這么多就夠了。下面我說(shuō)一個(gè)TS中99級(jí)的神器--類萨咕，有了它统抬，媽媽再也不用擔(dān)心你的編程了胎食，就因?yàn)橛辛祟愊胖舯诙纷佣颊业脚笥蚜耍源蠹乙欢ㄒ獙W(xué)好甚疟。
class是啥玩意茫陆，為啥用它金麸，class就是一個(gè)收納箱，你女朋友要來(lái)你家吃飯簿盅，你的房間臟亂差 挥下，這里一只襪子那里一只破鞋，你買來(lái)一堆收納箱桨醋，先別說(shuō)整理棚瘟，至少你扔進(jìn)去以后摞起來(lái)，起碼看起來(lái)看著很工整喜最。
所以class的一個(gè)非常顯著的效果就是能夠讓你寫的代碼非常的整潔偎蘸，當(dāng)然如果你用的好的話能大幅提高你的開發(fā)效率，沒(méi)啥神奇的瞬内，你如果收納做的好迷雪，你能迅速地找到第幾個(gè)箱子的第幾層放著你夏天穿的衣服。
不扯沒(méi)用的虫蝶，先上一梭子代碼再說(shuō)章咧。
class Person{
name:string;
age:number;
//構(gòu)造函數(shù)，人生下來(lái)能真，年齡就定了
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
}
//1.啥也別說(shuō)先造個(gè)人再說(shuō)
var dabinge = new Person('大彬哥',18);
console.log(dabinge.age);//18
作為一個(gè)有追求老師慧邮，大彬哥不能只有年齡和名字，還得有點(diǎn)高大上的追求舟陆，比如能吃误澳。大彬哥就愛吃剁椒魚頭。
class Person{
name:string;
age:number;
food:string = "剁椒魚頭";//外面賦值這里賦值一碼事
//構(gòu)造函數(shù)秦躯，人生下來(lái)忆谓，年齡就定了
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
//favoriteFood 大彬哥就特么愛吃魚
favoriteFood(){
return this.food;
}
}
//1.啥也別說(shuō)先造個(gè)人再說(shuō)
var dabinge = new Person('大彬哥',18);
console.log(dabinge.favoriteFood());//
我為啥能吃剁椒魚頭呢，因?yàn)槲規(guī)涻獬校?dāng)然了一般情況下不能靠刷臉倡缠，得靠軟妹幣哨免，你們是不是想知道大彬哥有多少軟妹幣啊，這事兒吧昙沦，我自己知道就行了琢唾，不像年齡和姓名可以公開（public），而是我的隱私盾饮，所以你問(wèn)我我肯定不告訴你對(duì)吧采桃。
class Person{
name:string;
age:number;
food:string = "剁椒魚頭";//外面賦值這里賦值一碼事
private money:number = 10000000000000;//別激動(dòng)，肯定不是中國(guó)天堂銀行發(fā)行的
//構(gòu)造函數(shù)丘损，人生下來(lái)普办，年齡就定了
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
//eat 大彬哥就特么愛吃魚
favoriteFood(){
return this.food;
}
}
//1.啥也別說(shuō)先造個(gè)人再說(shuō)
var dabinge = new Person('大彬哥',18);
//2.想問(wèn)我多大撩我或者請(qǐng)我吃飯問(wèn)我愛吃啥我肯定告訴你
console.log(dabinge.age);
console.log(dabinge.favoriteFood());
//3.想問(wèn)我銀行卡里有多少錢？我肯定不告訴你
console.log(dabinge.money);
但是問(wèn)題來(lái)了徘钥，別人不能看衔蹲，我自己得能往里面存啊，雖然大彬哥不差錢呈础，但是賺錢也得存卡里對(duì)吧舆驶。
class Person{
name:string;
age:number;
food:string = "剁椒魚頭";//外面賦值這里賦值一碼事
private money:number = 10000000000000;//別激動(dòng)，肯定不是中國(guó)天堂銀行發(fā)行的
//構(gòu)造函數(shù)而钞，人生下來(lái)沙廉，年齡就定了
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
//eat 大彬哥就特么愛吃魚
favoriteFood(){
return this.food;
}
makeMoney(salary:number):number{
return this.money+=salary;
}
//我自己被窩偷著樂(lè)，數(shù)1后面的0
touZheLe(){
return this.money;
}
}
//1.啥也別說(shuō)先造個(gè)人再說(shuō)
var dabinge = new Person('大彬哥',18);
//2.想問(wèn)我多大撩我或者請(qǐng)我吃飯問(wèn)我愛吃啥我肯定告訴你
console.log(dabinge.age);
console.log(dabinge.favoriteFood());
//3.想問(wèn)我銀行卡里有多少錢笨忌？我肯定不告訴你
// console.log(dabinge.money);
// 大彬哥每個(gè)月工資不是很多998
dabinge.makeMoney(998);
//4.我自己在被窩可以偷著看自己余額蓝仲，通過(guò)偷著樂(lè)函數(shù)看私有屬性
console.log(dabinge.touZheLe());//10000000000998
那我有這么多錢俱病，數(shù)的我手都沒(méi)指紋了也數(shù)不完官疲，萬(wàn)一哪天我掛了總不能給我燒了吧，咋整亮隙，給我兒子一部分唄途凫。我們聊聊繼承的問(wèn)題。
class Person{
name:string;
age:number;
food:string = "剁椒魚頭";//外面賦值這里賦值一碼事
private money:number = 10000000000000;//別激動(dòng)溢吻，肯定不是中國(guó)天堂銀行發(fā)行的
//構(gòu)造函數(shù)维费，人生下來(lái)，年齡就定了
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
//eat 大彬哥就特么愛吃魚
favoriteFood(){
return this.food;
}
makeMoney(salary:number):number{
return this.money+=salary;
}
//我自己被窩偷著樂(lè)促王，數(shù)1后面的0
touZheLe(){
return this.money;
}
}
//1.啥也別說(shuō)先造個(gè)人再說(shuō)
var dabinge = new Person('大彬哥',18);
//2.想問(wèn)我多大撩我或者請(qǐng)我吃飯問(wèn)我愛吃啥我肯定告訴你
console.log(dabinge.age);
console.log(dabinge.favoriteFood());
//3.想問(wèn)我銀行卡里有多少錢犀盟？我肯定不告訴你
// console.log(dabinge.money);
// 大彬哥每個(gè)月工資不是很多998
dabinge.makeMoney(998);
//4.我自己在被窩可以偷著看自己余額，通過(guò)偷著樂(lè)函數(shù)看私有屬性
console.log(dabinge.touZheLe());//10000000000998
class bingeSons extends Person{
isHandsome:boolean = true;
constructor(name:string,age:number){
super(name,age);//都是我的老底兒蝇狼，姓名年齡cls
}
}
let binSon = new bingeSons('彬哥2.0',18);
console.log(binSon.food);//我兒子錢都到手了
但是我說(shuō)了阅畴，我說(shuō)了是一部分給我兒子，而不是全部迅耘，下一期我們將要講關(guān)于大彬哥財(cái)產(chǎn)捐獻(xiàn)之慈善基金會(huì)和針對(duì)不同人分配問(wèn)題贱枣。在下次教程中我將重點(diǎn)講述接口监署，范型，命名空間纽哥，以及模塊化管理钠乏，并講ts在框架和工作流中的應(yīng)用。敬請(qǐng)期待春塌。
