TypeScript(一)

一.TypeScript基础类型

1. boolean

   const flag: boolean = false
   

2. number

   const num: number = 123
   

3. string

   const str: string = 'abc'
   

4. 数组（两种书写方式）

   const arr: Array = [1, 2, 3, 4, 5];
   const arr: string[] = ['a', 'b', 'c'];
   

5. 元组Tuple：元组是一种特殊的数组，用于指定数组中指定位置的元素类型, 后面值必须与前面的类型一一对应

   const tup: [string, number, boolean] = ['a', 123, true];
   

6. enum枚举：一般用于标识多种不同的状态

   enum State {
       success,
       error = 3,
       warning
   }
   let currentState1: State = State.success
   console.log(currentState1) // 输出：0  默认情况下，元素编号从0开始
   let currentState2: State = State.error
   console.log(currentState2) // 输出: 3  可以手动指定元素的编号，上面指定为3
   let currentState3: State = State.warning
   console.log(currentState3) // 输出: 4 因为前一个元素的编号被手动指定为3，所以下一个元素如果没有指定编号，则其编号在上一个元素编号的基础上继续叠加
   
   // 当我们知道数值是4， 但是不确定4是哪一个状态时，可以查找相应的名字
   let StateName: string = State[4]
   console.log(StateName) // warning
   

7. void：一般用于函数没有返回值

   const func = (): void => {
      console.log('not return')
   }
   

8. any：可移除类型检查

9. null/ undefined：是其他类型(never)的子类型

   const a: null = null
   const b: undefined = undefined
   

10. 其他类型 never：表示从不会出现的值

    let c: never = (() => {
        throw new Error('error')
    })()
    let d: never = (() => {
        while(true) {}
    })()
    

二.TypeScript函数

1. 函数定义

   1-1.函数声明

   function getName(): string { // 在参数列表后面指定函数返回值类型
       return 'john'
   }
   

   1-2.匿名函数

   let foo = function(): number {
       return 123
   }
   

   1-3.ts中定义方法传参

   let getUserInfo = function (name: string, age: number): string { // 指明参数的类型和函数返回值的类型
       return `姓名：${name}, 年龄：${age}`
   }
   

   1-4.ts中没有返回值的方法

   function foo(): void {
       console.log('foo')
   }
   

2. 可选参数

   ES5里面方法的实参和形参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数

   配置可选参数的方法： 在参数之后 冒好之前加上 "?"

   注意：可选参数必须配置到参数列表的最后面

   function getUserInfo(name: string, age?:number): string {
       if (age) {
           return `姓名：${name}, 年龄：${age}`
       } else {
           `姓名：${name}, 年龄: 未知`
       }
   }
   

3. 默认参数

   function getUserInfo(name: string, age: number = 20): string {
       if (age) {
           return `姓名：${name}, 年龄：${age}`
       } else {
           `姓名：${name}, 年龄: 未知`
       }
   }
   

4. 剩余参数

   // function sum(a: number, b: number, c: number, d: number): number {
   //   return a + b + c + d
   // }
   // sum(1, 2, 3, 4) // 参数传多了会报错\
   
   // 扩展运算符： 接收形参传过来的值
   function sum(a: number, ...result: number[]): number {
       let sum = a;
       for(let i = 0; i < result.length; i++) {
           sum += result[i]
       }
       return sum;
   }
   

5. 函数重载

   es5中如出现同名方法，后面的方法会覆盖前面的方法

   ts中的重载，同样的方法传入不同的参数，从而实现不同的功能

   function getInfo(name: string): string;
   function getInfo(age: number): number;
   function getInfo(a: any): any {
       if (typeof a === 'string') {
           return '姓名：' + a
       } else {
           return '年龄：' + a
       }
   }
   console.log(getInfo(20)); // 年龄：20
   console.log(getInfo('zhangsan')) // 姓名：zhangsan
   

三.TypeScript中的类

1. ts中类的定义

   class Person {
     name: string // 属性 前面省略了public关键词
     constructor(name: string) { // 构造函数 实例化类的时候触发的方法
       this.name = name
     }
   
     getName(): string {
       return this.name
     }
   
     setName(name: string): void {
       this.name = name
     }
   
     run(): void {
       console.log(this.name)
     }
   }
   let p = new Person('mike')
   console.log(p.getName()) // mike
   
   p.setName('john')
   console.log(p.getName()) // john
   

2. ts中如何实现继承：extends，super关键字

   class Person {
     name: string
     constructor(name: string) {
       this.name = name
     }
   
     run(): string {
       return `${this.name} is sporting`
     }
   }
   // 让 Web类 继承 Person类
   class Web extends Person {
     constructor(name: string) {
       super(name) // 初始化父类的构造函数
     }
     run() {
       return `${this.name} is sporting --- children`
     }
   }
   let w = new Web('lucy')
   console.log(w.run());
   

3. 类里面的修饰符

   typescript里面定义属性的时候给我们提供了三种修饰符：

   public: 公有， 在当前类里面、子类里面、类外面都可以访问

   protected： 保护类型，在当前类里面、子类里面可以访问，在类外面无法访问

   private： 私有，在当前类里面可以访问、子类、类外面都无法访问

   class Person {
     public name: string    // 公有属性 public
     // protected name: string // 保护属性 protected
     // private name: string      // 私有属性 private
     constructor(name: string) {
       this.name = name
     }
     run(): string {
       return `${this.name} is sporting`        // 当前类里面
     }
   }
   
   class Web extends Person {
     constructor(name: string) {
       super(name)
     }
     sleep(): string {
       return `${this.name} is sleepping`   // 子类里面
     }
   }
   
   let p = new Person('hhh')                   // 类外部
   console.log(p2.name); // 输出： hhh
   

4. 静态属性，静态方法

   静态属性：直接通过类来调用

   实例属性：需要先实例化对象，再通过实例化对象来调用

   class Person {
     public name: string
     public age: number
     static sex = '男'
     constructor(name: string, age: number) {
       this.name = name
       this.age = age
     }
   
     run() { // 实例方法
       console.log(`${this.name} is runing`)
     }
   
     static print() { // 静态方法 静态方法里面没法直接调用类里面的属性，只能访问静态属性
       console.log('静态方法里面访问静态属性：' + this.age) // 报错
       console.log('静态方法里面访问静态属性：' + this.sex) // 静态方法里面访问静态属性： 男
     }
   }
   
   Person.print()
   
   console.log(Person.sex)  // 男
   

5. 多态

   父类定义一个方法不去实现，让继承它的子类去实现，每一个子类有不同的表现

   多态也是继承的一种表现

   class Animal {
     public name: string
     constructor(name: string) {
       this.name = name
     }
     eat() {
       console.log('eat funciton')
     }
   }
   
   class Dog extends Animal {
     constructor(name: string) {
       super(name)
     } 
   
     eat() {
       return this.name + 'eat meat'
     }
   }
   
   class Cat extends Animal {
     constructor(name: string) {
       super(name)
     }
     
     eat() {
       return this.name + 'eat fish'
     }
   }
   

6. 抽象方法

   ts中的抽象类，它是提供其他类继承的基类，不能直接被实例化

   用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现

   abstract抽象方法只能放在抽象类里面

   // 抽象类和抽象方法来定义标准， 标准：Animal这个类要求它的子类必须包含eat方法
   abstract class Animal { // 无法创建抽象类的实例
     public name: string
     constructor(name: string) {
       this.name = name
     }
     abstract eat(): any // 抽象方法在子类中必须实现（抽象类中的抽象方法不包含具体实现并且必须在派生类（子类）中实现）
   }
   
   class Dog extends Animal {
     constructor(name: any) {
       super(name)
     }
   
     // 抽象类的子类必须实现抽象类里面的抽象方法
     eat() {
       console.log(this.name + ' eat meat')
     }
   }
   
   class Cat extends Animal {
     constructor(name: any) {
       super(name)
     }
   
     eat() {
       console.log(this.name + ' eat fish')
     }
   }
   let d = new Dog('dog')
   d.eat() // dog eat meat
   let c = new Cat('cat')
   c.eat() // cat eat fish
   

持续更新。。。