TypeScript总结记录

为什么要使用TypeScript

• 程序更容易理解。js本身是动态类型语言，需要在运行的时候才知道函数的参数或者返回值的类型，而TS直接可以回答。
• 效率更高。可以在不同的代码块和定义中进行跳转，代码自动补全，丰富的接口提升。
• 更少的错误。编译期间就可以发现大部分错误，并且可以杜绝很多低级错误。
• 非常好的包容性。完全兼容JS，第三方库可以单独编写类型文件

缺点：

• 增加了一些学习成本
• 短期内增加了一些开发成本

基础类型

• boolean
• number、binaryNumber
• string
• undfined、null
• any
• union types 如 number|string
• 元组：限定了数据类型的数组 如 [number, string]

Interface接口

• 对对象形状进行描述
• 对类进行抽象
• Duck Typing（鸭子类型）：关注对象如何去使用

// 接口可以提取不同类中的一些共性，因为通过继承无法实现
// readOnly 只读，?可选
interface Person{
    readonly id: number;
    name: string;
    age?: number;
}

let sc: Person = {
    id: 123,
    name: 'sc',
}

// sc.id = 456; 
//  readOnly是用在属性上的，const是用在变量上的

函数

• 函数为什么被称为一等公民？ 函数和其他类型的对象都相等，可以作为函数参数，可以存入数组，可以作为函数返回，可以被赋值为另一个变量等等

const add = function add(x: number , y: number, z: number = 10):number{
    if(typeof z === 'number'){
        return x + y +z
    }
    return x + y;
}
const add2: (x: number, y: number, z?: number) => number = add

//  类型推断
let str = 'sc'

类 Class

• 类（Class）：定义了一切事物的抽象特点

• 对象（Object）：类的实例

• 面向对象（OOP）：封装、继承、多态

  • 封装：将对数据的操作封装起来，对外只暴露接口，外界调用不需要知道细节就可以通过接口访问对象
  • 继承：子类继承父类，除了拥有父类的所有特性外，还有更加具体的特性
  • 多态：由继承产生的相关的不同的类对相同的方法有不同的响应，比如猫和狗都继承了动物，但它们分别实现了吃的方法

• public代表公有是默认选项；private是私有的，只有在类中可以访问，实例的对象不可以访问，继承的类无法访问；protected表示受控制的，继承的子类可以访问。

// 封装
class Animal {
  // 只能读，无法修改
  readonly name: string;
  //  static是静态属性或方法，直接用Animal.categoies访问，不需要实例对象
  static categoies: string[] = ['mammal', 'bird'];
  static isAnimal(a){
      return a instanceof Animal
  }
  constructor(name: string){
      this.name = name
  }
  run() {
      return `${this.name} is run`
  }
}

console.log(Animal.categoies)
const snake = new Animal('sc')
console.log(Animal.isAnimal(snake))
//  继承
class Dog extends Animal{
  bark() {
      return `${this.name} is barking`
  }
}

const xiaoming = new Dog('xiao ming')

// 多态
class Cat extends Animal{
  constructor(name){
      super(name)
      console.log(this.name)
  }
  run(){
      return `Meow, ${super.run()}`
  }
}

const mao = new Cat('mao')
// console.log(mao.run())

类和接口

• duck typing：如果一只动物走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子，那么这只动物就可以被称为鸭子。

interface Radio {
    switchRadio(): void;
}
interface Battery{
    checkBatteryStatus();
}
interface RadioWithBattery extends Radio{
    checkBatteryStatus();
}
class Car implements Radio{
    switchRadio(){

    }
}
class Cellphone implements RadioWithBattery{
    switchRadio(){

    }
    checkBatteryStatus(){

    }
}

枚举 enums

数字枚举：自带递增、反向映射

enum Direction{
    Up,
    Down,
    Left,
    Right
}
// Up
conosle.log(Direction[0])

解析出来：

字符串枚举

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

常量枚举

可以使用枚举的特性，但是编译后不会有js的逻辑，可以提升性能

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

泛型 Generics

• 定义函数、接口或类的时候，不预先指定类型，而是使用的时候再指定
• 简单使用

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(['strinlus

• 复杂使用

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

interface IWithLength{
    length: number
}
function echiWithLength<T extends IWithLength>(arg: T ): T{
    console.log(arg.length)
    return arg;
}
const str1 = echiWithLength('123')
const ogj = echiWithLength({length: 10, width: 10})
const arr2 = echiWithLength([1,2])

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.2)
console.log(queue.pop().toFixed())

const queue2 = new Queue<string>();
queue2.push('str')
console.log(queue2.pop().length)

interface KeyPair<T,U>{
    key: T;
    value: U;
}
let kp1: KeyPair<number, string> = {key: 123, value: 'ad'}
let kp2: KeyPair<string, number> = {key: '123', value: 123}

let arr: number[] = [1,2,3]
let arrTwo: Array<number> = [1,2,3]

//  interface 描述函数
interface IPlus<T>{
    (a: T, b: T): T
}
function plus(a: number, b: number): number{
    return a + b;
}
const a: IPlus<number> = plus

类型别名和类型断言

• 类型别名 type aliases

// 类型别名 type aliases
type PlusType = (x: number, y: number) => number
function sum(x: number, y: number): number{
    return x+ y;
}
const sum2: PlusType = sum;

//  联合类型下的使用场景
type NameResolver = () => string
type NameOrResolver = string | NameResolver
function getName(n: NameOrResolver): string{
    if(typeof n === 'string'){
        return n;
    }else{
        return n();
    }
}

• 类型断言 type assertion

//  type assertion
function getLength(input: string | number) : number {
    // const str = input as String;
    // if(str.length){
    //     return str.length
    // }else{
    //     const str = input as Number;
    //     return str.toString().length
    // }
    if((<String> input).length){
        return (<String> input).length
    }else{
        (<Number> input).toString().length
    }
}

声明文件

其实就是声明了参数类型和返回结果等，有一些高质量的type库，如：@types/react

declare var jQuery: (selector: string) => void