TypeScript入门笔记（一）

TypeScript是微软开发的一个JavaScript的超集，个人感觉就是基于Js之上增加更多强类型约束与检查机制，是一个严格模式模式下的严格Js（禁止套娃）。特别是对于熟悉后台开发的同志，很多地方都会触发共鸣（特别是C#开发者，毕竟TypeScript是微软推出的，当然会有亲儿子的影子）。但是在学习TypeScript之前呢，最好要有JavaScript和ES6知识的基础，不然磕磕碰碰的学会打消积极性的。废话少说，开始水博客，这里记录本人学习ts路上的一些笔记，本人主要是根据官方文档和中文官网一篇篇看下来的，中途无意间撞见阮一峰大佬的教程觉得挺不错的，推荐想快速入门的同志们参考。

基本类型

console.log("TypeSrcipt 基本数据类型");
/*
基本数据类型
*/

/* ---------------------------------------------------------------------- */
//0. 布尔值
let isDone: boolean = false;

/* ---------------------------------------------------------------------- */
//1. 数字类型
let age: number = 28;
//二进制表示法：
let binaryLiteral: number = 0b1010;
//八进制表示法：
let octalLiteral: number = 0o732;

/* ---------------------------------------------------------------------- */
//2. 字符串
let fname: string = "Alice";
// 模板字符串
let greet: string = `Hello ,my name is ${fname}, i am ${age} years old`;
console.log("string类型：", greet);

/* ---------------------------------------------------------------------- */
//3. 数组类型
//使用「类型 + 方括号」来表示数组
let list1: number[] = [1, 2, 3, 4, 5];
console.log("数组类型1 :", list1);

//使用数组泛型（Array Generic） Array<elemType> 来表示数组
let list2: Array<string> = ["Alice", "Bob", "John"];
console.log("数组类型2 :", list2);

list1.push(6);  //添加元素
list1.pop();    //弹出元素
console.log("按索引访问：list1[2]：", list1[2])

//用 any 表示数组中允许出现任意类型
let list3: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

/* ---------------------------------------------------------------------- */
//4. 元组类型
//类似C#中的Tuple类型
let card: [string, number];
card = [fname, age];
console.log("元组类型：", card);
console.log("元组可按索引访问 card[0]：", card[0]);
console.log("元组可按索引访问 card[1]：", card[1]);
/*
下面这个写法ts会报错，但是js可以通过并且正常运行
card[3] = 'world';
console.log("元组类型：", card);
*/

//当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：
let tom1: [string, number];
tom1 = ['Tom', 25];
tom1.push('male');
//tom1.push(true);
console.log("元组类型2：", tom1);

/* ----------------------------------------------------------------------- */
//5. 枚举类型
enum Gender {
    Female = 0,
    Male
}
let gender: Gender = Gender.Female;
console.log("枚举类型 gender：", gender);
console.log("gender === 0 :", gender === 0);  //true
console.log(<number>Gender.Female + 1); //1

enum SeatLevel {
    LevelI = "一等座",
    LevelII = "二等座",
    LevelIII = "站票"
}
let myTicket = SeatLevel.LevelIII;
console.log("myTicket === 站票 :", myTicket === "站票");  //true
//console.log("myTicket == 一等座 :", myTicket == "一等座");  //false

/* ----------------------------------------------------------------------- */
//6. Any类型
//Any类型允许赋值为任意类型
let file: any = 123456789;
console.log(file);
file = "Quis labore excepteur aliqua aliquip."
console.log(file);
file = false;
console.log(file);
//在any类型上访问任何属性和任何方法都是允许的
//file.ifItExistProp; // okay, ifItExistProp might exist at runtime
//file.ifItExists();  // okay, ifItExists might exist at runtime
//file.toFixed();     // okay, toFixed exists (but the compiler doesn't check)
let repo: any[] = [1, "Nisi reprehenderit qui irure dolor sunt culpa occaecat.", false];
console.log("any数组类型，repo[1]: ", repo[1]);

//联合类型:表示取值可以为多种类型中的一种
let numberOrString: string | number;
numberOrString = 'seven';
console.log(numberOrString.length); // 5

numberOrString = 7;
//console.log(numberOrString.length); // 编译时报错:Property 'length' does not exist on type 'number'

/* ----------------------------------------------------------------------- */
//7. void类型
function warnUser(): void {
    console.log("This is my warning message");
}
//声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null
let unusable: void = undefined;

/* ----------------------------------------------------------------------- */
/*8. nerver类型：表示的是那些永不存在的值的类型
  never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式的返回值类型
  下面3个函数为常见的返回值类型为never的函数*/
//（1）无法达到的终点的函数返回类型是 never
function infiniteLoop(): never {
    while (true) {
    }
}
//（2）抛出异常的函数也是一种无法到达“终点”的函数，所以返回类型也是 never
function error(message: string): never {
    throw new Error(message);
}
//（3）智能推断的返回值类型为never
function fail() {
    return error("Something failed");
}

/* ----------------------------------------------------------------------- */
/*9. object 类型
    object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
*/
let person: object = {
    fname: fname,
    age: age,
    gender: gender,
    card: card
}
function Greet(p: object | null): void {
    if (p == null) {
        console.log("Hello everyone!");
    }
    // let name = p.fname;
    // let age = p.age;
    // console.log(`Hello ,my name is ${name}, i am ${age} years old`);
};
Greet(null);
Greet(person);
// Greet(fname);  //报错

/* ----------------------------------------------------------------------- */
/*10. 类型断言，类似与其他语言中的强制类型转换 */
let someValue: any = "this is a string";
//写法一：
let strLength: number = (<string>someValue).length;
console.log("strLength：", strLength);
//写法二：用as
strLength = (someValue as string).length;
console.log("strLength：", strLength);

TypeSrcipt 函数

/*------------------------------1.函数声明----------------------------------*/
//1.1 为函数定义类型
function add(x: number, y: number): number {
    return x + y;
}
let myAdd = function (x: number, y: number): number {
    return x + y;
}
let myAddFunc = (x: number, y: number): number => x + y;

let [x, y] = [1, 2];
console.log(`add : ${x} + ${y} = `, add(x, y));
console.log(`myAdd: ${x} + ${y} = `, myAdd(x, y));
console.log(`myAddFunc: ${x} + ${y} = `, myAddFunc(x, y));

//1.2 书写完整函数类型
let myCompleteAddFunc: (baseValue: number, increment: number) => number
    = function (x: number, y: number): number {
        return x + y;
    }
console.log(`myCompleteAddFunc: ${x} + ${y} = `, myCompleteAddFunc(x, y));
/*--------------------------------------------------------------------------*/

/*------------------------------2.可选参数-----------------------------------*/
function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
let result1 = buildName("Bob");
let result2 = buildName("Bob", "Adams");
/*--------------------------------------------------------------------------*/

/*------------------------------3.默认参数-----------------------------------*/
function buildName2(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}
let result3 = buildName("Bob");
let result4 = buildName("Bob", undefined);
let result5 = buildName("Bob", "Adams");
/*--------------------------------------------------------------------------*/

/*------------------------------4.剩余参数-----------------------------------*/
function AddMany(...numbers: number[]) {
    let sum = 0;
    for (let index = 0; index < numbers.length; index++) {
        sum += numbers[index];
    }
    return sum;
}
let [w, z] = [3, 4];
console.log(`AddMany ${x}+${y}+${w}+${z} = `, AddMany(x, y, z, w));
/*--------------------------------------------------------------------------*/

/*------------------------------5.箭头函数-----------------------------------*/
// 注意：箭头函数能保存函数创建时的 this值，而不是调用时的值
let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],   //[红，黑，草，方]
    cards: Array(52),   // 不带大小王的哦
    createCardPicker: function () {
        // 在使用箭头函数后，下面的这个this指代的就是deck这个对象了
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
        }
    }
}
let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
console.log("你拿到的牌是: " + pickedCard.card + " of " + pickedCard.suit);
/*--------------------------------------------------------------------------*/

/*------------------------------6.函数重载----------------------------------*/
let suits = ["hearts", "spades", "clubs", "diamonds"];
//重载的话先把可能遇到的参数类型先一一列举出，再用最后一个使用any参数的函数囊括各个情况，具体实现每种参数情况下的处理方式
function pickCard(x: { suit: string; card: number; }[]): number;
function pickCard(x: number): { suit: string; card: number; };
function pickCard(x: any): any {
    // 如果传入的是一个对象或者数组，也就是用户传进来的就是几张牌，这样的话我们就从中抽一张
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    }
    // 传入的是一个数组的话，就根据这个数抽一张牌
    else if (typeof x == "number") {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}
let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
let pickedCard1 = myDeck[pickCard(myDeck)];
console.log("你拿到的牌是: " + pickedCard1.card + " of " + pickedCard1.suit);

let pickedCard2 = pickCard(18);
console.log("你拿到的牌是: " + pickedCard2.card + " of " + pickedCard2.suit);
/*--------------------------------------------------------------------------*/

TypeSrcipt 类

console.log("------------------------------------------------");
console.log("TypeSrcipt 类");

/*传统js中没有class的概念，从ES6引入*/
/*---------------------------------1.类------------------------------------*/
//1.1 定义一个类
//tips: 在ts中，类中变量和方法的默认访问修饰符是public
class Person {
    //局部变量
    protected readonly name: string;
    protected readonly age: number;
    private phone: string = "138555555555";
    private address: string = "221B Baker St";

    //构造函数
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    /* 上面的简化写法：在一个地方定义并初始化一个成员
        constructor(readonly name: string,readonly age: number) {
        }
    */

    //存取器（属性）
    get contact(): string {
        return `${this.phone}—${this.address}`;
    }
    set contact(newVal: string) {
        if (newVal && newVal.includes("—")) {
            [this.phone, this.address] = newVal.split("—");
        }
        else {
            console.log("Incorrect format");
        }
    }
    //方法
    greet() {
        console.log(`Hi, i am ${this.name}`);
    }
}
//1.2 创建一个类的实体
let sherlock = new Person("sherlock", 24);
sherlock.greet();       //Hi, i am sherlock
//读属性
console.log(sherlock.contact);      //138555555555—221B Baker St
//写属性   
sherlock.contact = "13966666666—211B Baker St"
//再读新属性
console.log(sherlock.contact);      //13966666666—211B Baker St
/*--------------------------------------------------------------------------*/

/*---------------------------------2.继承------------------------------------*/
//2.1 继承类的关键字：extends
class Doctor extends Person {
    diagnose() {
        console.log(`diagnose illness...`)
    }
}

//如果子类也有自己的构造函数，那么还必须要调用父类的构造函数，写法就是super()
class Teacher extends Person {
    private school: string;
    constructor(name: string, age: number, school: string) {
        super(name, age);
        this.school = school;
    }
    teach() {
        console.log(`teach at ${this.school} ...`);
    }
}

//2.2 创建子类
let Alice = new Doctor("Alice", 28);
Alice.greet();      //Hi, i am Alice
Alice.diagnose();   //diagnose illness...

let Howard: Teacher = new Teacher("Howard", 35, "Kw HighSchool");
Howard.greet();     //Hi, i am Howard
Howard.teach();     //teach at Kw HighSchool ...
/*--------------------------------------------------------------------------*/

/*-------------------------------3.抽象类------------------------------------*/
//给其他类来继承的，不能创建一个抽象类的实例
abstract class Animal {
    abstract makeSound(): void;     //抽象类的抽象方法我们不需要实现，关键字：abstract

    move(): void {
        console.log('roaming the earch...');
    }
}
//定义抽象类的派生类
class Dog extends Animal {
    makeSound(): void {
        console.log('wong wong wong...');
    }

    eat(): void {
        console.log('happiness...')
    }
}

let xiaobai: Animal;    // 允许创建一个对抽象类型的引用
xiaobai = new Dog();    // 允许对一个抽象子类进行实例化和赋值
xiaobai.makeSound();    // wong wong wong...
//xiaobai.eat();        // Error ：因为声明的是Animal类型，Dog类的方法无法调用到

TypeSrcipt 接口

console.log("------------------------------------------------");
console.log("TypeSrcipt 接口");
//接口作用的简单总结：定义契约

/*-------------------------------1.接口的作用----------------------------------*/
//TypeScript中接口与C#中有一点不一样，TypeScript中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。
interface LabelledValue {
    label: string;
}

//用接口进行“约束”的对象，其字段不能多一个也不能少一个
let obj: LabelledValue = {
    label: 'myObj',
    //NO: 1002    //报错
}

function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);
/*---------------------------------------------------------------------------*/

/*-------------------------------2.可选参数------------------------------------*/
interface SquareConfig {
    color?: string;     //加上 ？ 就表示参数是可选的了
    width?: number;
}

let squareValue: SquareConfig = {
     10
    //width2: 20    //但是新属性还是不行的
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    let newSquare = { color: "white", area: 100 };
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({ color: "black" });
/*---------------------------------------------------------------------------*/

/*-------------------------------3.任意属性------------------------------------*/
//接口允许有一个任意的属性
//需要注意的是：一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集
interface Dop {
    name: string;
    age?: number;
    [prop: string]: any;    //我们定义的任意类型是any类型，name和age的类型都是any的子集，所以编译通过，当然这里也可以使用联合类型来定义“stirng | number”
}
let tom: Dop = {
    name: 'Tom',
    gender: 'male'
};
let jerry: Dop = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
/*---------------------------------------------------------------------------*/

/*----------------------------4.函数类型的接口---------------------------------*/
/* 刚刚上面使用接口去约束了参数的形式，接口也可以约束函数的形式
*/

interface SearchFunc {
    (source: string, subString: string): boolean;
}

/* 
① 参数名称不是强制一样的，只要参数类型相同即可
② 实现接口的方法，如果不指定参数类型，TypeScript的类型系统会推断出参数类型
*/
let mySearch: SearchFunc;
mySearch = function (src, sub) {
    let result = src.search(sub);
    return result > -1;
}
/*---------------------------------------------------------------------------*/

/*----------------------------5.可索引类型接口----------------------------------*/
interface IArray {
    [index: number]: string
}
//这种方式也可以来定义一个数组，但是单纯定义一个数组时我们不会这么定义，太复杂了
var myArr: IArray = ["jack", "john", "jim"];

interface IObj {
    [index: string]: string
}

var myObject: IObj = { name: "jack", email: "123@126.com" };
/*----------------------------------------------------------------------------*/

/*-------------------------------6.类类型接口----------------------------------*/
//定义一个接口来约束一个英雄该有的内涵，嘿嘿
interface IHero {
    position: heroType;
    level: number;
    heroName: string;
    phrase: string;
    attack(): void;
}
enum heroType {
    warrior,
    wizard,
    archer,
    tank,
    assassin
}
//定义类型实现接口IHero，关键字“implements”
class Hero implements IHero {
    position: heroType;
    level: number;
    heroName: string;
    phrase: string;
    constructor(pos: heroType, lev: number, name: string, phrase: string) {
        this.position = pos;
        this.level = lev;
        this.heroName = name;
        this.phrase = phrase;
    }
    attack(): void {
        console.log(`${this.phrase}!!!`);
    }
}
let yasuo: Hero = new Hero(heroType.warrior, 1, "疾风剑豪", "ha sa ki");
yasuo.attack();
/*---------------------------------------------------------------------------*/