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

HmyBmny 發布于2019-08-22 16:13 / 2001人閱讀

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

+TypeScript簡介

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

? 2.官網

? 英文官網：https://www.typescriptlang.org 推薦

? 中文官網：https://www.tslang.cn

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

? 3.為什么學它？

? a)錢景不錯

? b)前景不錯

? Egret

? Angular

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

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

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

? 4.難度

? a)學習資料少

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

? c)絕對是好東西，但是需要經驗，沒有OOP開發經驗玩不轉，java和javascript的雜交串兒

+TypeScript編譯環境安裝

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

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

TS編譯環境安裝：

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

tsc --init

創建second.ts,并編譯

tsc

+TypeScript 編譯文件和輸出配置

打開tsconfig,文件，修改files和outDir

{
  "compilerOptions": {
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true 
  },
  "files":[
    "main.ts"
  ]
}

+跟THML結合輸出

? 推薦使用easyServer,調試，直接上index.html




    
    
    
    Document

+TS數據類型

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

javascript里面：

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

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

let number = 12;
number+="5";
//結果125
現在，直接錯誤提示

ts.config 設置，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 = ["狗剩","二蛋","三娃","百萬","富貴"];

重點說下數組,跟js很不一樣。

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

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

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

數字同理，

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

想男女混合雙打咋整，

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

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

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個，定義星期一就自動往下排。

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

參數用法跟變量很類似，如下：

沒毛病，

function sayHello(person:any) {//any的以意思是輸入參數類型隨意
    return "Hello, " + person;
}

console.log(sayHello("dabinge"));

這樣寫，不是數字就掛了

function showAge(age:number) {
    return "big bin brother今年, " + person+"了";
}

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

整個復雜點的，不過一看就懂，

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

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

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

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

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

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

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

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

class Person{
    name:string;
    age:number;
    //構造函數，人生下來，年齡就定了
    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 = "剁椒魚頭";//外面賦值這里賦值一碼事
    //構造函數，人生下來，年齡就定了
    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());//

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

class Person{
    name:string;
    age:number;
    food:string = "剁椒魚頭";//外面賦值這里賦值一碼事
    private money:number = 10000000000000;//別激動，肯定不是中國天堂銀行發行的
    //構造函數，人生下來，年齡就定了
    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;//別激動，肯定不是中國天堂銀行發行的
    //構造函數，人生下來，年齡就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    //eat 大彬哥就特么愛吃魚
    favoriteFood(){
        return this.food;
    }
    makeMoney(salary:number):number{
       return  this.money+=salary;
    }
    //我自己被窩偷著樂，數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.我自己在被窩可以偷著看自己余額，通過偷著樂函數看私有屬性
console.log(dabinge.touZheLe());//10000000000998

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

class Person{
    name:string;
    age:number;
    food:string = "剁椒魚頭";//外面賦值這里賦值一碼事
    private money:number = 10000000000000;//別激動，肯定不是中國天堂銀行發行的
    //構造函數，人生下來，年齡就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    //eat 大彬哥就特么愛吃魚
    favoriteFood(){
        return this.food;
    }
    makeMoney(salary:number):number{
       return  this.money+=salary;
    }
    //我自己被窩偷著樂，數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.我自己在被窩可以偷著看自己余額，通過偷著樂函數看私有屬性
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);//我兒子錢都到手了

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

云服務器 GPU云服務器進階篇 webrtc進階信令篇 webrtc進階-信令篇第1篇

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

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

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

摘要：抽象類就是只是用來繼承而不是實現的類。這里我解釋清楚沒有為什么會有抽象類。接口就是這么一個玩意，我們看看你劉姨的需求。好，我們繼續那個沉重的話題分割我的財產，上一篇TypeScript極速完全進階指南-1初級篇我兒子確實拿到錢了， class Person{ name:string; age:number; food:string = 剁椒魚頭;//外面賦值這...

rozbo 2019-08-22 16:37 評論0 收藏0
TypeScript極速完全入門-3ts結合react進行項目開發

摘要：前面我們已經說了大部分的核心內容，接下來我們就說說如何用開發實際項目。因為和結合很緊密，資料也很多，而且我會找機會專門說下這方面的知識，所以我們將重點放到如何用結合上來。所以前面打牢基礎，現在我們開始實際組建工作流。前面我們已經說了大部分typescript的核心內容，接下來我們就說說如何用typescript開發實際項目。因為angular和typescript結合很緊密，資料也...

arashicage 2019-08-22 16:45 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

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

caspar 2019-08-15 13:33 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

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

nihao 2019-08-21 18:39 評論0 收藏0