请简述TypeScript与JavaScript之间的关系？

JavaScript，也称为 JS，是一种符合 ECMAScript 规范的编程语言

TypeScript 是一种强类型、面向对象的编译语言。TypeScript，也称为 TS，是 JavaScript(JS) 遵循 JavaScript 的超集。简而言之，TS 就是 JS 加上更多的附加功能。

TypeScript 代码都被转换成 JavaScript 来执行

TypeScript 相对于 JavaScript 的优势包括：【支持类和模块。静态类型检查。ES6 功能支持。清除库 API 定义。对 JavaScript 打包的内置支持。JavaScript 的超集】

TypeScript 是一种面向对象的语言，它使代码更加可重用、简单、干净和一致。所以比较建议使用 TypeScript 来构建一个庞大的项目

★ 强类型与弱类型

强类型有更强的类型约束，弱类型没有什么类型约束
强类型不允许任意的隐式类型转换，弱类型允许任意的数据隐式类型转换

弱类型

1.运行过程中才会发现问题
2.类型不明确，造成函数功能发生改变，比如+，字符串类型就是字符串拼接，1+'1'='11'
3.对对象索引器错误的用法 obj[true]=100 obj['true']//100

强类型

1.错误更早暴露
2.代码更智能，编码更准确
3.重构更牢靠
4.减少不必要的类型判断

★ 静态类型与动态类型

静态类型：变量声明是类型就明确了，声明过后，类型不允许改变
动态类型：运行阶段才能明确变量类型，而且变量的类型也可以随时发生变化

因为JS没有编译环节，所以js成为了弱类型/动态类型

静态语言需要再编译的过程进行类型检查

js弱类型，小型项目可以用代码进行规避，但是大项目就很麻烦，君子约定有隐患，强制要求有保障；

FLOW

安装flow-bin： yarn add flow-bin -- dev

初始化 flow配置文件 .flowconfig： yarn flow init

代码中添加 //@flow

运行flow： yarn flow

结束运行： yarn flow stop

编译移除注解

1.用flow-remove-types移除

安装 yarn add flow-remove-types -- dev

执行当前目标输出目录 yarn flow-remove-types . -d dist

2.用babel配合flow转换的插件preset-flow移除 yarn add @babel/core @babel/cli @babel/preset-flow --dev

添加配置文件 .babelrc // "presets": ["@babel/preset-flow"]

运行 yarn babel src -d dis t

vscode插件

Flow Language Support

// - 类型推断 推断出来是数据了
function square (n) {
  return n * n
}
// square('100') 报错
square(100)


// - 类型注解
let num: number = 100


// - 原始类型
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]: string } = {}
obj3.key1 = 'value1'
obj3.key2 = 'value2'



// - 函数类型
function foo (callback: (string, number) => void) {
  callback('string', 100)
}

foo(function (str, n) {
  // str => string
  // n => number
})



// - 特殊类型
        // 字面量类型
const a: 'foo' = 'foo'
const type: 'success' | 'warning' | 'danger' = 'success'
        // 声明类型
type StringOrNumber = string | number
const b: StringOrNumber = 'string' // 100
        // Maybe 类型
const gender: ?number = undefined


// - Mixed Any  【Mixed强类型，Any弱类型】

function passMixed (value: mixed) {  //  string | number | boolean | ....
  if (typeof value === 'string') {  //Mixed强类型 里面还是要确定类型的
    value.substr(1)
  }
  if (typeof value === 'number') {
    value * value
  }
}
function passAny (value: any) {  // any 弱类型
  value.substr(1)
  value * value
}


// - 运行环境 API
const element: HTMLElement | null = document.getElementById('app')

1.2.2-TS-类型-flow

★ 强类型与弱类型

弱类型

强类型

★ 静态类型与动态类型

FLOW