TypeScript学习笔记

数据类型

基本数据类型（undefined和null可以赋值给任何基础类型）

 let str: string = 'xiaoming'  // 字符串
 let num: number = 123 // 数字
 let bool: boolean = false // 布尔值
 let ud: undefined = undefined // undefined
 let nll: null = null // null

引用数据类型
数组和元组

let arr: bumber[] = [1, 2, 3] // 只能存储数字类型的数据
let arr: [string, number] = ['xiaoming',  123] // 元组，对存储的数据进行限制

inrerface: 接口

对对象形状（shape）进行描述
对类进行抽象
Duck Typing（鸭子类型）

interface IPerson {
  name: string;
  age: number;
}

let obj: IPerson = {
  readonly id: number; // 只读属性，只在第一次执行时赋值，后面再赋值报错
  name: string;
  age?: 18;  // 加入?表示可选属性 
}

函数申明式写法
如果有默认值，他就会自动变成可选参数
如果要表示可选参数使用方式：z?: number，注意：可选参数只能放在参数的最后一个

function add(x: number, y: number, z: number = 10) : number {
  if(typeof z === 'number') {
    return x + y + z
  } else {
    return x + y
  }
}

函数表达式的写法
add是一个函数类型，ts会在没有明确指定类型时进行类型推论，不能再将它赋值给其他类型

const add = function(x: number, y: number, z: number = 10) : number {
  if(typeof z === 'number') {
    return x + y + z
  } else {
    return x + y
  }
}
// 将add函数赋值给add2
const add2: (x: number, y: number, z?: number) => number = add

类的写法
- 修饰符：
  public：都可以访问（读、改）
  private：只能在当前类里进行访问，子类和实例都不能访问
  protected：子类也可以访问,实例不能访问
  readonly：只读
  static: 类直接访问

class Animal {
  public name: string;
  // 静态属性
  static categories: string [] = ['mammal', 'bird']
  // 静态方法
  static isAnimal(a) {
    return a instanceof Animal
  }
  // 构造方法
  constructor(name: string) {
    this.name = name
  }
  run() {
    return `${this.name} is running`
  }
}

console.log(Animal.categories) // ['mammal', 'bird']

const snake = new Animal('lily') // lily is running
console.log(Animal.isAnimal(snake))  // true

class Dog extends Animal {
  bark() {
    return `${this.name} is barking`
  }
}

const xiaobao = new   Dog('xiaobao')

console.log(xiaobao.run())   // xiaobao is running
console.log(xiaobao.bark()) // xiaobao is barking

class Cat extends Animal {
  constructor(name) {
    super(name)
    console.log(this.name)
  }
  // 重写父类方法
  run() {
    return 'Meow, ' + super.run()
  }
}

const miaomiao = new Cat()
console.log(maomao.run()) // miaomiao   Meow, maomao is running

接口：interface

对对象的约束

interface Person {
  readonly id: number;
  name: string;
  age ?: number;
}
let viking: Person = {
  id: 123.
  name: 'hebe'
}

对类的扩展
当公共属性和方法不方便抽成一个类时，可以使用接口进行抽象
接口之间也是可以继承的

 interface Radio {
   switchRadio() : void;
 }

 interface Battery {
   checkBatteryStatus();
 }

 interface RadioWithBattey extends Radio {
     checkBatteryStatus();
 }

 class Car implements Radio , Battery {
     switchRadio() { };
     checkBatteryStatus() { };
 }

class Cellphone implements RadioWithBattey {
  switchRadio() { };
  checkBatteryStatus() { };
}

枚举

const enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

// console.log(Direction.Up) // 0
// console.log(Direction[0]) // Up
const value = 'UP'
if (value === Direction.Up) {
  console.log('Go Up!')
}

泛型

1、可以把它作为占位符

// 传入什么类型，就返回什么类型
function echo<T>(arg: T) : T {
   return arg
}

const res = echo(123) // res就是number
const res1 = echo('str') // res1就是string

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[2]]
}

const res2 = swap(['str', 123]) // res2就是number、string的元组
//  res2[1].  就可以使用字符串的方法
//  res2[0].  就可以使用number的方法

2、约束泛型
让传入值满足我们特定的要求

 // 第一种解决办法，对泛型进行限定，但不能根本解决
 function echoWithArr<T>(arg: T[]): T[] {
   console.log(arg.length)
   return arg
 }
  
 const arrs = echoWithArr([1, 2, 4])

 // 第二种解决方案，结合接口进行限定 
 interface IWithLength {
   length: number
 }

 function echoWithLength<T extends IWithLength>(arg: T): T {
   console.log(arg.length)
   return arg
 }

const str = echoWithLength('str')
const obj = echoWithLength({ length: 10, width: 10 })
const arr2 = echoWithLength([1, 2, 3])

3、在类中的使用