TypeScript極速徹底進階指南-1初級篇

時間  2019-12-05
標籤 typescript 徹底 進階 指南 初級 简体版
原文   原文鏈接

+TypeScript簡介

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

​ 2.官網html

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

​ 中文官網：https://www.tslang.cnnode

​ 最新版本2.8，推薦編輯器VSCode面試

​ 3.爲何學它？typescript

​ a)錢景不錯npm

​ b)前景不錯編程

​ Egretsegmentfault

​ 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

<!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數據類型

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極速徹底進階指南

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程