FLOW THE
WAY YOU LIE
GENERAL FLOW
ANNOTATION
// @flow
function concat(a: string, b: string) {
return a + b;
}
concat("A", "B"); // Works!
concat(1, 2); // Error!
function acceptsBoolean(value: boolean) {
// ...
}
acceptsBoolean(true); // Works!
acceptsBoolean(false); // Works!
acceptsBoolean("foo"); // Error!
PRIMITIVE
// @flow
function acceptsNumber(value: number) {
// ...
}
acceptsNumber(42); // Works!
acceptsNumber(3.14); // Works!
acceptsNumber(NaN); // Works!
acceptsNumber(Infinity); // Works!
acceptsNumber("foo"); // Error!
function acceptsString(value: string) {
// ...
}
acceptsString("foo"); // Works!
acceptsString(false); // Error!
VARIABLE
// @flow
let foo: number = 1;
foo = 2; // Works!
foo = "3"; // Error!
let bar = 42;
if (Math.random()) bar = true;
if (Math.random()) bar = "hello";
let isOneOf: number | boolean | string = bar; // Works!
OBJECT
// @flow
const obj1: { foo: boolean } = { foo: true };
const obj2: {
foo: number,
bar: boolean,
baz: string,
} = {
foo: 1,
bar: true,
baz: 'three',
};
const obj = {};
obj.prop = true;
obj.prop = "hello";
var val1: boolean = obj.prop; // Error!
var val2: string = obj.prop; // Works!
ARRAY
// @flow
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];
// ?Type[] === ?Array<T> !== Array<?T>
let arr1: ?number[] = null; // Works!
let arr2: ?number[] = [1, 2]; // Works!
let arr3: ?number[] = [null]; // Error!
let arr1: (?number)[] = null; // Error!
let arr2: (?number)[] = [1, 2]; // Works!
let arr3: (?number)[] = [null]; // Works!
FUNCTION
// @flow
function concat(a: string, b: string): string {
return a + b;
}
concat("foo", "bar"); // Works!
concat(true, false); // Error!
function method(): boolean {
if (Math.random() > 0.5) {
return true;
}
} // Error!
function method(func: () => mixed) {
// ...
}
ENUM
// @flow
// 'red', 'blue', and 'green' are valid colors.
type Color = 'red' | 'blue' | 'green';
type Chip = {
// `color` can only be a valid color.
color: Color,
};
// `createChip` only takes values of type `Color`.
function createChip(color: Color): Chip {
return {
color,
};
}
FLOW GENERICS
BEHAVIOR
// @flow
function identity(value: string): string {
return value;
}
function identity<T>(value: T): T {
return value;
}
function identity(func: <T>(param: T) => T) {
// ...
}
function identity<T>(value: T): T {
value = "foo"; // Error!
return value; // Error!
}
type Item<T> = {
foo: T,
bar: T,
};
UKNOWN FLOW
ANY
// @flow
function add(one: any, two: any): number {
return one + two;
}
add(1, 2); // Works.
add("1", "2"); // Works.
add({}, []); // Works.
function getNestedProperty(obj: any) {
return obj.foo.bar.baz; // Runtime errors BUT will not be caught by Flow
}
getNestedProperty({});
function fn(obj: any) /* (:any) */ {
let foo /* (:any) */ = obj.foo;
let bar /* (:any) */ = foo * 2;
return bar;
}
let bar /* (:any) */ = fn({ foo: 2 });
let baz /* (:any) */ = "baz:" + bar;
MIXED
// @flow
function stringify(value: mixed) {
return "" + value; // Error!
}
stringify("foo");
// Figure out the type before any usage
function stringify(value: mixed) {
if (typeof value === 'string') {
return "" + value; // Works!
} else {
return "";
}
}
stringify("foo");
FLOW TYPED
SYNTAX
// @flow
declare module 'aws-sdk/dynamodb/document_client' {
import type { Request } from 'aws-sdk/request';
declare type AttributeMap = { [key: string]: AttributeValue };
declare type AttributeName = string;
declare type AttributeValue = mixed;
declare type ConditionExpression = string;
declare type ConsistentRead = boolean;
declare type ExpressionAttributeNameMap = { [key: string]: AttributeName };
declare type ExpressionAttributeValueMap = { [key: string]: AttributeValue };
declare type IndexName = string;
declare type ItemList = AttributeMap[];
declare type Key = { [key: string]: AttributeValue };
declare type KeyExpression = string;
declare type ReturnValue = 'NONE'|'ALL_OLD'|'UPDATED_OLD'|'ALL_NEW'|'UPDATED_NEW'|string;
declare type TableName = string;
declare type UpdateExpression = string;
declare interface DocumentClient {
constructor(): void;
query(params: QueryInput, cb?: (err: Error, data: QueryOutput) => void): Request<QueryOutput>;
update(params: UpdateItemInput, cb?: (err: Error, data: UpdateItemOutput) => void): Request<UpdateItemOutput>;
}
declare interface QueryInput {
TableName: TableName;
IndexName?: IndexName;
Limit?: number;
ConsistentRead?: ConsistentRead;
KeyConditionExpression?: KeyExpression;
ExpressionAttributeNames?: ExpressionAttributeNameMap;
ExpressionAttributeValues?: ExpressionAttributeValueMap;
}
declare interface QueryOutput {
Items?: ItemList;
Count?: number;
ScannedCount?: number;
LastEvaluatedKey?: Key;
}
declare interface UpdateItemInput {
TableName: TableName;
Key: Key;
ReturnValues?: ReturnValue;
UpdateExpression?: UpdateExpression;
ConditionExpression?: ConditionExpression;
ExpressionAttributeNames?: ExpressionAttributeNameMap;
ExpressionAttributeValues?: ExpressionAttributeValueMap;
}
declare interface UpdateItemOutput {
Attributes?: AttributeMap;
}
}
NAMESPASES
// @ts
declare namespace DynamoDB {
export import DocumentClient = document_client;
}
// @flow
declare module 'aws-sdk/dynamodb/document_client' {
declare interface DocumentClient { /* ... */ }
}
FLOW DOWN
JEST
// @flow
type Pojo<T> = { [string]: T };
type GenMockValue = (value?: mixed) => Function;
type GenMockFn = (fn: Function) => Function;
type GenMockVoidFn = () => void;
type MockJestFn = {
mock: Pojo<*>,
mockReturnValue: GenMockValue,
mockReturnValueOnce: GenMockValue,
mockImplementation: GenMockFn,
mockImplementationOnce: GenMockFn,
mockReset: GenMockVoidFn,
};
type MockedByJestFn<T> = T | MockJestFn;
type MockedByJestConstructor<T> = T | MockedObject;
export type MockedFn = MockedByJestFn<*>;
export type MockedObject = Pojo<MockedByJestFn<*>>;
export type MockedModule = MockedByJestConstructor<*>;
export type MockedCalls<T> = Array<Array<T>>;
JSON
// config.json
{
"messages": {
"errorPrefix": "[ERR]",
"infoPrefix": "[INFO]",
"okPrefix": "[OK]"
}
}
// @flow
const {
messages: {
okPrefix,
infoPrefix,
errorPrefix,
},
} = require('./config');
WINSTON
// @flow
export type WinstonModule = {
createLogger: (options: { transports: Array<*> }) => WinstonInstance,
transports: {
Http: Function,
Console: Function,
},
};
export type WinstonInstance = {
log: (config: WinstonLogConfig) => void,
};
export type WinstonLogConfig = {
level: string,
message: string,
applicationId: string,
correlationId: string,
};
UPDATE
MASTER FLOW
VOUCHERS
// @flow
export type ForbiddenTaskResult = {
+statusCode: 403
};
export type RequestValidationResult<T> = {
isValid: () => boolean,
getError: () => string,
getRequest: () => T,
};
export type CheckEligibilityResponse = {|
campaignName: string,
isEligible: boolean,
|};
export type SponsorshipVouchersService = {
reserveVoucher: (memberId: string, campaignName: string, randomBase: number) => Promise<ReservedVoucher>,
applyVoucher: (rawVoucherCode: string) => Promise<BusinessTaskResult<DynamoDbVoucherEntity>>,
getReservedVoucher: (memberId: string, campaignName: string) => Promise<ReserveVoucherResponse | false>
};
TEST FLOW
INTEGRATION
// @flow
import type { AxiosPromise } from 'axios';
type Pojo<T> = { [string]: T };
export type TestRequest = {
memberId?: string,
campaignName?: string,
};
export type TestResponse = {
status: string,
data: Pojo<string>,
};
export interface ITestApi {
checkEligibility: (data: TestRequest) => AxiosPromise<TestResponse>,
reserveVoucher: (data: TestRequest) => AxiosPromise<TestResponse>,
applyVoucher: (data: TestRequest) => AxiosPromise<TestResponse>,
}
FLOW TOOLS
CHECK
COVERAGE
GUIDELINES
// @flow
// Names
type foo = string;
type myFoo = string;
type JSONApiEntity = {};
// Functions
type HttpFn = () => Promise<Object>;
type DoProfilePressFn = (profile: Object) => void;
// Interfaces
interface Serializable {
serialize(): string;
}
class Foo implements Serializable {
serialize() {
return '[Foo]';
}
}
I FLOW YOU
Flow The Way You Lie
By Roman Stremedlovskyi
Flow The Way You Lie
Typed JavaScript in EPAM Systems
- 1,396