JavaScript自有类型系统的问题分析以及主流解决方案

分析

类型系统

类型安全角度 - 是否可以允许隐式类型转换

  • 强类型 - 强类型语言不允许任意的隐式类型转换

    • 强类型语言在参数传入时就会限制类型, 会报错

  • 弱类型 - 弱类型语言则允许任意的数据隐式类型转换

    • 弱类型语言在传入时不会限制,也不不会报错, 但会存在传入参数类型与运行代码参数要求类型不同 而导致运行结果与预期不同

类型检查角度 - 声明过后是否可以随时允许被再次修改

  • 静态类型语言 - 一个变量声明时就明确变量类型,明确过后不允许再次修改
  • 动态类型语言 - 运行阶段才能够明确变量类型,变量类型可以随时发生变化

javascript类型语言特征 : 弱类型且动态

  • 早期javascript非常简单
  • 没有编译环节

弱类型产生的问题

  • 1、异常需要等到运行时才能发现
  1. const obj = {}
  3. obj.foo()
  • 2、函数功能可能发生改变
  1. function sum (a, b) {
  2.   return a + b
  3. }
  4. console.log(sum(100, 100))
  5. console.log(sum(100, '100'))
  • 3、对象索引器的错误用法
  1. const obj = {}
  2. obj[true] = 100 // 属性名会自动转换为字符串
  3. console.log(obj['true'])

强类型的优势

  • 1、强类型代码错误更早暴露
  • 2、强类型代码更智能,编码更准确
  • 3、重构更可靠
  • 4、减少了代码层面上的不必要的类型判断
  1. function sum (a, b) {
  2.   if (typeof a !== 'number' || typeof b !== 'number') {
  3.     throw new TypeError('arguments must be a number')
  4.   }
  6.   return a + b
  7. }

解决方案

TypeScript

  • javascript 的超集
  • Typescript ( javascript、类型系统、ES6+ ) 编译为 javascript去工作
  • 渐进式的, 可以完全按照 javascript 标准语法编写代码

原始数据类型

  1. const a: string = 'string'
  3. const b: number = 10 // NaN Infinity
  5. const c: boolean = true
  6. // 在非严格模式（strictNullChecks）下，
  7. // string, number, boolean 都可以为空
  8. // const d: string = null
  9. // const d: number = null
  10. // const d: boolean = null
  12. const e: void = undefined
  14. const f: null = null
  16. const g: undefined = undefined
  18. // Symbol 是 ES2015 标准中定义的成员，
  19. // 使用它的前提是必须确保有对应的 ES2015 标准库引用
  20. // 也就是 tsconfig.json 中的 lib 选项必须包含 ES2015
  21. const h: symbol = Symbol()

作用域问题

  1. // 默认文件中的成员会作为全局成员
  2. // 多个文件中有相同成员就会出现冲突
  3. // const a = 123
  5. // 解决办法1: IIFE 提供独立作用域
  6. // (function () {
  7. //   const a = 123
  8. // })()
  10. // 解决办法2: 在当前文件使用 export，也就是把当前文件变成一个模块
  11. // 模块有单独的作用域
  12. const a = 123
  14. export {}

Object 类型

  • object 类型是指除了原始类型以外的其它类型
  1. export {} // 确保跟其它示例没有成员冲突
  3. // object 类型是指除了原始类型以外的其它类型
  4. const foo: object = function () {} // [] // {}
  6. // 如果需要明确限制对象类型，则应该使用这种类型对象字面量的语法，或者是「接口」
  7. const obj: { foo: number, bar: string } = { foo: 123, bar: 'string' }
  8. // 结构必须和声明类型一致, 不能多也不能少

Array 类型

  1. export {} // 确保跟其它示例没有成员冲突
  3. // 数组类型的两种表示方式
  5. const arr1: Array<number> = [1, 2, 3]
  7. const arr2: number[] = [1, 2, 3]
  9. // 案例 -----------------------
  11. // 如果是 JS，需要判断是不是每个成员都是数字
  12. // 使用 TS，类型有保障，不用添加类型判断
  13. function sum (...args: number[]) {
  14.   return args.reduce((result, current) => result + current, 0)
  15. }
  17. sum(1, 2, 3) // => 6

Tuple (元组)

  • 明确元素数量,以及明确每个元素的类型的数组
  1. const tuple: [number, string, boolean] = [12,'das', true]
  3. // tuple[0] => 12
  4. // tuple[1] => 'das'
  6. const [num, desc] = tuple

Enum (枚举)

  1. // 用对象模拟枚举
  2. // const resultStatus = {
  3. //   fail: 0,
  4. //   success: 1,
  5. //   pengding: 2
  6. // }
  8. // 标准的数值枚举, 枚举值不设置初始值会自动基于前一个值自增
  9. // enum resultStatus = {
  10. //   fail = 0,
  11. //   success = 1,
  12. //   pengding, // => 2
  13. // }
  15. // 字符串枚举
  16. // enum resultStatus = {
  17. //   fail = 'fail',
  18. //   success = 'success',
  19. //   pengding = 'pending',
  20. // }
  22. // 常量枚举, 不会侵入编译结果
  23. const enum resultStatus = {
  24.   fail,
  25.   success,
  26.   pengding,
  27. }
  29. const result = {
  30.   code: '200',
  31.   message: '',
  32.   data: resultStatus.fail
  33. }
  35. // resultStatus[0] // => fail

函数类型

  • 对函数参数和返回值进行约束
  1. function foo (a: number, b: number): string {
  2.   return 'fooResult'
  3. }
  5. // ts调用函数需要形参与实参个数相同
  6. // 可以通过ts可选参数 ( b? : number )和添加默认值( b: number = 20 )的方式解决
  7. // 两种方式都必须放置在形参的最后位置
  8. foo(10, 20)
  9. foo(10)

any ( 任意类型、弱类型 )

value: any

  • 允许存放任意类型的值
  • 语法上不会报错
  • 不会有任何类型检测,所以存在类型安全问题,所以不建议使用
  • 在兼容老代码上很方便

隐式类型推断

  1. // 类型推断为 number, 后续再给赋值其他类型会报错
  2. let age = 18 // number
  3. // age = 'string'
  5. // 类型推断为 any, 所以后续赋值不会报错
  6. let foo
  7. foo = 100
  8. foo = 'string'
  10. // 虽然会简化一些代码, 但还是建议为每个变量添加明确的类型标注, 方便后期维护,与代码注释的好处一致

类型断言 ( as )

  • 告诉ts 我确定他是什么类型

两种实现方式 :

  • const result1 = res as number
  • const result2 = res // 注意 会和jsx 语法冲突

类型断言与类型转换的区别

  • 类型断言是在编译阶段
  • 类型转换是在运行阶段

interfaces ( 接口 )

  • 约定一个对象当中具体有哪些成员,并且成员的类型
  1. interface Get {
  2.   name: string
  3.   desc: string
  4. }
  6. function printGet (get: Get) {
  7.   console.log(get.name)
  8.   console.log(get.desc)
  9. }
  11. printGet({
  12.   name: 'name',
  13.   desc: 'desc'
  14. })
  • 可选成员 - 可传可不传
  1. interface Info {
  2.   subname?: string
  3. }
  • 只读成员 - 不允许外界修改
  1. interface Info {
  2.   readonly idno: string
  3. }
  • 动态成员 - 不确定具体成员
  1. // [key: string]中 key 代表是键名, string代表键名的类型
  2. interface Info {
  3.   [key: string]: string
  4. }
  6. const info: Info = {}
  7. info.name = 'gkm'
  8. info.age = '18'

calss ( 类 )

  • 描述一类事物的具体特征
  • typeScript增强了class的相关语法

修饰符

  • 1、public：public表明该数据成员、成员函数是对所有用户开放的，所有用户都可以直接进行调用
  • 2、private：private表示私有，私有的意思就是除了class自己之外，任何人都不可以直接使用。
  • 3、protected：protected对于子女、朋友来说，就是public的，可以自由使用，没有任何限制，而对于其他的外部class，protected就变成private。

对于构造函数的访问修饰符问题
  • 构造函数的访问修饰符,默认也是public, 如果我们把构造函数的修饰符设置成 private , 那么这个类型就不能在外部被实例化,同时也不能被继承.这种情况下, 我们就只能在这个类的内部添加一个静态方法( 使用 Static 关键字), 在静态方法中创建类型的实例, 因为 private 只能在内部访问

readonly ( 只读 )

只读属性只能在属性声明阶段直接赋值或者在构造函数中初始化. 两者只能选择其中一种

  1. class Person {
  2.   // name: string = ‘gkm’
  3.   public name: string // 公有属性, 不加修饰符默认为公有属性
  4.   private age: number // 私有属性, 只能在内部访问
  5.   // readonly 只读属性 有修饰符的情况下要跟在修饰符的后面
  6.   protected readonly gender: boolean // 受保护的属性, 只能在子类中访问, 在实例中不能访问
  8.   constructor(name: string, age: number) {
  9.     // 如果初始属性没赋值,就需要加上
  10.     this.name = name
  11.     this.age = age
  12.     this.gender = true
  13.   }
  15.   sayHi (msg: string) :vaid {
  16.     console.log(`I am ${name}, ${msg}`)
  17.   }
  18. }
  20. class Student extends Person {
  21.   private constructor (name: string, age: number) {
  22.     super(name, age)
  23.     console.log(this.gender)
  24.   }
  26.   static create (name: string, age: number) {
  27.     return new Student(name, age)
  28.   }
  29. }
  31. // public constructor
  32. // const gkm = new Person('gkm', 18)
  33. // private constructor
  34. // const gkm = Student.create('gkm', 18)

类与接口

  • 接口可以把一些类中的共有的属性和方法抽象出来,用来约束实现此接口的类
  • 一个接口可以约束多个类,一个类可以抽象出多个接口
  • 我们利用 implements 关键字来实现
  • 用接口约束的类中必须包含这个方法,否则会报错
  1. interface Eat {
  2.   eat (food: string): void
  3. }
  5. interface Run {
  6.   run (distance: number): void
  7. }
  9. class Person implements Eat, Run {
  10.   eat (food: string): void {
  11.     console.log(`优雅的进餐: ${food}`)
  12.   }
  14.   run (distance: number) {
  15.     console.log(`直立行走: ${distance}`)
  16.   }
  17. }
  19. class Animal implements Eat, Run {
  20.   eat (food: string): void {
  21.     console.log(`呼噜呼噜的吃: ${food}`)
  22.   }
  24.   run (distance: number) {
  25.     console.log(`爬行: ${distance}`)
  26.   }
  27. }

抽象类

  • abstract 关键字实现抽象类和方法
  • 抽象类只能被继承, 不能再使用 new 的方式定义实例对象, 子类可以对抽象类进行不同的实现
  • 抽象方法只能出现在抽象类中并且抽象方法不能在抽象类中被具体实现，只能且必须在抽象类的子类中实现
  • 我们一般用抽象类和抽象方法抽离出事物的共性 以后所有继承的子类必须按照规范去实现自己的具体逻辑
  1. abstract class Animal {
  2.   eat (food: string): void {
  3.     console.log(`呼噜呼噜的吃: ${food}`)
  4.   }
  5.   // 
  6.   abstract run (distance: number): void
  7. }
  9. class Dog extends Animal {
  10.   // 之类中必须包含父类中的抽象方法
  11.   run(distance: number): void {
  12.     console.log('四脚爬行', distance)
  13.   }
  15. }
  17. const d = new Dog()
  18. d.eat('嗯西马')
  19. d.run(100)

Generics ( 泛型 )

  • 泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性
  1. function createNumberArray (length: number, value: number): number[] {
  2.   const arr = Array<number>(length).fill(value)
  3.   return arr
  4. }
  6. function createStringArray (length: number, value: string): string[] {
  7.   const arr = Array<string>(length).fill(value)
  8.   return arr
  9. }
  11. function createArray<T> (length: number, value: T): T[] {
  12.   const arr = Array<T>(length).fill(value)
  13.   return arr
  14. }
  16. // const res = createNumberArray(3, 100)
  17. // res => [100, 100, 100]
  19. const res = createArray<string>(3, 'foo')

类型声明

  • 在typescript中我们引用第三方模块,如果这个模块中不包含所对应的模块声明文件, 我们可以尝试安装所对应的类型声明模块, 一般命名为 @types/后面对应模块名(比如 : @types/lodash ), 如果没有这种对应模块, 那我们就只能自己使用 declare 语句声明说对应的模块类型
  1. declare function foo (name: string): string