TypeScript前篇类型系统与Flow

TypeScript是一门基于JavaScript之上的编程语言，它解决了JavaScript语言自有的类型系统的不足。通过使用Type Scrip大大的提高了代码的可靠程度。

类型系统

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

• 弱类型语言层面不会限制实参类型
• 强类型有更强的类型约束，而弱类型中几乎没有什么约束
• 强类型中不允许有随意的隐式类型转换，而弱类型是允许的
• 强类型在编译阶段去限制类型，而弱类型是在运行阶段通过代码层面逻辑判断限制类型
• 变量类型可以随时改变的特点不是强弱类型的差异

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

• 静态类型：一个变量声明时他的类型就是明确的，且声明之后他的类型就不允许再修改
• 动态类型：运行阶段才能够明确变量类型，且变量类型可以随时改变（也可以说，在动态类型语言中的变量没有类型，而变量当中存放的值时有类型的）

JavaScript的类型系统特征是弱类型且动态类型，因此它缺失了类型系统的可靠性。
例如

// 例子一
const obj = {};
obj.foo() // obj.foo is not a function(js只有在运行阶段才能报出异常。)

// 例子二
function sum (a,b) {
    return a + b;
}
console.log(sum(100, 100)); // 200
console.log(sum(100, '100')); // 100100

// 例子三
const obj = {}
obj[true] = 100
console.log(obj['true']) // 100

• 强类型语言的优势
  1. 错误更早暴露（在编码阶段提前消灭一大步异常）
  2. 强类型的代码更加智能，编码更准确（开发工具智能提示）
  3. 重构更加牢靠
  4. 减少代码层面不必要的判断

Flow（JavaSript的类型检查器）

• flow安装

npm install --save-dev flow-bin

添加"flow"在package.json文件下的scripts字段里

初始化flow

npm run flow init

之前项目中会出现一个.flowconfig的配置文件

运行flow

npm run flow

测试

// @flow
function sum(a: number, b: number) {
    return a + b;
}
sum(100, 100)
sum('100', '100')

注意：

1. 如有要为代码添加flow检查，需要在代码前添加@flow的注释，否则该文件不会被flow检查。
2. 因为:number是ts的语法，js里面写编辑器里面会报错，所以可以手动关闭vscode里面的js语法类型检测（文件=》首选项=》设置=》JavaScript Validate=》禁用）

启动flow查看运行状态

npm run flow status

关闭flow

npm run flow stop

• 使用babel对flow代码进行转码
  如果给数据添加类型声明是通过第二种方式，直接修改的js代码，那么代码是不能正常运行的我们需要通过babel对代码进行转码之后才能正常运行。

1. 安装babel以及presets

npm i babel-cli babel-preset-flow -D

2. 配置package.json添加build命令调用babel

   {
    "scripts": {
        "build": "babel ./src -d ./dist"
    }
   }

3. 执行build命令对文件进行转换

npm run build

• vscode中安装Flow Language Support增加编辑器对类型的检测，不需要每一次都运行命令行检测

flow 类型推断

根据代码当中的使用情况推断出变量类型

类型注解

// @flow
// 参数类型注解
function square (n: number) {
    return n * n;
}
// 变量类型注解
let num: number = 100
// 返回值类型注解
function foo (): number {
    return 1
}
// 没有返回值则用void
function foo1(): void {
}

原始类型

const a: string = 'foobar'
const b: number = Infinity // NaN // 100
const c: boolean = false // true
const d: null = null
const e: void = undefined
const f: symbol = Symbol()

数组类型

const arr1: Array<number> = [1, 2, 3]
const arr2: number[] = [1, 2, 3]
// 元祖
const foo: [string, number] = ['foo', 100]

对象类型

const obj1: { foo: string, bar: number} = {foo: 'string', bar: 100};
const obj2: {foo?: string, bar: number} = {bar: 100}
const obj3: {[string]: sring} = {}
obj3.key1 = 'value1'
obj3.key2 = 'value2'

函数类型

// 函数接收回调函数的类型限制
function foo (callback: (string, number) => void) {
    callback('string', 100)
}
foo(function (str, n) {
    // str => string
    // n => number
})

特殊类型

// @flow
 const a: 'foo' = 'foo';
 const type: 'success' | 'warning' | 'danger' = 'success' // 联合类型|或类型
//  const b: string | number = 'string' // 100
 type StringOrNumber = string | number // 用type关键词去给类型声明一个别名
 const b: StringOrNumber = 'string' // 100
 const gender: ?number = undefined // maybe类型（在原本的基础上扩展了null和undefined）相当于const gender: number | null | void = undefined

Mixed Any

// mixed 所有类型的联合类型（强类型）
function passMixed (value: mixed) {
    value.substr(1) // 报错
    value*value // 报错
}
passMixed('string')
passMixed(100)

// any 接受任何类型的数据（弱类型）
function passMixed (value: any) {
    value.substr(1)
    value*value
}
passMixed('string')
passMixed(100)

以上就是本次笔记的内容啦，满满的收货呀~~~