TYPESCRIPT

124 阅读2分钟

元祖

let user: [string, number]
user = ['test', 123]

元祖表示已知元素数量和类型的数组,赋值时各个位置上的元素类型都要对应,元素个数也要一致

Interface

//readonly:只读
// ?: 该属性可以有也可以没有
interface Person{
  readonly id: number,
  name: string,
  age?: number
}
let person: Person = {
  id: 1,
  name: 'kylin'
}

函数

//function add(x: number, y: number, z?: number): number{
//  return x+y
//}


const add = (x: number, y: number, z?: number): number => {
  return x+y
}

interface ISum {
  (x: number, y: number, z?: number): number
}
let add2: ISum = add

联合类型

let test: number | string
test.toString()

//类型断言
function getLength(input: string | number): number{
  const str = input as string
  if(str.length){
    return str.length
  }else{
    const number = input as number
    return number.toString().length
  }
}

//type guard
function getLength2(input: string | number): number{
  if(typeof input === 'string'){
    return input.length
  }else{
    return input.toString().length
  }
}

  • public
  • private
  • protected 当前类及其子类才能访问
class Animal {
  readonly name: string;
  constructor(name) {
    this.name = name
  }
  run() {
    return `${this.name} is running`
  }
}

const snake = new Animal('lily')
console.log(snake.run())

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

const xiaobai = new Dog('xiaobai')
console.log(xiaobai.run())
console.log(xiaobai.bark())

class Cat extends Animal {
  static categories = ['mammal']
  constructor(name) {
    super(name)  //重写构造函数一定要用super
    console.log(this.name)
  }
  run() {
    return `Meow, ${super.run()}`  //调用父类的方法也需要用super
  }
}

const maomao = new Cat('maomao')
console.log(maomao.run())
console.log(Cat.categories)
interface Radio {
  switchRadio(trigger: boolean): void
}
interface Battery {
  checkBatteryStatus(): void
}
interface RadioWithBattery extends Radio{
  checkBatteryStatus(): void
}
class Car implements Radio {
  switchRadio(trigger: boolean) {

  }
}
class Cellphone implements RadioWithBattery {
  switchRadio(trigger: boolean) {

  }
  checkBatteryStatus() {

  }
}

枚举

  • 若没有赋值,那枚举的属性值依次为0, 1, 2...
  • 给某一个属性赋值为10, 那后面的属性值也依次递增
const enum Direction {
  up = 'UP', 
  down = 'DOWN',
  left = 'LEFT', 
  right = 'RIGHT'
}

泛型

function echo<T>(arg: T):T {
  return arg
}
const result = echo(123)

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]]
}
const result2 = swap(['string', 123])

约束泛型

function echoWithArr<T>(arg: T[]): T[] {
  console.log(arg.length)
  return arg
}
const arrs = echoWithArr([1, 2, 3])

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})
const arr2 = echoWithLength([1, 2, 3])
class Queue<T> {
  private data = []
  push(item: T) {
    return this.data.push(item)
  }
  pop(): T {
    return this.data.pop()
  }
}
const queue = new Queue<number>()
queue.push(1)
console.log(queue.pop().toFixed())

interface KeyPair<T, U> {
  key: T,
  value: U
}
let kp1: KeyPair<number, string> = {key: 1, value: 'str'}
let kp2: KeyPair<string, number> = {key: 'str', value: 1}
let arr: number[] = [1, 2, 3]
let arr2: Array<number> = [1, 2, 3]