• TypeScript

      • TypeScript大大提高了代码的可靠程度
      • Javascript自有类型系统的问题

    • 强类型与弱类型

      • 强类型与弱类型（类型安全）

        • 强类型： 语言层面限制函数的实参类型必须与形参数类型相同
        • 弱类型： 不限制，允许任意的数据隐式类型转换

      • 静态类型与动态类型（类型检查）

        • 静态类型： 变量声明时，类型就是明确的，并不能修改
        • 动态类型： 运行阶段才能明确变量类型，并能随时改变

    • js弱且动

      • 缺失了类型系统的可靠性
      • 是脚本语言，没有编译环节

    • 弱类型的问题

      1.   setTimeout(() => {
      2.       obj.foo()   //此处有问题，需要等执行到才能发现
      3.   }, 1000000)
      5.   console.log(100+'100');
      6.   // 100100
      8.   // 3. 对象索引器的错误用法
      9.   const obj = {}
      10.   obj[true] = 100 // 属性名会自动转换为字符串
      11.   console.log(obj['true'])

    • 强类型的优势

      1.   // 强类型的优势
      3.   // 1. 强类型代码错误更早暴露
      5.   // 2. 强类型代码更智能，编码更准确
      7.   // function render (element) {
      8.   //   element.className = 'container'
      9.   //   element.innerHtml = 'hello world'
      10.   // }
      12.   // =================================
      14.   // 3. 重构更可靠
      16.   // const util = {
      17.   //   aaa: () => {
      18.   //     console.log('util func')
      19.   //   }
      20.   // }
      22.   // =================================
      24.   // 4. 减少了代码层面的不必要的类型判断
      26.   function sum (a, b) {
      27.       if (typeof a !== 'number' || typeof b !== 'number') {
      28.           throw new TypeError('arguments must be a number')
      29.       }
      31.       return a + b
      32.   }

    • Flow

      • JavaScript 的类型检查器
        function sum (a: number, b: number) {
        return a + b
        }

      • 安装: yarn add flow-bin —dev

      • 运行: yarn flow

      • 初始化配置文件： flow init

      • 退出: flow stop

      • 移除编译注解

        • 安装：yarn add flow-remove-types —dev

        • 移除某目录并移动到某目录 (a: number, b: number)

          • yarn flow-remove-types . -d dist
        • 编译工具 babel 配合插件也能实现自动移除编译注解
        • 安装 yarn add @babel/core (babel核心模块) @babel/cli (babel的cli工具,直接使用babel命令编译) @babel/preset-flow (转换flow类型的插件) —dev

        • 添加babel配置文件 .babelrc

          • {
            “presets”: [“@babel/preset-flow”]
            }
          • yarn babel src -d dist 把src下的目录文件都编译到dist目录当中
      • flow类型注解 ```javascript /**
      • 类型注解 *
      • @flow */

      function square (n: number) { return n * n }

      let num: number = 100

      // num = ‘string’ // error

      function foo (): number { return 100 // ok // return ‘string’ // error }

      function bar (): void { // return undefined } ```

    1.   - Flow 原始类型
    1.   /**
    2.    * 原始类型
    3.    *
    4.    * @flow
    5.    */
    7.   const a: string = 'foobar'
    9.   const b: number = Infinity // NaN // 100
    11.   const c: boolean = false // true
    13.   const d: null = null
    15.   const e: void = undefined
    17.   const f: symbol = Symbol()
    1.   - Flow 数组类型
    1.   /**
    2.    * 数组类型
    3.    *
    4.    * @flow
    5.    */
    7.   const arr1: Array<number> = [1, 2, 3]
    9.   const arr2: number[] = [1, 2, 3]
    11.   // 元组
    12.   const foo: [string, number] = ['foo', 100]
    1.   - Flow 数组类型
    1.     /**
    2.      * 对象类型
    3.      *
    4.      * @flow
    5.      */
    7.     const obj1: { foo: string, bar: number } = { foo: 'string', bar: 100 }
    9.     const obj2: { foo?: string, bar: number } = { bar: 100 }    //foo?可有可无
    11.     const obj3: { [string]: string } = {}   //键和值，必须是字符串
    13.     obj3.key1 = 'value1'
    14.     obj3.key2 = 'value2'
    1.   - Flow 数组类型
    1.   /**
    2.    * 函数类型
    3.    *
    4.    * @flow
    5.    */
    7.   function foo (callback: (string, number) => void) {
    8.     callback('string', 100)
    9.   }
    11.   foo(function (str, n) {
    12.     // str => string
    13.     // n => number
    14.   })
    1.   - Flow 数组类型
    1.   /**
    2.    * 特殊类型
    3.    *
    4.    * @flow
    5.    */
    7.   // 字面量类型
    9.   const a: 'foo' = 'foo'  //必须是某值
    11.   const type: 'success' | 'warning' | 'danger' = 'success'    //三选一
    13.   // ------------------------
    15.   // 声明类型
    17.   type StringOrNumber = string | number
    19.   const b: StringOrNumber = 'string' // 100
    21.   // ------------------------
    23.   // Maybe 类型
    25.   const gender: ? number = undefined
    26.   // 相当于
    27.   // const gender: number | null | void = undefined
    1.   - Flow Mixed Any
    1.   /**
    2.    * Mixed Any
    3.    *
    4.    * @flow
    5.    */
    7.   // string | number | boolean | ....
    8.   function passMixed (value: mixed) {
    9.     if (typeof value === 'string') {
    10.       value.substr(1)
    11.     }
    13.     if (typeof value === 'number') {
    14.       value * value
    15.     }
    16.   }
    18.   passMixed('string')
    20.   passMixed(100)
    22.   // ---------------------------------
    24.   function passAny (value: any) {
    25.     value.substr(1)
    27.     value * value
    28.   }
    30.   passAny('string')
    32.   passAny(100)
    • Flow 运行环境 API ```javascript /**
    • 运行环境 API *

    • @flow */

      const element: HTMLElement | null = document.getElementById(‘app’) ```

    • Flow 类型小结

    • JavaScript的超集(superset)

    • 任何一种JavaScript运行环境都支持

    • TypeScript作为一门编程语言，功能更为强在，生态也更健全、更完善

    • 前端领域中的第二语言，长周期的大项目，会建议选择TypeScript

    • 缺点一：语言本身多了很多概念，属于“渐进式”

    • 缺点二：项目初期，TypeScript会增加一些成本

    • 安装:

      • 先初始化一个项目中使用的package.json文件,管理项目依赖项： yarn init —yes
      • 添加TypeScript模块： yarn add typescript —dev
      • tsc编译某文件: yarn tsc XXX.ts 可生成编译后es2013的js文件
      • 配置文件，编译整个项目/工程
      • 创建typescript的配置文件： yarn tsc —init
      • 创建src目录，并把ts文件放入src
      • 然后运行 yarn tsc 即可编译

    • 原始数据类型

      1. // 原始数据类型
      3. const a: string = 'foobar'
      5. const b: number = 100 // NaN Infinity
      7. const c: boolean = true // false
      9. // 在非严格模式（strictNullChecks）下，
      10. // string, number, boolean 都可以为空
      11. // const d: string = null
      12. // const d: number = null
      13. // const d: boolean = null
      15. const e: void = undefined
      17. const f: null = null
      19. const g: undefined = undefined
      21. // Symbol 是 ES2015 标准中定义的成员，
      22. // 使用它的前提是必须确保有对应的 ES2015 标准库引用
      23. // 也就是 tsconfig.json 中的 lib 选项必须包含 ES2015
      24. const h: symbol = Symbol()
      26. //解决办法 "target": "ES2015", 或 "lib": [ES2015],   
      28. // Promise
      30. // const error: string = 100
      32. //标准库就是内置对象所对应的声明

    • TypeScript 中文错误信息

      • yarn tsc —locale zh-CN

    • 作用域问题

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

    • 作用域问题

      1. // Object 类型
      3. export {} // 确保跟其它示例没有成员冲突
      5. // object 类型是指除了原始类型以外的其它类型
      6. const foo: object = function () {} // [] // {}
      8. // 如果需要明确限制对象类型，则应该使用这种类型对象字面量的语法，或者是「接口」
      9. const obj: { foo: number, bar: string } = { foo: 123, bar: 'string' }
      11. // 接口的概念后续介绍

    • 数组类型

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

    • 元组（Tuple）类型

      1. // 元组（Tuple）
      3. export {} // 确保跟其它示例没有成员冲突
      5. const tuple: [number, string] = [18, 'zce']
      7. // const age = tuple[0]
      8. // const name = tuple[1]
      10. const [age, name] = tuple
      12. // ---------------------
      14. const entries: [string, number][] = Object.entries({
      15. foo: 123,
      16. bar: 456
      17. })
      19. const [key, value] = entries[0]
      20. // key => foo, value => 123

    • 枚举类型

      1. // 枚举（Enum）
      3. export {} // 确保跟其它示例没有成员冲突
      5. // 用对象模拟枚举
      6. // const PostStatus = {
      7. //   Draft: 0,
      8. //   Unpublished: 1,
      9. //   Published: 2
      10. // }
      12. // 标准的数字枚举
      13. // enum PostStatus {
      14. //   Draft = 0,
      15. //   Unpublished = 1,
      16. //   Published = 2
      17. // }
      19. // 数字枚举，枚举值自动基于前一个值自增
      20. // enum PostStatus {
      21. //   Draft = 6,
      22. //   Unpublished, // => 7
      23. //   Published // => 8
      24. // }
      26. // 字符串枚举
      27. // enum PostStatus {
      28. //   Draft = 'aaa',
      29. //   Unpublished = 'bbb',
      30. //   Published = 'ccc'
      31. // }
      33. // 常量枚举，不会侵入编译结果
      34. const enum PostStatus {
      35. Draft,
      36. Unpublished,
      37. Published
      38. }
      40. const post = {
      41. title: 'Hello TypeScript',
      42. content: 'TypeScript is a typed superset of JavaScript.',
      43. status: PostStatus.Draft // 3 // 1 // 0
      44. }
      46. // PostStatus[0] // => Draft

    • 函数类型

      1. // 函数类型
      3. export {} // 确保跟其它示例没有成员冲突
      5. function func1 (a: number, b: number = 10, ...rest: number[]): string {
      6. return 'func1'
      7. }
      9. func1(100, 200)
      11. func1(100)
      13. func1(100, 200, 300)
      15. // -----------------------------------------
      17. const func2: (a: number, b: number) => string = function (a: number, b: number): string {
      18. return 'func2'
      19. }

    • 任意类型

      1. // 任意类型（弱类型）
      3. export {} // 确保跟其它示例没有成员冲突
      5. function stringify (value: any) {
      6. return JSON.stringify(value)
      7. }
      9. stringify('string')
      11. stringify(100)
      13. stringify(true)
      15. let foo: any = 'string'
      17. foo = 100
      19. foo.bar()
      21. // any 类型是不安全的

    • 隐式类型推断

      1. // 隐式类型推断
      3. export {} // 确保跟其它示例没有成员冲突
      5. let age = 18 // 已经推断了为number
      7. // age = 'string' //不能用 了
      9. let foo    //推断为any
      11. foo = 100
      13. foo = 'string'
      15. // 建议为每个变量添加明确的类型标注

    • 类型断言

      1. // 类型断言
      3. export {} // 确保跟其它示例没有成员冲突
      5. // 假定这个 nums 来自一个明确的接口
      6. const nums = [110, 120, 119, 112]
      8. const res = nums.find(i => i > 0)
      10. // const square = res * res
      12. const num1 = res as number
      14. const num2 = <number>res // JSX 下不能使用

    • 接口

      1. // 接口
      3. export {} // 确保跟其它示例没有成员冲突
      5. interface Post {
      6. title: string
      7. content: string
      8. } //接口就是用来约束对象的结构
      10. function printPost (post: Post) {
      11. console.log(post.title)
      12. console.log(post.content)
      13. }
      15. printPost({
      16. title: 'Hello TypeScript',
      17. content: 'A javascript superset'
      18. })
    1.   // 可选成员、只读成员、动态成员
    3.   export {} // 确保跟其它示例没有成员冲突
    5.   // -------------------------------------------
    7.   interface Post {
    8.     title: string
    9.     content: string
    10.     subtitle?: string
    11.     readonly summary: string
    12.   }
    14.   const hello: Post = {
    15.     title: 'Hello TypeScript',
    16.     content: 'A javascript superset',
    17.     summary: 'A javascript'
    18.   }
    20.   // hello.summary = 'other'
    22.   // ----------------------------------
    24.   //动态键值
    25.   interface Cache {
    26.     [prop: string]: string
    27.   }
    29.   const cache: Cache = {}
    31.   cache.foo = 'value1'
    32.   cache.bar = 'value2'

    • 类型断言

      1. // 类（Class）
      3. export {} // 确保跟其它示例没有成员冲突
      5. class Person {
      6. name: string // = 'init name'
      7. age: number
      9. constructor (name: string, age: number) {
      10.  this.name = name
      11.  this.age = age
      12. }
      14. sayHi (msg: string): void {
      15.  console.log(`I am ${this.name}, ${msg}`)
      16. }
      17. }

    • 类的访问修饰符

      1. // 类的访问修饰符
      3. export {} // 确保跟其它示例没有成员冲突
      5. class Person {
      6. public name: string // = 'init name'
      7. private age: number
      8. protected gender: boolean
      10. constructor (name: string, age: number) {
      11.  this.name = name
      12.  this.age = age
      13.  this.gender = true
      14. }
      16. sayHi (msg: string): void {
      17.  console.log(`I am ${this.name}, ${msg}`)
      18.  console.log(this.age)
      19. }
      20. }
      22. class Student extends Person {
      23. private constructor (name: string, age: number) {
      24.  super(name, age)
      25.  console.log(this.gender)
      26. }
      28. static create (name: string, age: number) {
      29.  return new Student(name, age)
      30. }
      31. }
      33. const tom = new Person('tom', 18)
      34. console.log(tom.name)
      35. // console.log(tom.age)
      36. // console.log(tom.gender)
      38. const jack = Student.create('jack', 18)

    • 类的访问修饰符

      1. // 类的只读属性
      3. export {} // 确保跟其它示例没有成员冲突
      5. class Person {
      6. public name: string // = 'init name'
      7. private age: number
      8. // 只读成员
      9. protected readonly gender: boolean
      11. constructor (name: string, age: number) {
      12.  this.name = name
      13.  this.age = age
      14.  this.gender = true
      15. }
      17. sayHi (msg: string): void {
      18.  console.log(`I am ${this.name}, ${msg}`)
      19.  console.log(this.age)
      20. }
      21. }
      23. const tom = new Person('tom', 18)
      24. console.log(tom.name)
      25. // tom.gender = false

    • 类与接口

      1. // 类与接口
      3. export {} // 确保跟其它示例没有成员冲突
      5. interface Eat {
      6. eat (food: string): void
      7. }
      9. interface Run {
      10. run (distance: number): void
      11. }
      13. class Person implements Eat, Run {
      14. eat (food: string): void {
      15.  console.log(`优雅的进餐: ${food}`)
      16. }
      18. run (distance: number) {
      19.  console.log(`直立行走: ${distance}`)
      20. }
      21. }
      23. class Animal implements Eat, Run {
      24. eat (food: string): void {
      25.  console.log(`呼噜呼噜的吃: ${food}`)
      26. }
      28. run (distance: number) {
      29.  console.log(`爬行: ${distance}`)
      30. }
      31. }

    • 抽像类

      1. // 抽像类
      3. export {} // 确保跟其它示例没有成员冲突
      5. abstract class Animal {
      6. eat (food: string): void {
      7.  console.log(`呼噜呼噜的吃: ${food}`)
      8. }
      10. abstract run (distance: number): void
      11. }
      13. class Dog extends Animal {
      14. run(distance: number): void {
      15.  console.log('四脚爬行', distance)
      16. }
      18. }
      20. const d = new Dog()
      21. d.eat('嗯西马')
      22. d.run(100)

    • 泛型

      1. // 泛型
      3. export {} // 确保跟其它示例没有成员冲突
      5. function createNumberArray (length: number, value: number): number[] {
      6. const arr = Array<number>(length).fill(value)
      7. return arr
      8. }
      10. function createStringArray (length: number, value: string): string[] {
      11. const arr = Array<string>(length).fill(value)
      12. return arr
      13. }
      15. function createArray<T> (length: number, value: T): T[] {
      16. const arr = Array<T>(length).fill(value)
      17. return arr
      18. }
      20. // const res = createNumberArray(3, 100)
      21. // res => [100, 100, 100]
      23. const res = createArray<string>(3, 'foo')

    • 泛型

      1. // 类型声明
      2. //安装 yarn add lodash
      3. //npm install @types/lodash
      5. import { camelCase } from 'lodash'
      6. import qs from 'query-string'
      8. qs.parse('?key=value&key2=value2')
      10. // declare function camelCase (input: string): string
      12. const res = camelCase('hello typed')