TypeScript的学习一

TypeScript解决JavaScript类型系统的问题，基于javascript之上的编程语言，解决了javascript自有的类型系统的不足，大大提高代码的可靠程度
类型系统——强类型与弱类型
强类型与弱类型（类型安全）
静态类型与动态类型（类型检查）
强类型：语言层面限制函数的实参类型必须与形参类型相同

弱类型语言层面不会限制实参的类型
由于这种强弱类型之分根本不是某一个权威机构的定义，强类型有更强的类型约束，而弱类型中几乎没有什么约束，强类型语言中不允许任意的隐式类型转换，而弱类型语言则允许任意的数据隐式类型转换
强类型不允许随意的隐式类型转换，而弱类型是允许的，变量类型允许随时改变的特点，不是强弱类型的差异

类型系统-静态类型与动态类型
静态类型：一个变量声明时它的类型就是明确的，声明过后，它的类型就不允许再修改。
动态类型：运行阶段才能够明确变量类型，而且变量的类型随时可以改变，动态类型语言中的变量没有类型，变量中存放的值是有类型的，javascript就是标准的动态语言

javascript类型系统特征——弱类型且动态类型
缺失了类型系统的可靠性，为什么javscript不是强类型/静态类型？早前的javascript应用简单，javascript是一个脚本语言没有编译环节，大规模应用下，这种优势就变成了短板

弱类型的问题

const obj = {};
obj.foo();

弱类型不会立即检查报错，只有运行了才知道代码异常

function sum(a, b) {
  return a + b;
}
console.log(sum(100, 100));
console.log(sum(100, "100"));

类型不确定造成的，要自己写约定

const obj = {};
obj[true] = 100;
console.log(obj["true"]);

true自动转换成了字符串类型
上面的问题在代码量少的时候可以写一些约定去规避，如果在一些开发周期比较长的大规模项目容易出错，君子约定有隐患，强制要求有保障，强类型能消灭一大部分可能出现的问题，不必在运行中进行debugger

强类型的优势

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

Flow概述
javascript的类型检查器，通过添加类型注解的方式来标记变量或参数应该是什么类型的

Flow只是一个小工具，而typescript是一门全新的语言

flow快速上手
先安装命令

npm add flow-bin --dev

去掉 vscode的javascript校验

npm flow 启动服务
npm flow stop 停止服务
npm flow init

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

检查出了两个错误

编译——通过编译移除[类型注解]
flowRemoveTypes

npm flow-remove-types src -d dist

Babel

npm add @babel/core @babel/cli @babel/preset-flow --dev

npm babel src -d dist

开发工具插件——Flow Language Support


Flow类型推断——Type Inference

能够推断出来n应该接收number类型，但是传的是字符串，所以会出现提示

Flow类型注解——Type Annotations


函数返回值的类型注解

原始类型——Primitive Types

数组类型Array Types

对象类型Object Types

在成员后面加一个？就是这个成员可有可无的

函数类型Function Types
一般对函数的参数类型和返回类型的约束

回调函数约定了要两个参数，一个String,一个number,返回值是void就是没有返回值

特殊类型
加粗样式
字面量类型

a变量只能存foo字符串
type变量只能存success,warning,denger这三个字符串之一
b变量只能存string类型或number类型

maybe类型

Gender可以是number，null,undefined

Mixed&Any任意类型

Any是弱类型，Mixed是强类型
更多参考资料
https：//www.saltycrane.com/cheat-sheets/flow-type/latest/