1.类型系统

2.为什么需要引入静态类型系统

• 提高代码的可读性

• 方便对代码分析

• 保证重构的可靠性

• 通常 IDE 能更好地支持

• 编码阶段可以捕获类型相关错误

3.Flow vs TypeScript

3.1 区别

• 微软出品，C# 之父 Anders Hejlsberg 参与设计

• 基于 ES6 语法（也包含是 ES7 / ES8 ）

• 类型是可选的

• 可以编译出纯净、 简洁的 JavaScript 代码

• Facebook 出品

• 是一种静态类型检查器，旨在快速查找 JavaScript 应用程序中的错误

• 不是编译器，而是检查器

• 可以很容易地通过 babel 在运行时删除类型注释

3.2 实例

3.2.1 基本

let obj: string;
obj = 'yo';
// Error: Type 'number' is not assignable to type 'string'.
obj = 10;

// types can be inferred (return type)
function sayIt(what: string) {
  return `Saying: ${what}`;
}
const said: string = sayIt(obj);

class Sayer {
  // mandatory
  what: string;

  constructor(what: string) {
    this.what = what;
  }

  // return type if you want to
  sayIt(): string {
    return `Saying: ${this.what}`;
  }
}

let obj: string;
obj = 'yo';
// Error: number: This type is incompatible with string
obj = 10;

function sayIt(what: string) {  
	return `Saying: ${what}`;
}
const said: string = sayIt(obj);

class Sayer {  
	what: string; 
 
	constructor(what: string) {    
		this.what = what;  
	} 

	sayIt(): string {    
		return `Saying: ${this.what}`;  
	}
}

3.2.2 非空类型（Non-Nullable Types）

function foo(num: number) {
  if (num > 10) {
    return 'cool';
  }
}

// cool
const result: string = foo(100);
console.log(result.toString());

// still cool?
console.log(foo(1).toString());

// error at runtime
"Cannot read property 'toString' of undefined";

function foo(num: number) {  
	if (num > 10) {    
		return 'cool';  
	}
}

// error: call of method `toString`.
// Method cannot be called on possibly null value
console.log(foo(100).toString());

// error: return undefined. This type is incompatible with string
function foo(num: number): string {  
	if (num > 10) {    
		return 'cool';  
	}
}

// nullable type: the one inferred
function foo(num: number): string | void {  
	if (num > 10) {    
		return 'cool';  
	}
}

// to fix this, we need to check the result
const fooed: string | void = foo(100);
if (fooed) {  
	fooed.toString();
}

• 在 TypeScript 1 中类型默认是可空的

• 在 TypeScript 1.x 中不为空的限制是可能的了

• 在 Flow 中类型默认是不可空的。

• 在 TysScript 2.x 中在“TSCONFIG.JSON”中使用strictNullChecks默认类型不可空。

3.2.3 注意

class Person {
  name: string;
  constructor() {
    // why no error?
  }
}
const olli: Person = new Person();

// issues error as expected
const daniel: Person = {};

3.3 泛型

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  // just to make this different from cat
  goodBoyFactor: number;
}

class Cat extends Animal {
  purrFactor: number;
}

let cats: Array<Cat> = []; // can only contain cats
let animals: Array<Animal> = []; // can only contain animals

// nope, no cat
cats.push(10);

// nope, no cat

// cool, is a cat
cats.push(new Cat('Purry'));

// cool, cat is a sub type of animal
animals.push(new Cat('Purry'));

let cats: Array<Cat> = []; // can only contain cats
let animals: Array<Animal> = []; // can only contain animals

// error TS2322: Type 'Animal[]' is not assignable to type 'Cat[]'.
//  Type 'Animal' is not assignable to type 'Cat'.
//    Property 'purrFactor' is missing in type 'Animal'.
cats = animals;

// wow, works, but is no longer safe
animals = cats;

// ouch:
cats.forEach(cat => console.log(`Cat: ${cat.name}`));
// Cat: Purry
// Cat: Brutus
// Cat: Twinky

let cats: Array<Cat> = []; // can only contain cats
let animals: Array<Animal> = []; // can only contain animals

// ERROR// property `purrFactor` of Cat. Property not found in Animal
cats = animals;

// same ERROR
animals = cats;

• TypeScript
• 如果要分配的类型具有更特殊的类型参数，则参数类型是兼容的
• 似乎最直观
• 允许明显错误的代码

• Flow
• 使用泛型类型，可以从不变量（精确匹配）、协变（更特殊）和逆变（更常见）中进行选择。
• Flow 中的数组具有不变的参数类型
• 更有表现力
• 更难理解

4.时间线

• 2012-10 ts 诞生

• 2013-09 ts 0.9 正式版发布

• 2014-09 ts 1.0

• 2014-11 flow 诞生

• 2016-07 React v15.2.0 引入 flow

• 2016-08 ts 2.0，引入-strictNullChecks，支持严格空检查

• 2016-11 ts 2.1，支持对象扩展运算符

• 2017-04 ts 2.3，支持迭代器

• 2019-06 ts 3.5，支持Omit 辅助 type

• 2019-10 ts 3.7，支持 Optional Chaining && Nullish Coalescing (可选链式调用“?.”与空值合并运算符“??”)

5.结语