TypeScript学习总结

1. 简介

1.1 TypeScript 是什么

• javascript 的扩展
• 静态类型风格的类型系统
• 从 es6 到 es10 甚至是 esnext 的语法支持
• 兼容各种浏览器，各种系统，各种服务器，完全开源

1.2 TypeScript优点

• 程序更容易理解，不需要手动调试等过程，代码本身就可以上诉问题
• 杜绝一些常见的错误
• 完全兼容 Javascript

1.3 安装

安装命令

npm install -g typescript

2. 数据类型与基础语法

2.1 数据类型

最新的 ECMAScript 标准定义了 8 种数据类型：

• 7 种原始类型：
  • Boolean
  • Null
  • Undefined
  • Number
  • BigInt
  • String
  • Symbol
• 和 Object

示例代码：

let isUse: boolean = false
let num: number = 10
let myName: string = 'dong'
let message: string = `hello, ${myName}`
let u: undefined = undefined
let n: null = null

let test: any = 2
test = 'string'
test = true

2.2 数组和元组

示例代码：

// 数组
let arrNum: number[] = [1,2,3]
arrNum.push(4)

// 元组
let user: [string, number] = ['dong', 18]
user.push('123')
user.push(12)

2.3 接口（Interface）

示例代码：

interface IPerson {
    readonly id: number;
    name: string;
    age?: number;
}

let dong: IPerson = {
    id: 1,
    name: 'dong',
    age: 18
}

2.4 函数（Function）

示例代码：

const add = (x: number, y: number, z?: number): number => {
    if (typeof z === 'number') {
        return x + y + z
    } else {
        return x+ y
    }
}
interface ISum {
    (x: number, y: number, z?: number): number
}

let add2: (x: number, y: number, z?: number) => number = add;

let add3: ISum = add;

2.5 联合类型和类型断言

示例代码：

// 联合类型
let numberOrString: number | string
numberOrString = 'abc'
numberOrString = 123

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

// 类型守护
function getLengh2(input: string | number): number {
    if (typeof input === 'string'){
        return input.length
    } else {
        return input.toString().length
    }
}

2.6 类（Class）

示例代码：

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 xiaobao = new Dog('xiaobao')
console.log(xiaobao.run())
console.log(xiaobao.bark())

class Cat extends Animal {
  static categories = ['mammal']
  constructor(name) {
    super(name)
    console.log(this.name)
  }
  run() {
    return 'Meow, ' + super.run()
  }
}
const maomao = new Cat('maomao')
console.log(maomao.run())
console.log(Cat.categories)

2.7 类和接口

代码示例：

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() {

  }
}

2.8 枚举

示例代码：

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

console.log(Direction.Up)
console.log(Direction[0])

2.9 泛型

示例代码：

function echo<T>(arg: T): T {
  return arg
}

const result = echo(true)

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, width: 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.shift()
  }
}
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: "string"}
let kp2: KeyPair<string, number> = { key: 'str', value: 2 }
let arr: number[] = [1,2,3]
let arrTwo: Array<number> = [1,2,3]

2.10 声明文件

声明文件一般以 .d.ts 为后缀

declare var jQery: (selector: string) => any;