TypeScript極速完全進階指南-1初級篇

HmyBmny 發(fā)布于2019-08-22 16:13 / 2031人閱讀

摘要：簡介比更強大的開源語言，簡稱，親爸是微軟。大彬哥就愛吃剁椒魚頭。接口，范型，命名空間，以及模塊化管理，并講在框架和工作流中的應(yīng)用等更多精彩內(nèi)容歡迎大家觀看我的講座極速完全進階指南

+TypeScript簡介

? 1.比javascript更強大的開源語言，簡稱TS，親爸是微軟。

? 2.官網(wǎng)

? 英文官網(wǎng)：https://www.typescriptlang.org 推薦

? 中文官網(wǎng)：https://www.tslang.cn

? 最新版本2.8，推薦編輯器VSCode

? 3.為什么學它？

? a)錢景不錯

? b)前景不錯

? Egret

? Angular

? c)學它能夠讓我們順帶著學習了ES6&ES7

? d)了解后臺語言，是面試了解一門后臺語言的最佳入口和與后臺協(xié)作更順暢

? e)用熟了大幅度提升工作效率和代碼體驗，用TS真太特么爽了

? 4.難度

? a)學習資料少

? b)使用很多后臺語言概念和思想，如強類型、泛型，接口，枚舉，這都啥B玩意

? c)絕對是好東西，但是需要經(jīng)驗，沒有OOP開發(fā)經(jīng)驗玩不轉(zhuǎn)，java和javascript的雜交串兒

+TypeScript編譯環(huán)境安裝

1.安裝NPM  https://nodejs.org/en/ 使用LTS版本

下面要注意學習，進入正課，敲黑板劃重點。

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 項目設(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




    
    
    
    Document

+TS數(shù)據(jù)類型

js數(shù)據(jù)類型，先玩一把。let ->var,const - >var直接寫var更沒問題,

javascript里面：

usbno,在ts里面依然有，type.ts走起。

弱類型的缺點，新建文檔type2.ts

let number = 12;
number+="5";
//結(jié)果125
現(xiàn)在，直接錯誤提示

ts.config 設(shè)置，noEmitOnError。不輸出

更強的類型檢查

function showAge(age:number){
    return age;
}

console.log(showAge("12"));

好處：1.扼殺錯誤在搖籃之中2.性能棒棒噠

開始說TS顯式定義,

let username:string = "big bin brother";
let age:number = 12;
let isHandsome:boolean = true;
let girlFriend:object = {
    "name":"如花",
    "age":18
};
let arrStudent = ["狗剩","二蛋","三娃","百萬","富貴"];

重點說下數(shù)組,跟js很不一樣。

let arrStudent = ["狗剩","二蛋","三娃","百萬","富貴"];
arrStudent.push(12);

注意強類型不能這樣摻合，只能同類型添加，比如顯式定義數(shù)組里面必須都是string，其它類型就廢了。

let arrStudent2:string[] = ["狗剩","二蛋","三娃","百萬","富貴",666];//只能是string,否則報錯

數(shù)字同理，

let arrAges:number[] = [12,5,8,"99"];

想男女混合雙打咋整，

let mixArray:(number|string)[] = [12,5,8,"99"];

當然還有any類型，這孫子就跟js一樣了，數(shù)據(jù)隨便裝，很不推薦使用。

let arrAges:any[] = [12,5,8,"99"];

下面說一個枚舉，這貨是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");

有兩個好處，因為方向我是用的鍵碼值，比如方向左鍵是37，所以你輸入亂七八糟的類型直接編輯器報錯，

定義只需要寫一個比較簡便，比如你寫星期就不用寫7個，定義星期一就自動往下排。

這里注意，我在函數(shù)中使用了類型限制dir: Direction，

參數(shù)用法跟變量很類似，如下：

沒毛病，

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"));

整個復(fù)雜點的，不過一看就懂，

function showInfo(name:string,age:number){
    return name+"今年, " + age+"歲了";
}

console.log(showInfo("leo",18));

說完了參數(shù)，咱們說說，返回值，跟參數(shù)一樣，唯一要注意的就是void代表無返回值，比如這樣就是錯的。

function showInfo(name:string,age:number):void{
    return name+"今年, " + age+"歲了";//不允許返回
}

因為泛型用的不多，這里講了反而讓大家暈頭轉(zhuǎn)向，所以暫時理解這么多就夠了。下面我說一個TS中99級的神器--類，有了它，媽媽再也不用擔心你的編程了，就因為有了類，隔壁二狗子都找到女朋友了，所以大家一定要學好。

class是啥玩意，為啥用它，class就是一個收納箱，你女朋友要來你家吃飯，你的房間臟亂差，這里一只襪子那里一只破鞋，你買來一堆收納箱，先別說整理，至少你扔進去以后摞起來，起碼看起來看著很工整。

所以class的一個非常顯著的效果就是能夠讓你寫的代碼非常的整潔，當然如果你用的好的話能大幅提高你的開發(fā)效率，沒啥神奇的，你如果收納做的好，你能迅速地找到第幾個箱子的第幾層放著你夏天穿的衣服。

不扯沒用的，先上一梭子代碼再說。

class Person{
    name:string;
    age:number;
    //構(gòu)造函數(shù)，人生下來，年齡就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
}
//1.啥也別說先造個人再說

var dabinge = new Person("大彬哥",18);
console.log(dabinge.age);//18

作為一個有追求老師，大彬哥不能只有年齡和名字，還得有點高大上的追求，比如能吃。大彬哥就愛吃剁椒魚頭。

class Person{
    name:string;
    age:number;
    food:string = "剁椒魚頭";//外面賦值這里賦值一碼事
    //構(gòu)造函數(shù)，人生下來，年齡就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    //favoriteFood 大彬哥就特么愛吃魚
    favoriteFood(){
        return this.food;
    }
}
//1.啥也別說先造個人再說

var dabinge = new Person("大彬哥",18);
console.log(dabinge.favoriteFood());//

我為啥能吃剁椒魚頭呢，因為我?guī)?，當然了一般情況下不能靠刷臉，得靠軟妹幣，你們是不是想知道大彬哥有多少軟妹幣啊，這事兒吧，我自己知道就行了，不像年齡和姓名可以公開（public），而是我的隱私，所以你問我我肯定不告訴你對吧。

class Person{
    name:string;
    age:number;
    food:string = "剁椒魚頭";//外面賦值這里賦值一碼事
    private money:number = 10000000000000;//別激動，肯定不是中國天堂銀行發(fā)行的
    //構(gòu)造函數(shù)，人生下來，年齡就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    //eat 大彬哥就特么愛吃魚
    favoriteFood(){
        return this.food;
    }
}
//1.啥也別說先造個人再說
var dabinge = new Person("大彬哥",18);
//2.想問我多大撩我或者請我吃飯問我愛吃啥我肯定告訴你
console.log(dabinge.age);
console.log(dabinge.favoriteFood());
//3.想問我銀行卡里有多少錢？我肯定不告訴你
console.log(dabinge.money);

但是問題來了，別人不能看，我自己得能往里面存啊，雖然大彬哥不差錢，但是賺錢也得存卡里對吧。

class Person{
    name:string;
    age:number;
    food:string = "剁椒魚頭";//外面賦值這里賦值一碼事
    private money:number = 10000000000000;//別激動，肯定不是中國天堂銀行發(fā)行的
    //構(gòu)造函數(shù)，人生下來，年齡就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    //eat 大彬哥就特么愛吃魚
    favoriteFood(){
        return this.food;
    }
    makeMoney(salary:number):number{
       return  this.money+=salary;
    }
    //我自己被窩偷著樂，數(shù)1后面的0
    touZheLe(){
        return this.money;
    }
}
//1.啥也別說先造個人再說
var dabinge = new Person("大彬哥",18);
//2.想問我多大撩我或者請我吃飯問我愛吃啥我肯定告訴你
console.log(dabinge.age);
console.log(dabinge.favoriteFood());
//3.想問我銀行卡里有多少錢？我肯定不告訴你
// console.log(dabinge.money);
// 大彬哥每個月工資不是很多998
dabinge.makeMoney(998);
//4.我自己在被窩可以偷著看自己余額，通過偷著樂函數(shù)看私有屬性
console.log(dabinge.touZheLe());//10000000000998

那我有這么多錢，數(shù)的我手都沒指紋了也數(shù)不完，萬一哪天我掛了總不能給我燒了吧，咋整，給我兒子一部分唄。我們聊聊繼承的問題。

class Person{
    name:string;
    age:number;
    food:string = "剁椒魚頭";//外面賦值這里賦值一碼事
    private money:number = 10000000000000;//別激動，肯定不是中國天堂銀行發(fā)行的
    //構(gòu)造函數(shù)，人生下來，年齡就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    //eat 大彬哥就特么愛吃魚
    favoriteFood(){
        return this.food;
    }
    makeMoney(salary:number):number{
       return  this.money+=salary;
    }
    //我自己被窩偷著樂，數(shù)1后面的0
    touZheLe(){
        return this.money;
    }
}
//1.啥也別說先造個人再說
var dabinge = new Person("大彬哥",18);
//2.想問我多大撩我或者請我吃飯問我愛吃啥我肯定告訴你
console.log(dabinge.age);
console.log(dabinge.favoriteFood());
//3.想問我銀行卡里有多少錢？我肯定不告訴你
// console.log(dabinge.money);
// 大彬哥每個月工資不是很多998
dabinge.makeMoney(998);
//4.我自己在被窩可以偷著看自己余額，通過偷著樂函數(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);//我兒子錢都到手了

但是我說了，我說了是一部分給我兒子，而不是全部，下面我們將要講關(guān)于大彬哥財產(chǎn)捐獻之慈善基金會和針對不同人分配問題。接口，范型，命名空間，以及模塊化管理，并講ts在框架和工作流中的應(yīng)用等更多精彩內(nèi)容歡迎大家觀看我的SF講座TypeScript極速完全進階指南

GPU云服務(wù)器云服務(wù)器進階篇 webrtc進階信令篇 webrtc進階-信令篇第1篇

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94146.html

發(fā)表評論

登陸后可評論

0條評論

HmyBmny

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow搭建卷積神經(jīng)網(wǎng)絡(luò)

閱讀 709·2023-04-25 18:59
虛擬主機可以做什么-虛擬主機是什么概念？

閱讀 1252·2021-09-22 16:00
如何遠程云主機ip-云主機怎么遠程操作？

閱讀 1915·2021-09-22 15:42
什么叫云主機-云主機是什么？

閱讀 3630·2021-09-22 15:27
css--下拉菜單

閱讀 1274·2019-08-30 15:54
2019年7月所遇知識點整理

閱讀 1136·2019-08-30 11:16
關(guān)于sass、scss、less的概念性知識匯總

閱讀 2475·2019-08-29 16:24
orderBy排序與篩選的例子

閱讀 855·2019-08-29 12:14

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

TypeScript極速完全進階指南-1初級篇

相關(guān)文章

TypeScript極速完全進階指南-2中級篇

TypeScript極速完全入門-3ts結(jié)合react進行項目開發(fā)

SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

發(fā)表評論

0條評論

HmyBmny

男|高級講師

TA的文章

tensorflow搭建卷積神經(jīng)網(wǎng)絡(luò)

虛擬主機可以做什么-虛擬主機是什么概念？

如何遠程云主機ip-云主機怎么遠程操作？

什么叫云主機-云主機是什么？

css--下拉菜單

2019年7月所遇知識點整理

關(guān)于sass、scss、less的概念性知識匯總

orderBy排序與篩選的例子

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

TypeScript極速完全進階指南-1初級篇

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！