TypeScript極速完整進階指南-1低級篇

+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

<!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極速完整進階指南

    原文作者:前端大彬哥
    原文地址: https://segmentfault.com/a/1190000014317765
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞