TypeScript（TS）基础学习

TS 基础

	// 布尔值
    let isDone: boolean = false;
    let createdByNewBoolean: Boolean = new Boolean(1);
    let createdByBoolean: boolean = Boolean(1);
    console.log(isDone)
    console.log(createdByNewBoolean)
    console.log(createdByBoolean)

    // 数值
    let decLiteral: number = 6;
    let hexLiteral: number = 0xf00d;
    // ES6 中的二进制表示法
    let binaryLiteral: number = 0b1010;
    // ES6 中的八进制表示法
    let octalLiteral: number = 0o744;
    let notANumber: number = NaN;
    let infinityNumber: number = Infinity;
    console.log([decLiteral,hexLiteral,binaryLiteral,octalLiteral,notANumber,infinityNumber])

    // 字符串
    let myName: string = 'Tom';
    let myAge: number = 25;
    // 模板字符串
    let sentence: string = `Hello, my name is ${myName}.
    I'll be ${myAge + 1} years old next month.`;
    console.log(sentence)

    // 空值
    function alertName(): void {
        alert('My name is Tom');
    }

    // Null 和 Undefined
    let u: undefined = undefined;
    let n: null = null;
    // 这样不会报错
    let num: number = undefined;  

    // 任意值
    let myFavoriteNumber: any = 'string';
    myFavoriteNumber = 7
    console.log(myFavoriteNumber)

    // 类型推断
    let myFavoriteString = 'seven';
    myFavoriteString = 7;

    // 联合类型
    let myFavoriteNumber1: string | number;
    myFavoriteNumber1 = 'seven';
    myFavoriteNumber1 = 7;

    // 对象的类型——接口
    interface Person {
        name: string;
        age: number;
    }
    let tom: Person = {
        name: 'Tom',
        age: 25
    };
    console.log(tom)
    // 可选属性
    interface Person1 {
      name: string;
      age?: number;
    }
    let tom1: Person1 = {
        name: 'Tom'
    };
    console.log(tom1)
    // 任意属性 使用 [propName: string] 定义了任意属性取 string 类型的值。
    interface Person2 {
        name: string;
        age?: number;
        [propName: string]: any;
    }
    let tom2: Person2 = {
        name: 'Tom',
        gender: 'male'
    };
    interface Person3 {
        name: string;
        age?: number;
        [propName: string]: string;
    }
    let tom3: Person3 = {
        name: 'Tom',
        age: 25,
        gender: 'male'
    };
    console.log(tom3)

    // 数组的类型
    let fibonacci: number[] = [1, 1, 2, 3, 5];

    // 数组泛型
    let fibonacci1: Array<number> = [1, 1, 2, 3, 5];

    // 用接口表示数组
    interface NumberArray {
        [index: number]: number;
    }
    let fibonacci2: NumberArray = [1, 1, 2, 3, 5];
    console.log(fibonacci2)

    // 类数组,类数组（Array-like Object）不是数组类型，比如 arguments,实际上是一个类数组，不能用普通的数组的方式来描述，而应该用接口：
    function sum() {
        let args: {
            [index: number]: number;
            length: number;
            callee: Function;
        } = arguments;
    }
    console.log(sum);

    // 其中 IArguments 是 TypeScript 中定义好了的类型，它实际上就是：
    interface IArguments {
        [index: number]: any;
        length: number;
        callee: Function;
    }

    // 函数声明
    function sum(x: number, y: number): number {
        return x + y;
    }

    // 函数表达式
    let mySum = function (x: number, y: number): number {
        return x + y;
    };
    let mySum1: (x: number, y: number) => number = function (x, y) {
        return x + y;
    };
    console.log(mySum1(1,2))

    // 用接口定义函数的形状
    interface SearchFunc {
        (source: string, subString: string): boolean;
    }
    let mySearch: SearchFunc;
    mySearch = function(source: string, subString: string) {
        return source.search(subString) !== -1;
    }

    // 可选参数
    function buildName(firstName: string, lastName?: string) {
        if (lastName) {
            return firstName + ' ' + lastName;
        } else {
            return firstName;
        }
    }
    let tomcat = buildName('Tom', 'Cat');
    let tom4 = buildName('Tom');

    // 剩余参数
    function push(array: any[], ...items: any[]) {
        items.forEach(function(item) {
            array.push(item);
        });
    }
    let a = [];
    push(a, 1, 2, 3);

    // 重载
    function reverse(x: number): number;
    function reverse(x: string): string;
    function reverse(x: number | string): number | string | void {
        if (typeof x === 'number') {
            return Number(x.toString().split('').reverse().join(''));
        } else if (typeof x === 'string') {
            return x.split('').reverse().join('');
        }
    }

    // 类型断言可以用来手动指定一个值的类型。类型断言只能够「欺骗」TypeScript 编译器，
    // 将一个联合类型断言为其中一个类型,可以使用类型断言，将 animal 断言成 Fish：
    interface Cat {
        name: string;
        run(): void;
    }
    interface Fish {
        name: string;
        swim(): void;
    }
    function isFish(animal: Cat | Fish) {
        // 这里没有类型断言会报错； 
        if (typeof (animal as Fish).swim === 'function') {
            return true;
        }
        return false;
    }

    // 将一个父类断言为更加具体的子类，当类之间有继承关系时，类型断言也是很常见的：
    class ApiError extends Error {
        code: number = 0;
    }
    class HttpError extends Error {
        statusCode: number = 200;
    }
    function isApiError(error: Error) {
        if (typeof (error as ApiError).code === 'number') {
            return true;
        }
        return false;
    }

    // 新语法索引
    /**
      declare var 声明全局变量
      declare function 声明全局方法
      declare class 声明全局类
      declare enum 声明全局枚举类型
      declare namespace 声明（含有子属性的）全局对象
      interface 和 type 声明全局类型
      export 导出变量
      export namespace 导出（含有子属性的）对象
      export default ES6 默认导出
      export = commonjs 导出模块
      export as namespace UMD 库声明全局变量
      declare global 扩展全局变量
      declare module 扩展模块
      /// <reference /> 三斜线指令
    */
   
    // 什么是声明语句, ts 中，编译器并不知道 $ 或 jQuery 是什么东西,我们需要使用 declare var 来定义它的类型
    // declare var jQuery: (selector: string) => any;
    // jQuery('#foo');

    // 什么是声明文件：声明文件必需以 .d.ts 为后缀

    // ECMAScript 标准提供的内置对象有：Boolean、Error、Date、RegExp 等。

    // DOM 和 BOM 提供的内置对象有：Document、HTMLElement、Event、NodeList 等。

    // 类型别名：type 创建类型别名
    type Name = string;
    type NameResolver = () => string;
    type NameOrResolver = Name | NameResolver;
    function getName(n: NameOrResolver): Name {
        if (typeof n === 'string') {
            return n;
        } else {
            return n();
        }
    }

    // 字符串字面量类型
    type EventNames = 'click' | 'scroll' | 'mousemove';
    function handleEvent(ele: Element, event: EventNames) {
        // do something
    }

    handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
    handleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'

    // 元组，定义一对值分别为 string 和 number 的元组：
    let tom5: [string, number] = ['Tom', 25];

    // 枚举使用 enum 关键字来定义：
    enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

    // 类的概念§

    /**
      类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
      对象（Object）：类的实例，通过 new 生成
      面向对象（OOP）的三大特性：封装、继承、多态
      封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
      继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
      多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
      存取器（getter & setter）：用以改变属性的读取和赋值行为
      修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
      抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
      接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口
     */

    
    // TypeScript 中类的用法：public private 和 protected、readonly

    // 抽象类：abstract 用于定义抽象类和其中的抽象方法。
    abstract class Animal {
      public name;
      public constructor(name) {
        this.name = name;
      }
      public abstract sayHi();
    }
    class Cat extends Animal {
      public sayHi() {
        console.log(`Meow, My name is ${this.name}`);
      }
    }
    let cat = new Cat('Tom');
    
    // 类实现接口，一个类可以实现多个接口：
    interface Alarm {
        alert(): void;
    }
    interface Light {
        lightOn(): void;
        lightOff(): void;
    }
    class Car implements Alarm, Light {
        alert() {
            console.log('Car alert');
        }
        lightOn() {
            console.log('Car light on');
        }
        lightOff() {
            console.log('Car light off');
        }
    }

    // 接口继承接口
    interface Alarm {
        alert(): void;
    }
    interface LightableAlarm extends Alarm {
        lightOn(): void;
        lightOff(): void;
    } 

    // 接口继承类
    class Point {
        x: number;
        y: number;
        constructor(x: number, y: number) {
            this.x = x;
            this.y = y;
        }
    }
    interface Point3d extends Point {
        z: number;
    }
    let point3d: Point3d = {x: 1, y: 2, z: 3};

    // 泛型 是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
    function createArray<T>(length: number, value: T): Array<T> {
        let result: T[] = [];
        for (let i = 0; i < length; i++) {
            result[i] = value;
        }
        return result;
    }
    createArray<string>(3, 'x'); // ['x', 'x', 'x']

    // 定义泛型的时候，可以一次定义多个类型参数：
    function swap<T, U>(tuple: [T, U]): [U, T] {
        return [tuple[1], tuple[0]];
    }
    swap([7, 'seven']); // ['seven', 7]

    // 泛型接口
    interface SearchFunc {
      (source: string, subString: string): boolean;
    }
    let mySearch2: SearchFunc;
    mySearch2 = function(source: string, subString: string) {
        return source.search(subString) !== -1;
    }

    // 当然也可以使用含有泛型的接口来定义函数的形状：
    interface CreateArrayFunc1 {
        <T>(length: number, value: T): Array<T>;
    }
    let createArray1: CreateArrayFunc1;
    createArray1 = function<T>(length: number, value: T): Array<T> {
        let result: T[] = [];
        for (let i = 0; i < length; i++) {
            result[i] = value;
        }
        return result;
    }
    createArray1(3, 'x'); // ['x', 'x', 'x']

    // 泛型参数的默认类型
    function createArray<T = string>(length: number, value: T): Array<T> {
        let result: T[] = [];
        for (let i = 0; i < length; i++) {
            result[i] = value;
        }
        return result;
    }