Maison >interface Web >js tutoriel >Comment le type statique javascript analyse-t-il l'utilisation du flux (détails)
Comment le type statique javascript analyse-t-il l'utilisation du flux (détails)
- 不言original
- 2018-09-14 15:46:091728parcourir
Le contenu de cet article explique comment analyser l'utilisation du flux des types statiques JavaScript (détails). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Cause
Après avoir recherché Baidu et Google, je n'ai pas trouvé la documentation chinoise de Flow. Ceci est évidemment hostile au pays. Bien que Flow ne soit généralement pas utilisé, les frameworks généraux l'utiliseront. pour la commodité des utilisateurs. Le framework peut être utilisé avec précision et de nombreux BUG mystérieux peuvent être évités. Comme cela n'existe pas, je prévois de traduire d'abord la partie des annotations de type et d'en installer beaucoup. >
annotation de type de fluxLorsque votre type n'est pas annoté, le flux ne fonctionnera pas, voyons donc comment le type de flux peut être annoté Ce n'est pas // cette annotationtype original. javascript a un total de 6 types de données primitifs.- Booléens
- Chaînes
- Numéros
- null
- non défini (vide dans les types de flux)
- Symboles (nouveau dans ECMAScript 2015, pas encore pris en charge dans Flow) le flux ne prend pas en charge les symboles
Par exemple, comme indiqué ci-dessous, vous ne pouvez transmettre que des .booleans littéraux, sauf que
// @flow
function method(x: number, y: string, z: boolean) {
// ...
}
method(3.14, "hello", true);booleansflow peut reconnaître la conversion de type explicite de !! x et Boolean(0) Le booléen
// @flow
function acceptsBoolean(value: boolean) {
// ...
}
acceptsBoolean(0); // Error! 错误
acceptsBoolean(Boolean(0)); // Works! OK
acceptsBoolean(!!0); // Works! OKnuméronuméro est très clair
// @flow
function acceptsNumber(value: number) {
// ...
}
acceptsNumber(42); // Works!
acceptsNumber(3.14); // Works!
acceptsNumber(NaN); // Works!
acceptsNumber(Infinity); // Works!
acceptsNumber("foo"); // Error!chaîne
// @flow
function acceptsString(value: string) {
// ...
}
acceptsString("foo"); // Works!
acceptsString(false); // Error!Il y aura chaînes cachées dans js Conversion
"foo" + 42; // "foo42"
"foo" + {}; // "foo[object Object]"flow ne prend en charge que la conversion cachée des nombres et des chaînes
// @flow
"foo" + "foo"; // Works!
"foo" + 42; // Works!
"foo" + {}; // Error!
"foo" + []; // Error!Si vous souhaitez l'utiliser, vous devez explicitement convertir
// @flow
"foo" + String({}); // Works!
"foo" + [].toString(); // Works!
"" + JSON.stringify({}) // Works!null et non défini non défini dans le flux est nul
// @flow
function acceptsNull(value: null) {
/* ... */
}
function acceptsUndefined(value: void) {
/* ... */
}
acceptsNull(null); // Works!
acceptsNull(undefined); // Error!
acceptsUndefined(null); // Error!
acceptsUndefined(undefined); // Works! type possible type possible, consiste à utiliser ces valeurs facultatives, vous pouvez utiliser un point d'interrogation pour Marquez-le pour prouver que cette valeur est facultative et non obligatoire
// @flow
function acceptsMaybeString(value: ?string) {
// ...
}
acceptsMaybeString("bar"); // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null); // Works!
acceptsMaybeString(); // Works!Options d'attribut d'objetVous pouvez utiliser un point d'interrogation pour indiquer si un certain attribut de l'objet est disponible. 🎜> // @flow
function acceptsObject(value: { foo?: string }) {
// ...
}
acceptsObject({ foo: "bar" }); // Works!
acceptsObject({ foo: undefined }); // Works!
acceptsObject({ foo: null }); // Error!
acceptsObject({}); // Works!
Cette valeur peut être indéfinie mais elle ne peut pas être nulle
Options pour les paramètres de la fonction
Ajouter un point d'interrogation pour indiquer que les paramètres de cette fonction sont facultatifs
// @flow
function acceptsOptionalString(value?: string) {
// ...
}
acceptsOptionalString("bar"); // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null); // Error!
acceptsOptionalString(); // Works!
Paramètres par défaut de la fonction
Nouvelles fonctionnalités d'es5
// @flow
function acceptsOptionalString(value: string = "foo") {
// ...
}
acceptsOptionalString("bar"); // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null); // Error!
acceptsOptionalString(); // Works!
symbole
le flux ne prend pas en charge le
type littéral
le flux peut non seulement spécifier le type, il peut également spécifier une valeur spécifique Très cool
comme :
// @flow
function acceptsTwo(value: 2) {
// ...
}
acceptsTwo(2); // Works!
// $ExpectError
acceptsTwo(3); // Error!
// $ExpectError
acceptsTwo("2"); // Error!
comme :
// @flow
function getColor(name: "success" | "warning" | "danger") {
switch (name) {
case "success" : return "green";
case "warning" : return "yellow";
case "danger" : return "red";
}
}
getColor("success"); // Works!
getColor("danger"); // Works!
// $ExpectError
getColor("error"); // Error!. Types mixtes (types mixtes)
Vous pouvez faire correspondre plusieurs types
function stringifyBasicValue(value: string | number) {
return '' + value;
}
Vous pouvez indiquer un type comme les génériques de Java (avec des différences), comme le montre l'exemple suivant, le le type renvoyé par la fonction est le même que le type passé dans la fonction.
function identity<T>(value: T): T {
return value;
}
Vous pouvez marquer une fonction comme celle-ci pour accepter tout type de paramètres
function getTypeOf(value: mixed): string {
return typeof value;
}
Lorsque vous utilisez mixte , bien que vous puissiez transmettre n'importe quel type, vous devez savoir de quel type il s'agit lorsque vous le renvoyez, sinon une erreur sera signalée
// @flow
function stringify(value: mixed) {
// $ExpectError
return "" + value; // Error!
}
stringify("foo");
Tout type (n'importe quel type)
Don Ne confondez pas n'importe lequel et mixte, si vous souhaitez ignorer la vérification de type, alors vous pouvez utiliser n'importe lequel
// @flow
function add(one: any, two: any): number {
return one + two;
}
add(1, 2); // Works.
add("1", "2"); // Works.
add({}, []); // Works.
Tant qu'il y a deux situations, vous pouvez utiliser n'importe lequel
-
L'ancien code a ajouté la vérification du type de flux, et l'utilisation d'autres types provoquera de nombreuses erreurs
Lorsque vous savez clairement que votre code ne peut pas réussir la vérification de type,
Évitez toute fuite
Lorsque vous déclarez l'un des paramètres transmis, les paramètres que vous renvoyez sont également tous. Pour éviter cette situation, vous devez le couper
// @flow
function fn(obj: any) /* (:number) */ {
let foo: number = obj.foo; // 这句才是重点, 切断 any
let bar /* (:number) */ = foo * 2;
return bar;
}
let bar /* (:number) */ = fn({ foo: 2 });
let baz /* (:string) */ = "baz:" + bar;Type possible (peut-être type) est-ce celui mentionné ci-dessus ? Le point d'interrogation le marque comme un type facultatifType variable (type variable)
- var - déclarer une variable, affectation sélective
- let - déclarer une variable de niveau bloc, auxiliaire facultatif
- const - déclarer Une variable au niveau du bloc se voit attribuer une valeur et ne peut pas être réaffectée
// @flow const foo /* : number */ = 1; const bar: number = 2;let et var
sont les mêmes que ci-dessus, ces deux types peuvent également être injectés automatiquementMais si vous injectez le type automatiquement, vous n'obtiendrez pas d'erreur lorsque vous réaffecterez le type modifiéSi déclarations, fonctions et autres conditions Le code peut indiquer avec précision de quel type il s'agit, vous pouvez donc éviter les contrôles de flux ou bien signaler des erreurs
// @flow
let foo = 42;
function mutate() {
foo = true;
foo = "hello";
}
mutate();
// $ExpectError
let isString: string = foo; // Error!Essayez d'éviter l'utilisation ci-dessus (recommandation personnelle)Type de fonction (type de fonction)La fonction n'a que deux utilisations, soit des paramètres, soit une valeur de retour
// @flow
function concat(a: string, b: string): string {
return a + b;
}
concat("foo", "bar"); // Works!
// $ExpectError
concat(true, false); // Error!Fonction de déclarationIdentique à ci-dessusFonction flèche
(str: string, bool?: boolean, ...nums: Array<number>) => voidFonction flèche avec rappel
function method(callback: (error: Error | null, value: string | null) => void) {
// 上面表明, 这和函数接受的参数 只能是 error null 和 string 然后染回一个 undefined
}Paramètres facultatifs
// @flow
function method(optionalValue?: string) {
// ...
}
method(); // Works.
method(undefined); // Works.
method("string"); // Works.
// $ExpectError
method(null); // Error!Utilisation des paramètres restants (paramètre rest) function method(...args: Array<number>) {
// ... 使类似java 泛型的 样子 来声明他的类型
}Valeur de retour de la fonction
function method(): number {
// 若是标明了返回类型, 那么你的函数一定要有返回值,如果有条件判断语句,那么每个条件都要有返回值
}Ceci de la fonctionVous n'avez pas besoin de l'annoter. Flow détectera automatiquement le contexte pour déterminer le type de ceci<.>
Mais dans le cas suivant, le flux signalera une erreur function method() {
return this;
}
var num: number = method.call(42);
// $ExpectError
var str: string = method.call(42);
Vous pouvez résoudre le problème ci-dessus comme ceci, puis utiliser %check function truthy(a, b): boolean {
return a && b;
}
function concat(a: ?string, b: ?string): string {
if (truthy(a, b)) {
// $ExpectError 问题出现再truthy 上 可能是 经过了隐式的类型转换
return a + b;
}
return '';
} sur la vérité function truthy(a, b): boolean %checks {
return !!a && !!b;
}
function concat(a: ?string, b: ?string): string {
if (truthy(a, b)) {
return a + b;
}
return '';
}
如果你想跳过 flow 的 类型检查 , 除了用any 再函数上你还可以用 Function 不过这是不稳定的,你应该避免使用他
function method(func: Function) {
func(1, 2); // Works.
func("1", "2"); // Works.
func({}, []); // Works.
}
method(function(a: number, b: number) {
// ...
});
对象类型
对象类型语法
// @flow
var obj1: { foo: boolean } = { foo: true };
var obj2: {
foo: number,
bar: boolean,
baz: string,
} = {
foo: 1,
bar: true,
baz: 'three',
};
可选的对象属性
使用了flow, 对象不能访问不存再的属性, 以前是返回undefined 现在访问报错,如果想知道 访问并且赋值 会不会报错,(我建议你自己试一下)
你可以使用 ? 号来标明 这个属性 是可选的,可以为undefined
// @flow
var obj: { foo?: boolean } = {};
obj.foo = true; // Works!
// $ExpectError
obj.foo = 'hello'; // Error!
标明了类型的属性, 他们可以是undefined(属性赋值为undefined) 或者 空着不写(空对象,), 但是他们不可以是null
密封对象 (seald objects)
密封对象的概念不懂的 可以去了解一下, 就是这个对象不可以修改,但是引用的对象还是可以修改的; 在flow中 这种对象知道所有你声明的属性的值的类型
// @flow
var obj = {
foo: 1,
bar: true,
baz: 'three'
};
var foo: number = obj.foo; // Works!
var bar: boolean = obj.bar; // Works!
// $ExpectError
var baz: null = obj.baz; // Error!
var bat: string = obj.bat; // Error!
而且flow 不允许你往这种对象上面添加新的属性, 不然报错
非密封对象属性的重新赋值
注意了,flow 是静态类型检测工具 并不是动态的, 所以他不能在运行时判断你的变量是什么类型的, 所以他只能判断你这个对象是否是你赋值过的类型之一.
// @flow
var obj = {};
if (Math.random()) obj.prop = true;
else obj.prop = "hello";
// $ExpectError
var val1: boolean = obj.prop; // Error!
// $ExpectError
var val2: string = obj.prop; // Error!
var val3: boolean | string = obj.prop; // Works!
普通对象的非确定属性的类型是不安全的
var obj = {};
obj.foo = 1;
obj.bar = true;
var foo: number = obj.foo; // Works!
var bar: boolean = obj.bar; // Works!
var baz: string = obj.baz; // Works? // 问题在这里 这里的baz 是不存在的属性, 把他定位string 并且给他一个undefined 是可行的, 但是这部安全, 避免使用
额外对象类型 (extra object type)
在一个期望正常对象类型的地方,传一个有着额外属性的对象是安全的
// @flow
function method(obj: { foo: string }) {
// ...
}
method({
foo: "test", // Works!
bar: 42 // Works!
});
flow 也支持精确的对象类型, 就是对象不能具有额外的属性;
// @flow
var foo: {| foo: string |} = { foo: "Hello", bar: "World!" }; // Error!
如果你想结合精确对象, 需要用到 type 关键字, 我也不知道这个算不算操作符,应该是flow 底层编译支持的, 原声js 并没有这个东西
// @flow
type FooT = {| foo: string |};
type BarT = {| bar: number |};
type FooBarFailT = FooT & BarT; // 通过这个& 操作可以把两种情况合并,匹配到 foo 和 bar 同时都有的对象 而且类型必须跟声明的一样
type FooBarT = {| ...FooT, ...BarT |};
const fooBarFail: FooBarFailT = { foo: '123', bar: 12 }; // Error!
const fooBar: FooBarT = { foo: '123', bar: 12 }; // Works!
对象的maps (objects as maps)
虽然有了maps 这个数据结构 但是把对象当作maps 使用 依然很常见
// @flow
var o: { [string]: number } = {}; // 制定key值的类型, 可以设置这个类型下的任何key值
o["foo"] = 0;
o["bar"] = 1;
var foo: number = o["foo"];
索引也是一个可选的名字
// @flow
var obj: { [user_id: number]: string } = {};
obj[1] = "Julia";
obj[2] = "Camille";
obj[3] = "Justin";
obj[4] = "Mark";
索引可以和命名属性混合
// @flow
var obj: {
size: number,
[id: number]: string // 此处混合了 索引和命名
} = {
size: 0
};
function add(id: number, name: string) {
obj[id] = name;
obj.size++;
}
对象类型(Object Type)
有时候你想创任意的对象, 那么你就可以传一个空对象,或者一个Object 但是后者是不安全的, 建议避免使用
数组类型
let arr: Array<number> = [1, 2, 3]; let arr1: Array<boolean> = [true, false, true]; let arr2: Array<string> = ["A", "B", "C"]; let arr3: Array<mixed> = [1, true, "three"]
简写
let arr: number[] = [0, 1, 2, 3]; let arr1: ?number[] = null; // Works! let arr2: ?number[] = [1, 2]; // Works! let arr3: ?number[] = [null]; // Error!
?number[] === ?Array
数组的访问时不安全的
// @flow let array: Array<number> = [0, 1, 2]; let value: number = array[3]; // Works.// 这里超出了数组的容量
你可以通过下面这样的做法来避免, flow 并未修复这个问题, 所以需要开发者自己注意
let array: Array<number> = [0, 1, 2];
let value: number | void = array[1];
if (value !== undefined) {
// number
}
$ReadOnlyArray
这个可以标记一个只能读 不能写的数组
// @flow const readonlyArray: $ReadOnlyArray\<number> = [1, 2, 3]
但是引用类型还是可以写的
// @flow
const readonlyArray: $ReadOnlyArray<{x: number}> = [{x: 1}];
readonlyArray[0] = {x: 42}; // Error!
readonlyArray[0].x = 42; // OK
tuple types
这是一种新的类型, 是一种短的列表,但是时又限制的集合,在 javascript 中这个用数组来声明
// 一个类型对应一个 item let tuple1: [number] = [1]; let tuple2: [number, boolean] = [1, true]; let tuple3: [number, boolean, string] = [1, true, "three"];
可以把取出的值 赋值给具有一样类型的变量, 如果index 超出了索引范围,那么就会返回undefined 在 flow 中也就是 void
// @flow let tuple: [number, boolean, string] = [1, true, "three"]; let num : number = tuple[0]; // Works! let bool : boolean = tuple[1]; // Works! let str : string = tuple[2]; // Works!
如果flow 不知道你要访问的时是那么类型, 那么他忽返回所有可能的类型,
// @flow
let tuple: [number, boolean, string] = [1, true, "three"];
function getItem(n: number) {
let val: number | boolean | string = tuple[n];
// ...
}
tuple类型的长度一定要严格等于你声明时候的长度
tuple 不能匹配 数组类型, 这也是他们的差别
tuple 只能用 array 的 join() 方法 其他的都不可以用,否则报错
class type
javascript 的class 再flow 可以是值 也可以是类型
class MyClass {
// ...
}
let myInstance: MyClass = new MyClass();
class 里的字段一定要声明类型了才可以用
// @flow
class MyClass {
prop: number;// 如果没有这行, 下的赋值会报错,因为prop 没确定类型
method() {
this.prop = 42;
}
}
再外部使用的字段,必须要再class 的块里面声明一次
// @flow
function func_we_use_everywhere (x: number): number {
return x + 1;
}
class MyClass {
static constant: number; // 内部声明
static helper: (number) => number;
method: number => number;
}
MyClass.helper = func_we_use_everywhere
MyClass.constant = 42 // 外部使用
MyClass.prototype.method = func_we_use_everywhere
声明并且赋值的语法
class MyClass {
prop: number = 42;
}
类的泛型
class MyClass<A, B, C> {
property: A;
method(val: B): C {
// ...
}
}
如果你要把class作为一个类型,你声明了几个泛型, 你就要传几个参数
// @flow
class MyClass<A, B, C> {
constructor(arg1: A, arg2: B, arg3: C) {
// ...
}
}
var val: MyClass<number, boolean, string> = new MyClass(1, true, 'three');
别名类型(type aliases)
跟上面提到的 type 关键字一样
// @flow
type MyObject = {
foo: number,
bar: boolean,
baz: string,
};
这个是类型别名 可以在不同的地方复用
// @flow
type MyObject = {
// ...
};
var val: MyObject = { /* ... */ };
function method(val: MyObject) { /* ... */ }
class Foo { constructor(val: MyObject) { /* ... */ } }
别名泛型
type MyObject<A, B, C> = {
property: A,
method(val: B): C,
};
别名泛型是参数化的,也就是你用了以后, 你声明的所有参数 你全部都要传
// @flow
type MyObject<A, B, C> = {
foo: A,
bar: B,
baz: C,
};
var val: MyObject<number, boolean, string> = {
foo: 1,
bar: true,
baz: 'three',
};
不透明的类型别名(opaque type aliases)
通过类型系统的加强抽象
不透明类型别名是不允许访问定义在文件之外的的基础类型的类型别名.
opaque type ID = string; // 一个新的关键字 并且这是声明一个不透明类型别名的语法
不透明类型别名可以复用
// @flow
// 在这个例子,我理解的是 外部只能访问到这个文件的ID 类型, 并不能访问到这个文件里面的string 基础类型. 这就是不透明的类型别名
opaque type ID = string;
function identity(x: ID): ID {
return x;
}
export type {ID};
你可以可选的加一个子类型约束 在一个 不透明的类型别名的类型后面
opaque type Alias: SuperType = Type;
任何类型都可以作为父类型 或者 不透明的类型别名 的类型
opaque type StringAlias = string;
opaque type ObjectAlias = {
property: string,
method(): number,
};
opaque type UnionAlias = 1 | 2 | 3;
opaque type AliasAlias: ObjectAlias = ObjectAlias;
opaque type VeryOpaque: AliasAlias = ObjectAlias;
不透明别名类型 的类型检查
在文件内部
在文件内部跟正常的类型别名一样
//@flow
opaque type NumberAlias = number;
(0: NumberAlias);
function add(x: NumberAlias, y: NumberAlias): NumberAlias {
return x + y;
}
function toNumberAlias(x: number): NumberAlias { return x; }
function toNumber(x: NumberAlias): number { return x; }
在文件外部
当你inport 一个 不透明的类型别是时候,他会隐藏基础类型
exports.js
export opaque type NumberAlias = number;
imports.js
import type {NumberAlias} from './exports';
(0: NumberAlias) // Error: 0 is not a NumberAlias!
function convert(x: NumberAlias): number {
return x; // Error: x is not a number!
}
子类型约束(subTyping Constraints)
当你添加一个子 类型约束在一个不透明的类型别名上时, 我们允许不透明类型在被定义文件的外部被用作父类型
exports.js
export opaque type ID: string = string;
imports.js
import type {ID} from './exports';
function formatID(x: ID): string {
return "ID: " + x; // Ok! IDs are strings.
}
function toID(x: string): ID {
return x; // Error: strings are not IDs.
}
当你创建一个拥有子类型约束的 不透明类型别名, 这个类型在类型中的位置一定要是这个类型的子类型在父类中的位置 (这里的概念应该是跟泛型的概念差不多, 不相关的类型不可以强制转换)
//@flow
opaque type Bad: string = number; // Error: number is not a subtype of string
opaque type Good: {x: string} = {x: string, y: number};
泛型
不透明类型别名 有他们自己的泛型, 但是他们跟正常的泛型是差不多的
// @flow
opaque type MyObject<A, B, C>: { foo: A, bar: B } = {
foo: A,
bar: B,
baz: C,
};
var val: MyObject<number, boolean, string> = {
foo: 1,
bar: true,
baz: 'three',
};
接口类型 (interface Types)
接口可以使一些拥有相同方法的类归为一类
// @flow
interface Serializable {
serialize(): string;
}
class Foo {
serialize() { return '[Foo]'; }
}
class Bar {
serialize() { return '[Bar]'; }
}
const foo: Serializable = new Foo(); // Works!
const bar: Serializable = new Bar(); // Works!
如果你怕出错, 你可以手动的 使用 implements 告诉flow 哪些类实现了哪些接口,这可以预防你修改class 的时候出现错误
// @flow
interface Serializable {
serialize(): string;
}
class Foo implements Serializable {
serialize() { return '[Foo]'; } // Works!
}
class Bar implements Serializable {
// $ExpectError
serialize() { return 42; } // Error! // 不能返回一个number
}
不要忘记了接口可以同时实现多个
接口的属性也是可以可选的
interface MyInterface {
property?: string;
}
接口跟maps 联合
interface MyInterface {
[key: string]: number;
}
接口泛型
interface MyInterface<A, B, C> {
property: A;
method(val: B): C;
}
规矩还在,泛型你用了几个 ,你使用的时候 就要传递几个参数
// @flow
interface MyInterface<A, B, C> {
foo: A;
bar: B;
baz: C;
}
var val: MyInterface<number, boolean, string> = {
foo: 1,
bar: true,
baz: 'three',
};
接口属性的 只读,与只写
接口属性默认是不可变的, 但是你可以添加修饰符让他们变成 covariant只读或者Contravariance 只写;(关于不可变想了解的请看这里)
interface MyInterface {
+covariant: number; // read-only 只读 不能修改
-contravariant: number; // write-only 只能修改, 不能读取
}
混合只读
interface MyInterface {
+readOnly: number | string;
}
允许指定多个类型
// @flow
// $ExpectError
interface Invariant { property: number | string }
interface Covariant { +readOnly: number | string }
var value1: Invariant = { property: 42 }; // Error!
var value2: Covariant = { readOnly: 42 }; // Works!
协变(covariant) 属性 通常是只读的,他比正常的属性更有用
// @flow
interface Invariant { property: number | string }
interface Covariant { +readOnly: number | string }
function method1(value: Invariant) {
value.property; // Works!
value.property = 3.14; // Works!
}
function method2(value: Covariant) {
value.readOnly; // Works!
// $ExpectError
value.readOnly = 3.14; // Error!
}
contravariant 逆变 只写属性 允许你传递更少的类型
// @flow
interface Invariant { property: number }
interface Contravariant { -writeOnly: number }
var numberOrString = Math.random() > 0.5 ? 42 : 'forty-two';
// $ExpectError
var value1: Invariant = { property: numberOrString }; // Error!
var value2: Contravariant = { writeOnly: numberOrString }; // Works! 可以看到 上面声明了 number 可是这个numberOrString 有两种返回值, 他只能匹配一种 他野是可以传递的
通常比正常的属性更有用
interface Invariant { property: number }
interface Contravariant { -writeOnly: number }
function method1(value: Invariant) {
value.property; // Works!
value.property = 3.14; // Works!
}
function method2(value: Contravariant) {
// $ExpectError
value.writeOnly; // Error!
value.writeOnly = 3.14; // Works!
}
联盟类型 (union types)
类型的值可能是很多类型之一
使用 | 分开
Type1 | Type2 | ... | TypeN
可以竖直写
type Foo = | Type1 | Type2 | ... | TypeN
联盟类型可以组合
type Numbers = 1 | 2; type Colors = 'red' | 'blue' type Fish = Numbers | Colors;
联盟类型请求一个,但是所有的都要处理
当你调用一个要接受联盟类型的函数的时候,你一定要传入一个在联盟类型中的类型,但是在函数里面你要处理所有的类型.
// @flow
// $ExpectError
function toStringPrimitives(value: number | boolean | string): string { // Error!
if (typeof value === 'number') {
return String(value);
} else if (typeof value === 'boolean') {
return String(value);
}
// 注意这个函数会报错是因为 你用了if 条件语句 并没有在所有的情况中返回值, 如果返回了undefined 那么就不符合 string 类型,所以就报错了
}
联盟改进
这里是上面演示的说明,可以使用 typeof 关键字来应对逐一的类型
// @flow
function toStringPrimitives(value: number | boolean | string) {
if (typeof value === 'number') {
return value.toLocaleString([], { maximumSignificantDigits: 3 }); // Works!
}
// ...
}
脱节联盟 (disjoint Unions)
概念就不说了,难懂来看一下例子
想象我们有一个处理发送了请求之后响应的函数,当请求成功你那个的时候,我们得到一个对象,这个对象有 一个 success 属性 值为true 还有一个值我们需要更新的值, value
{ success: true, value: false };
当请求失败的时候,我们得到一个对象这个对象有一个 success 属性 值为false,和一个 error 属性,定义了一个错误.
{ success: false, error: 'Bad request' };
我们可以尝试用一个对象去描述这两个对象, 然而我们很快就发生了一个问题, 就是我们知道一个属性的存在与否(value 或者 error ) 取决于success(因为success为 true 那么 value才会存在) 但是 Flow 不知道.
// @flow
type Response = {
success: boolean,
value?: boolean,
error?: string
};
function handleResponse(response: Response) {
if (response.success) {
// $ExpectError
var value: boolean = response.value; // Error!
} else {
// $ExpectError
var error: string = response.error; // Error!
}
}
取而代之,如果我们创建一个两个对象类型的联盟类型,Flow 会知道基于success 属性 我们会使用哪个对象
// @flow
type Success = { success: true, value: boolean };
type Failed = { success: false, error: string };
type Response = Success | Failed; (这就是脱节联盟)
function handleResponse(response: Response) {
if (response.success) {
var value: boolean = response.value; // Works!
} else {
var error: string = response.error; // Works!
}
}
脱节联盟与精确类型仪器使用
脱节连门要求你使用单一的属性去区分每个对象类型,你不能用两个不同的属性,去区分两个不同的类型
// @flow
type Success = { success: true, value: boolean };
type Failed = { error: true, message: string };
function handleResponse(response: Success | Failed) {
if (response.success) {
// $ExpectError
var value: boolean = response.value; // Error!
}
}
// 不懂的跟上面的对比一下, 两个对象必须要有一个属性是相同的
然而 你可以用精确对象类型
// @flow
type Success = {| success: true, value: boolean |};
type Failed = {| error: true, message: string |};
// 精确的也就是说 不可以扩展对象, 他该是哪个就是哪个 不存在混乱
type Response = Success | Failed;
function handleResponse(response: Response) {
if (response.success) {
var value: boolean = response.value;
} else {
var message: string = response.message;
}
}
交叉类型(intersection types)
所有不同类型的类型值
// @flow
type A = { a: number };
type B = { b: boolean };
type C = { c: string };
function method(value: A & B & C) {
// ...
}
// $ExpectError
method({ a: 1 }); // Error!
// $ExpectError
method({ a: 1, b: true }); // Error!
method({ a: 1, b: true, c: 'three' }); // Works!
可以把上面的连门类型理解为或 把交叉类型理解为& 语法都是一样的
type Foo = & Type1 & Type2 & ... & TypeN type Foo = Type1 & Type2; type Bar = Type3 & Type4; type Baz = Foo & Bar;
我们在函数中和联盟函数相反, 我们不如传入所有的类型,但是在函数里面我们只需要做处理一种情况就OK
// @flow
type A = { a: number };
type B = { b: boolean };
type C = { c: string };
function method(value: A & B & C) {
var a: A = value;
var b: B = value;
var c: C = value;
}
不可能的交叉类型
你总不能一个值 是数字的同时又是字符串吧
// @flow
type NumberAndString = number & string;
function method(value: NumberAndString) {
// ...
}
// $ExpectError
method(3.14); // Error!
// $ExpectError
method('hi'); // Error!
交叉对象类型
当你创建一个交叉对象类型时,你是在合并了他们所有的属性在一个对象上
// @flow
type One = { foo: number };
type Two = { bar: boolean };
type Both = One & Two;
var value: Both = {
foo: 1,
bar: true
};
如果声明的属性类型相同, 就相当于你声明了一个 交叉类型的属性
typeof Types (这个不好翻译 因为 typeof 是js中的一个关键字,在此我就不翻译这个了)
js有一个typeof 关键字,他会返回一个字符串说明
然而他是有限制的,typeof 对象 数组 null 都是 object
所以在flow中, 他把这个关键字重载了
// @flow let num1 = 42; let num2: typeof num1 = 3.14; // Works! // $ExpectError let num3: typeof num1 = 'world'; // Error! let bool1 = true; let bool2: typeof bool1 = false; // Works! // $ExpectError let bool3: typeof bool1 = 42; // Error! let str1 = 'hello'; let str2: typeof str1 = 'world'; // Works! // $ExpectError let str3: typeof str1 = false; // Error!
你可以typeof 任何值
// @flow
let obj1 = { foo: 1, bar: true, baz: 'three' };
let obj2: typeof obj1 = { foo: 42, bar: false, baz: 'hello' };
let arr1 = [1, 2, 3];
let arr2: typeof arr1 = [3, 2, 1];
引用类型的 typeof 继承行为
你可以用typeof 的返回值作为一个类型
但是如果你typeof 一个指定了字面量类型的 变量, 那么那个类型就是字面量的值了
// @flow let num1: 42 = 42; // $ExpectError let num2: typeof num1 = 3.14; // Error! // 看这里 num1 的type 指定了是 42 那么 typeof num1 不会返回number 会返回 42 所以3.14 不符合 let bool1: true = true; // $ExpectError let bool2: typeof bool1 = false; // Error! let str1: 'hello' = 'hello'; // $ExpectError let str2: typeof str1 = 'world'; // Error!
其他类型的 typeof 继承行为
// @flow
class MyClass {
method(val: number) { /* ... */ }
}
class YourClass {
method(val: number) { /* ... */ }
}
// $ExpectError
let test1: typeof MyClass = YourClass; // Error!
let test2: typeof MyClass = MyClass; // Works!
// 看这里 es6 的类并不是一种类型, 只是一种语法糖而已,内部机制还是原型链, 所以 typeof MyClass 不会等于YourClass
镶嵌表达式类型(type casting expression)
把一个值镶嵌到不同的类型
有时不使用函数和变量去声明一个类型是很有用的,所以flow 支持多种方式去干这个事情(声明一个类型)
语法
(value: Type)
这个表达式可以出现在表达式能出现的任何地方
let val = (value: Type);
let obj = { prop: (value: Type) };
let arr = ([(value: Type), (value: Type)]: Array<Type>);
也可以这样写
(2 + 2: number);
类型断言
// @flow let value = 42; // 这个的作用就是把变量 嵌入到一个类型中去 (value: 42); // Works! (value: number); // Works! (value: string); // Error!
类型嵌入
这个表达式是由返回值的,如果你接收了这个返回值,你会得到一个新的类型
// @flow let value = 42; (value: 42); // Works! (value: number); // Works! let newValue = (value: number); // $ExpectError (newValue: 42); // Error! (newValue: number); // Works!
通过 any 去转换类型
let value = 42; (value: number); // Works! // $ExpectError (value: string); // Error! // 这里先把value 变成any 再变成string let newValue = ((value: any): string); // $ExpectError (newValue: number); // Error! // 生效了 (newValue: string); // Works!
但是合适不安全且不推荐的,但是有时候他很有用
通过类型断言来进行类型检查
若是你想检查一个对象的类型,你不能直接 typeof 你得先用 断言表达式去转换然后再用typeof 去检查
想这样:
function clone(obj: { [key: string]: mixed }) {
const cloneobj = {};
Object.keys(obj).forEach(key => {
cloneobj[key] = obj[key];
});
return ((cloneobj: any): typeof obj);
}
const obj = clone({foo: 1})
(obj.foo: 1) // 出错!
function clone(obj) {
(obj: { [key: string]: mixed });
const cloneobj = {};
Object.keys(obj).forEach(key => {
cloneobj[key] = obj[key];
});
return ((cloneobj: any): typeof obj);
}
const obj = clone({foo: 1})
(obj.foo: 1) // ok!
工具类型
flow 提供了一系列的 工具类型, 以便于再一些常见场景使用
详情看这里
模块类型
上面由类似的, 就是一个export 一个 import
注释类型
感觉没多大用处, 可以做一些标记,这个可以在不通过flow 编译的情况下直接使用在js文件上
// @flow
/*::
type MyAlias = {
foo: number,
bar: boolean,
baz: string,
};
*/
function method(value /*: MyAlias */) /*: boolean */ {
return value.bar;
}
method({ foo: 1, bar: true, baz: ["oops"] });
看完能看懂所有flow 代码了吧...
相关推荐：
Flow之一个新的Javascript静态类型检查器_javascript技巧
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Combien de façons existe-t-il de déclarer des objets javascript ? Six façons de déclarer des objets javascriptArticle suivant：Combien de façons existe-t-il de déclarer des objets javascript ? Six façons de déclarer des objets javascript
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript