4月份的Typescript總結(jié)?? http://www.lxweimin.com/p/a012c5017ce4 可以配合這篇文章一起學(xué)習(xí)哈～ GitHub代碼筆記?? https://github.com/LanHai1/typescript

1??、Typescript介紹

• Typescript 是由微軟開發(fā)的一款開源的編程語言
• Typescript 是 JavaScript 的超集 遵循最新的ES6、ES5 規(guī)范，Typescript 擴(kuò)展了 JavaScript的語法
• Typescript 更像后端 java、C# 這樣的面向?qū)ο笳Z言 可以讓JavaScript開發(fā)大型企業(yè)項(xiàng)目
• 谷歌也在大力支持 Typescript 的推廣 谷歌的 angular2.x+ 就是基于 Typescript 語法
• 最新的 Vue、React 也開源集成 Typescript

2??、Typescript 安裝 編譯

安裝 sudo npm install -g typescript
編譯 tsc helloworld.ts

3??、Typescript 開發(fā)工具 Vscode 自動編譯.ts 文件 (保存就編譯)

3??、1?? 生成 tsconfig.json 配置文件 命令生成tsc --init

修改里面的outDir(取消注釋)

3??、2?? 點(diǎn)擊菜單 終端 => 運(yùn)行任務(wù) => tsc: 監(jiān)視 - tsconfig.json

即可實(shí)時(shí)將Typescript文件編譯成瀏覽器可運(yùn)行的JavaScript文件

4??、Typescript 數(shù)據(jù)類型

4??、1?? 布爾類型(boolean)

let bool: boolean = true
bool = false
console.log(bool); // false

4??、2?? 數(shù)字類型

let num: number = 1
num += 10
console.log(num); // 11

4??、3?? 字符串類型

let str: string = "hello ts"
str += "!"
console.log(str); // hello ts!

4??、4?? 數(shù)組類型

4??、4??、1?? 規(guī)定統(tǒng)一數(shù)組中元素的數(shù)據(jù)類型

let arr1: number[] = [2, 1]
console.log(arr1);

4??、4??、2?? 元組類型 屬于數(shù)組類型的一種

• 規(guī)定數(shù)組中所有的元素統(tǒng)一類型

let arr2: Array<string> = ["hehe", "heh", "hehh"]
console.log(arr2);

• 規(guī)定數(shù)組中每個(gè)元素的數(shù)據(jù)類型

let arr3: [number, string, number] = [1, "2", 3]
console.log(arr3);

4??、4??、3?? 三、數(shù)組中的元素可以是任意數(shù)據(jù)類型

let arr4: any[] = [2, 3, "ss"]
console.log(arr4);

4??、5?? 枚舉類型

// 規(guī)定一組特殊表達(dá)某個(gè)意義的詞匯 如數(shù)字狀態(tài)碼
/**
 * success 成功 對應(yīng) 1 
 * errpr 失敗 對應(yīng) 2 
 * ...
 */
// 后面的標(biāo)示符沒有給值會默認(rèn)根據(jù)前面的標(biāo)示符( <= number)生成對應(yīng)的值(遞增)
// 注意 如果前面的標(biāo)示符是字符串 后面的標(biāo)示符必須賦值！！！
enum Flag { success = 1, error }
let s: Flag = Flag.success
console.log(s); // 1
let e: Flag = Flag.error
console.log(e); // 2
// 如果標(biāo)識符沒有給值 默認(rèn)是下標(biāo)
enum Color { red, yellow, blue, hotpink }
let { red, yellow, hotpink } = Color
console.log(red, yellow, hotpink); // 0 1 3 

4??、6?? 任意類型

// 可以賦值任意類型的數(shù)據(jù)
// 用途 如獲取DOM元素后為這個(gè)DOM元素設(shè)置樣式 
let isTs: any = 1
isTs = "is typescript"
console.log(isTs); // is typescript

4??、7?? null 和 undefined

let n: null
n = null
console.log(n); // null
let u: undefined
u = undefined
console.log(u); // undefined

4??、8?? 混合數(shù)據(jù)類型

// 設(shè)置一個(gè)變量可能是undefined 可能是number 
let numUndefind: number | undefined
console.log(numUndefind); // undefined
numUndefind = 1
console.log(numUndefind); // 1

4??、9?? void類型

• 表示沒有任何類型 一般用在定義方法的時(shí)候沒有返回值

let myFn = (): void => { }

• 函數(shù)定義返回值

let myFn1 = (): number => {
    return 1
}
let myFn2 = (): string => {
    return "myFn2"
}

5??、Typescript 函數(shù)

5??、1?? 函數(shù)的定義

• 規(guī)定形參的類型和函數(shù)返回值的類型

let fnInfo = (nickname: string, age: number): string => {
    return `${nickname} -- ${age}`
}
console.log(fnInfo("lanhai", 11)) // lanhai -- 11

5??、2?? 可選參數(shù)

• 形參后面加問號即可 默認(rèn)是必傳
• 可選參數(shù)必須設(shè)置在形參最后面 不能前面是可傳 后面是必傳

?(nickname?:string,age:number) 
?(nickname:string,age?:number)

let fnInfo1 = (nickname: string, age?: number): string => {
    return age ? `${nickname} -- ${age}` : `${nickname} -- 年齡保密`
}
console.log(fnInfo1("lanhai", 11))
console.log(fnInfo1("lanhai"))

5??、3?? 默認(rèn)參數(shù)

• 形參后面加等號跟上默認(rèn)值即可
• 參數(shù)不能同時(shí)是默認(rèn)參數(shù)或者是可選參數(shù) 默認(rèn)參數(shù)也必須寫在形參中的最后面
• 如果默認(rèn)參數(shù)傳遞了值 那這個(gè)默認(rèn)參數(shù)的值以傳遞過來的值為準(zhǔn)
• 相當(dāng)于es5中的 a = a || 20

let fnInfo2 = (nickname: string, age: number = 10): string => {
    return `${nickname} -- ${age}`
}
console.log(fnInfo2("hai!"));

5??、4?? 剩余參數(shù)

• 通過三點(diǎn)運(yùn)算符 接收傳遞過來的值 賦給對應(yīng)的數(shù)組
• 相當(dāng)于es5中的 arguments

let fnSum = (...res: Array<number>) => {
    let sum: number = 0;
    res.forEach(val => {
        sum += val
    });
    return sum
}
console.log(fnSum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)) // 50

5??、5?? 函數(shù)的重載

• java中的重載 是指兩個(gè)以上同名函數(shù) 但它們的參數(shù)不一樣 這時(shí)就會出現(xiàn)函數(shù)重載的情況
• typescript中的重載 “同樣的函數(shù)傳遞‘不同類型’的參數(shù) 執(zhí)行不同的功能”
• 通過為同一個(gè)函數(shù)提供 形參不同類型來判斷實(shí)現(xiàn)多種功能

function fn(name: string, sex: string, love: string): string;
function fn(age: number): string;
function fn(str: any, ...res: Array<any>): any {
    return typeof str === "string" ? `我叫${str},我是${res[0]}生,我愛好${res[1]}` : `我${str}歲了`
}
console.log(fn("lanhai", "男", "編程"))

function fn1(name: string, sex: string): string;
function fn1(age: number): string;
function fn1(str: any, sex?: string): any {
    return typeof str === "string" ? `我叫${str},我是${sex}生` : `我${str}歲了`
}
console.log(fn1("lanhai1", "男"))

6??、Typescript 類

6??、1?? 回顧 es5繼承

function Person(this: any, nickname: string) {
    this.nickname = nickname
    this.sex = "男"
    this.run = () => {
        console.log(this.nickname + "跑步")
    }
}
Person.prototype.sayHi = () => {
    console.log(`你好`)
}
let per = new Person("jack")
per.run()
per.sayHi()

function Son(this: any, nickname: string) {
    Person.call(this, nickname)
    for (var variable in Person.prototype) {
        Son.prototype[variable] = Person.prototype[variable]
    }
}

let son = new Son("jack")
son.run()
son.sayHi()

6??、2?? 聲明類

• constructor 構(gòu)造器 實(shí)例化對象的時(shí)候就會觸發(fā)這個(gè)方法 把傳遞過來的值設(shè)置給類里面的屬性
• 代碼分析

class Person {
    nickName: string
    // 構(gòu)造器 實(shí)例化對象的時(shí)候就會觸發(fā)這個(gè)方法 把傳遞過來的值設(shè)置給類里面的屬性
    constructor(name: string) {
        this.nickName = name
    }
    getInfo(): string {
        return `我叫${this.nickName}`
    }
    // 可以通過方法設(shè)置類里面屬性的值
    setInfo(name: string): void {
        this.nickName = name
    }
}
let per = new Person("藍(lán)海")
per.setInfo("jeck")
console.log(per.getInfo())

6??、3?? 類的繼承

• 結(jié)合 extends 和 super 關(guān)鍵字繼承類
  extends 后面跟繼承的父類
super 觸發(fā)父類的構(gòu)造器 傳遞參數(shù)到父類 /* 初始化父類的構(gòu)造函數(shù) */
• 代碼分析

class Student {
    nick: string
    age: number
    constructor(n: string, a: number) {
        this.nick = n
        this.age = a
    }
    run(): void {
        console.log(`${this.nick}在跑步`)
    }
}
let stu = new Student("pink", 18)
stu.run()
console.log(stu.age)
// 結(jié)合 extends 和 super 關(guān)鍵字繼承類
// extends 后面跟繼承的父類
// super 觸發(fā)父類的構(gòu)造器 傳遞參數(shù)到父類 /* 初始化父類的構(gòu)造函數(shù) */
class myStudent extends Student {
    constructor(mNick: string, mAge: number) {
        super(mNick, mAge)
    }
    // 子類獲取屬性和方法的規(guī)律 先從自己的類里面去找 沒有再去繼承的父類里面去找 
    // 類似于es5的構(gòu)造函數(shù) 先從構(gòu)造函數(shù)中找 沒有再去構(gòu)造函數(shù)對應(yīng)的原型對象中找
    // (擴(kuò)展自己的方法) 獲取父類里面的屬性
    run() {
        console.log("myRun" + this.nick)
    }
}
let myStu = new myStudent("莉絲", 13)
myStu.run()
console.log(myStu.age)

6??、4?? 類里面的修飾符

• public
  公有的 在類、子類、類外面都可以訪問
• protected
  保護(hù)類型 在類、子類里面可以訪問，在類外面無法訪問
• private
  私有 在類里面可以訪問，在子類、類外面無法訪問

屬性如果不加修飾符 默認(rèn)就是公有的

• 代碼分析

class Test {
    // 公有的 在類、子類、類外面都可以訪問
    public nickName: string
    // 保護(hù)類型 在類、子類里面可以訪問，在類外面無法訪問
    protected age: number
    // 私有 在類里面可以訪問，在子類、類外面無法訪問
    private sex: string
    // 屬性如果不加修飾符 默認(rèn)就是公有的

    constructor(_name: string, _age: number, _sex: string) {
        this.nickName = _name
        this.age = _age
        this.sex = _sex
    }
}
class Test_ji_chen extends Test {
    constructor(_name: string, _age: number, _sex: string) {
        super(_name, _age, _sex)
    }
    run() {
        console.log(this.nickName); // "jack"
        console.log(this.age); // 18
        // console.log(this.sex); // err 屬性“sex”為私有屬性，只能在類“Test”中訪問。
    }
}
let test = new Test_ji_chen("jack", 18, "男")
console.log(test.nickName); // "jack"
// console.log(test.age); // 屬性“age”受保護(hù)，只能在類“Test”及其子類中訪問。
// console.log(test.sex); // 屬性“sex”為私有屬性，只能在類“Test”中訪問。
test.run()

6??、5?? 靜態(tài)屬性和靜態(tài)方法

• 通過 static 關(guān)鍵字來聲明的屬性和方法 就是靜態(tài)屬性和靜態(tài)方法
• 靜態(tài)屬性必須賦值 靜態(tài)方法中 "只能" 訪問這個(gè)類里面的靜態(tài)屬性 通過類名.靜態(tài)屬性來訪問
• 代碼分析

class staticFn {
    public nickName: string /* 實(shí)例屬性 */
    static myAge: number = 19 /* 靜態(tài)屬性 必須賦值 */
    constructor(name: string) {
        this.nickName = name
    }
    sayHi(): void { /* 實(shí)例方法 */
        console.log(`sayhi,${this.nickName}`)
    }
    static myRun(): void {
        console.log(`我${staticFn.myAge}歲我可以跑步`);
    }
}
let sta = new staticFn("藍(lán)海")
// 實(shí)例屬性
console.log(sta.nickName);
// 實(shí)例方法
sta.sayHi()
// 靜態(tài)屬性
console.log(staticFn.myAge);
// 靜態(tài)方法
staticFn.myRun()

• 靜態(tài)屬性和靜態(tài)方法的用途

如 jquery中
通過 $(el).css()這是實(shí)例方法 $(el)返回了 這個(gè)方法獲取的DOM元素 然后.css()方法設(shè)置樣式
$.ajax() 這是靜態(tài)方法 直接通過 $.出來的方法

6??、6?? 多態(tài)

• 父類定義一個(gè)方法不去實(shí)現(xiàn) 讓繼承的子類去實(shí)現(xiàn) 每個(gè)子類有不同的表現(xiàn)
• 多態(tài)屬于繼承
• 代碼分析

class Animal {
    public nickName: string
    constructor(name: string) {
        this.nickName = name
    }
    eat() {
        console.log(`吃`);
    }
}
class Dog extends Animal {
    constructor(name: string) {
        super(name)
    }
    eat(): string {
        return `小狗${this.nickName}吃骨頭`
    }
}
class Cat extends Animal {
    constructor(name: string) {
        super(name)
    }
    eat(): string {
        return `小貓${this.nickName}吃魚`
    }
}

6??、7?? 抽象類

• 提供其他類繼承的基類 “不能直接被實(shí)例化”
• 使用 abstract關(guān)鍵字來定義抽象類和抽象方法 抽象類中的抽象方法“必須在繼承的子類中實(shí)現(xiàn)”
• abstract抽象方法只能放在抽象類中 抽象類和抽象方法是用來定義標(biāo)準(zhǔn)的，父類要求子類必須實(shí)現(xiàn)某些方法。
• 代碼分析

abstract class AbsAnimal {
    protected nickName: string
    constructor(name: string) {
        this.nickName = name
        // 一些初始化的方法可以在構(gòu)造器中直接實(shí)現(xiàn)
        this.run()
    }
    abstract eat(): void
    run(): void {
        console.log(`${this.nickName}在跑步`);
    }
}
class AbsCat extends AbsAnimal{
    constructor(name:string){
        super(name)
    }
    eat(){
        console.log(`${this.nickName}吃魚`);
    }
}
let abscat = new AbsCat("Tom")
abscat.eat()

7??、Typescript 接口

7??、1?? 接口的作用

• 在面向?qū)ο蟮木幊讨?接口是一種規(guī)范的定義 它定義了行為和動作的規(guī)范
• 在程序設(shè)計(jì)里面 接口起到一種限制和規(guī)范的作用
• 接口定義了某一批類所需要遵守的規(guī)范 接口不關(guān)心這些類的內(nèi)部狀態(tài)數(shù)據(jù) 也不關(guān)心這些類里面的方法的實(shí)現(xiàn)細(xì)節(jié)
• 它只規(guī)定這批類里必須提供某些方法，提供這些方法的類就可以滿足實(shí)際需求
• typescript中的接口類似于Java 同時(shí)還增加了更靈活的接口類型 包括屬性、函數(shù)、可索引和類...

7??、2?? 屬性類型接口

• 對屬性(變量、形參)的數(shù)據(jù)進(jìn)行約束
• 如 規(guī)定一組數(shù)據(jù)設(shè)置類型 設(shè)置給類或函數(shù)中形參的數(shù)據(jù)類型 在使用這個(gè)類或函數(shù)時(shí)必須按照接口的規(guī)定來傳遞數(shù)據(jù)
• 代碼分析

interface FullName {
    firstName: string
    // 接口的可選屬性 加?號即可 可傳可不傳
    secoundName?: string
}
class MyName {
    protected name: FullName
    constructor(name: FullName) {
        this.name = name
    }
    allName(): void {
        console.log(`${this.name.firstName}${this.name.secoundName ? "---" + this.name.secoundName : ""}`);
    }
}
let myname = new MyName({
    firstName: "jack"
})
myname.allName()
let YouName = (name: FullName): void => {
    console.log(`${name.firstName}${name.secoundName ? "/" + name.secoundName : ""}`);
}
YouName({
    firstName: "藍(lán)",
    secoundName: "海"
})

• 案例擴(kuò)展 ajax接口

/**
 * $.ajax({
 *  type:"get",
 *  url:"test.json",
 *  data:{name:"藍(lán)海",age:11},
 *  dataType:"json"
 * })
 */
interface myAjax {
    type: string,
    url: string,
    data?: object,
    dataType: string
}
class $ {
    static ajax(obj: myAjax) {
        // 可以xml小黃人ajax處理請求數(shù)據(jù)
        console.log(obj);
    }
}
$.ajax({
    type: "get",
    url: "test.json",
    data: { name: "藍(lán)海", age: 11 },
    dataType: "json"
})

7??、3?? 函數(shù)類型接口

• 對方法傳入的參數(shù) 以及返回值進(jìn)行約束 可批量約束
• 函數(shù)接口只能用在函數(shù)表達(dá)式上面
• 代碼分析

interface MyFn {
    // 參數(shù)的數(shù)據(jù)類型               // 返回值 的數(shù)據(jù)類型
    (key: string, value: string): string
}
let myFn11: MyFn = (key: string, value: string) => {
    return `${key}:${value}`
}
console.log(myFn11("name", "jack"));
let myFn22: MyFn = function (key: string, value: string) {
    return `${key}---${value}`
}
console.log(myFn22("age", "11"));

7??、4?? 類 類型接口

• 對類的約束 和抽象類有點(diǎn)類似
• 通過關(guān)鍵字 implements 來對類進(jìn)行接口約束
• 代碼分析

interface MyClass {
    // 子類必須實(shí)現(xiàn)這里面的屬性和方法
    nickName: string
    eat(food: string): void
}
class AnimalInterface implements MyClass {
    nickName: string
    constructor(name: string) {
        this.nickName = name
    }
    eat(food: string): void {
        console.log(`${this.nickName} eat ${food} !!`);
    }
}

let myAnimal = new AnimalInterface("貓")
myAnimal.eat("??")

7??、5?? 接口擴(kuò)展

• 接口可以繼承接口
• 接口擴(kuò)展

interface Student1 {
    nickName: string
    sayHi(): void
}
interface StudentMan extends Student1 {
    play(playing: string): void
}
class LanHai implements StudentMan {
    nickName: string
    constructor(name: string) {
        this.nickName = name
    }
    sayHi() {
        console.log(`hi!`);
    }
    play(playing: string) {
        console.log(`i am man ,i play ${playing}`);
    }
}
let lh = new LanHai("蘭海")
lh.sayHi()
lh.play("王者榮耀")

7??、6?? 類的繼承 + 接口擴(kuò)展

• "extends" 子句必須位于 "implements" 子句之前
• 代碼分析

interface Student2 {
    nickName: string
    sayHi(): void
}
// 接口擴(kuò)展
interface StudentMan2 extends Student2 {
    play(playing: string): void
}
// 類實(shí)現(xiàn)接口
class LanHai2 {
    public nickName: string
    constructor(name: string) {
        this.nickName = name
    }
    work(): void {
        console.log(`${this.nickName}-敲代碼`);
    }
}
// 類的繼承
class myLanHai2 extends LanHai2 implements StudentMan2 {
    constructor(name: string) {
        super(name)
    }
    sayHi() {
        console.log("你好");
    }
    play(playing: string) {
        console.log(`我在玩${playing}`);
    }
}
let mylh2 = new myLanHai2("jack")
mylh2.sayHi()
mylh2.work()
mylh2.play("王者榮耀")

8??、XMind筆記