TypeScript的那些事

随着前端技术的更新迭代，TS已经算是很耳熟目染了，也能发现很多技术栈都用到了TS来进行开发，以下主要是针对刚开始初学TS需要掌握的内容

强类型与弱类型

强类型：
不允许有随意的隐式类型转化，例如传入的参数数据格式必须保持一致，否则会直接报语法错误
（优势，会在语法阶段直接爆出错误，代码更加智能，编码准确，重构定位问题，减少一步数据类型判断）
弱类型：
允许有隐式类型转换发生，如果传入参数不一致的情况，不会发生语法错误
（存在的问题：错误不能在语法层面直接报错，会发生类型转换，使得函数方法改变，数据类型不一致）

静态类型和动态类型

静态类型：
规定刚开始赋变量值后，不能对数据类型进行修改
动态类型：
赋值后是可以对变量的类型进行修改的

Javascript自身类型系统的问题

类同于弱类型和动态类型的问题

Flow静态类型检查

可以通过引入flow来对我们代码类型进行报错检测
步骤：

1. 在项目代码中安装flow-bin用来检测我们代码的数据类型是否一致
2. 使用过程中需要通过@flow来引入
3. 特殊格式是无法通过vscode的自主语法校验的，需要关掉语法

//@flow
function sum (a:Number, b:Number) {
    return a+b
}
// sum(100, 100)
sum('100', '100') -----开启flow检测会会直接报数据类型不一致的错误

Flow的使用更多是在代码书写阶段进行数据类型校验的，那么在编译阶段就需要将添加的flow移除掉，此处有两种方法可以工具化帮助我们移除

1. 使用flow自带的工具flow-remove-types进行转化
2. 使用babel工具，yarn add @babel/core @babel/cli @babel/proset-flow来进行文件的转化

Flow的原始类型

const a: string = 'football'
const b: number = 123
const c：boolean = true
const d: null = null
const e: void = undefined

-------数组类型
const arr1: Array<number> = [1,2,3]
const arr2: number[] = [1,2,3]
-------对象类型
const obj1: {foo:string,bar:number} = {foo:'string',bar:123}
const obj2: {foo?:string,bar:number} = {bar:123}
-------函数类型
function foo() :number }{
    return 100
//如果什么都不返回，就需要定义成void类型
}
-------maybe类型
const type: 'success'|'waring'|'allright' = 'success'
const b: StringOrNumber = 'string'
const gender: ?number = undefined
-------任意类型
function passMixed(value:mixed){} //保留强类型特性
function passAny(value:any){} //依旧是弱类型可以调用方法
---同样如果在使用dom元素获取的时候，都有api声明的一些数据类型限制

Typescript语言规范与基本应用

Object类型：不单单指的是传统{}，还包括函数，数据，对象

const Object = function(){} //[] //{}
const Object:{foo:number,bar:string} = {foo:123,bar:'string'}

Array类型：

const arr: Array<Number> = [1,2,3]
const arr: number[] = [1,2,3]
//来限制传入的参数为数组结构的参数
function sum (...args:number[]) {
  return args.reduce((pre,current) => pre+current,0)
}

元组类型：固定长度来返回内容

const tuple: [number,string] = [18,'string']
const [age,name] = tuple
Object.entries({
  foo:123-----键值数组就是用元组表示的
})
//其中包括react中使用的usestatue就是元组返回结果

枚举类型：

enum PostStatus {
//如若不赋值，直接从1开始数字累加，也可以是字符串默认值，不过需要每一个都定义
  Draft = 1,
  Unpublished = 2,
  Published = 3
}
//最后转化会出现双线数据定义，可以通过const变量来移除
const post = {
  status: PostStatus.Draft
}

函数类型：

...rest来接受任意参数的接收值
function func(a:number,b:number=10,...rest:number[]):string {
  return 'string'
}
func(10,20)

任意类型：

function stringify(value:any){
  return JSON.stringify(value)
}
//any可以用来接收任意类型参数，一般不用存在安全性，但是如果兼容老代码可以使用

类型断言：类型转化是在执行过程发生，但是类型断言只存在于编译过程

const res = nums.find(i => i>0)
const num1 = res as number
const num2 = <number>res //JSX下不能使用，会被当作标签

接口

是Typescript中用来约束对象结构的，在编译之后并没有接口相关的代码，没有实际意义

export {}
interface Post {
    title: String
    content: String
    subtitle ?: String   ---用来表示可有可无
    readonly summary: String ---用来标识只读成员
}
function printPost (post) {
    console.log(post.title)
    console.log(post.content)
}

printPost({
    title:'Hello worlds' ,
    content: 'A javascript superset'
})

//定义不确定性键值对成员
interface Cache {
  [prop: String]: String
}
const cache: Cache = []
cache.foo = 'value'

TypeScript类的基本使用

不同于JS的类使用，TS类中变量定义之后需要对其进行提前声明

export {}
class Person {
  name: String
  age: Number
  constructor(name:String,age:Number) {
    this.name = name 
    this.age = age
  }
  sayHi (msg: String):void {
    console.log(` I am ${this.name}, ${msg}`)
  }
}

类的修饰符

一般有三种修饰

class Person {
  public name： String  ---公共成员对象
  private age：Number   ---私有成员对象，外部不能够进行访问，只能在对象内部访问
  protected gender: boolean
  ---保护对象，只允许在此类中访问定义的成员
}
class Student extends Person {
  private cosntructor (name: String, age:Number){
    super(name,age)
    console.log(this.gender)  ---是可以进行访问的
  }
  static create (name: string,age:number){
    return new Student(name,age)
  }
}
//私有继承类之后，外部无法正常调用new来构造
const Jack = Student.creat('jack', 18)

类和接口

可以帮助我们定义不同类之间相同的公共属性

export {}
interface Eat {
    eat(food:String):void
}
interface Run {
    run(distance:Number):void
}
class Person implements Eat, Run{
    eat(food:String):void {
        console.log(`人类进食 ${food}`, )
    }
    run(distance:Number):void {
        console.log(`直立行走 ${distance}}`, )
    }
}
class Animal implements Eat, Run {
    eat(food:String):void {
        console.log(`动物咀嚼 ${food}`, )
    }
    run(distance:Number):void {
        console.log(`爬行动物 ${distance}}`, )
    }
}

抽象类的实现

如果定义了抽象类，就不可以new构造，只能通过子类来继承

export {}
abstract class Animal {
    eat (food: string): void {
        console.log(`动物吃: ${food}`)
    }
    abstract run(distance:number):void
}
class Dog extends Animal {
    run(distance:number):void {
        console.log(`爬行动物: ${distance}`)
    }
}
const dog = new Dog()
dog.eat('骨头')
dog.run(100)

泛型

当我们定义不确定类型参数的时候，为了避免冗余，可以通过泛型来定义不同数据类型

export{}
function createNumberArray(length:number,value:number):number[]{
  const arr = Array<number>(length).fill(value)
  return arr
}
function createStringArray(length:number,value:string):string[]{
  const arr = Array<string>(length).fill(value)
  return arr
}
------------为避免以上两种情况的冗余，我们通过泛型来实现
function createArray<T>(length:number,value:T):T[]{
  const arr = Array<T>(length).fill(value)
  return arr
}
const res = createArray<string>(3,'foo')

类型声明

对于一些引入的第三方模块，可能没有对象的类型声明

• 添加相应的types声明模块@types/lodash
• 手动添加

declare function camelCase (input: string): string