Utility Types

提供一些實用工具涵式，處理複雜的型別操作

$Keys<T>

Flow 可以定義 union types 來達到類似 enum 的效果。

// @flow
type Country = 'US' | 'IT' | 'FR';

const us: Country = 'US';
const jp: Country = 'JP'; // 錯誤! 因為 Countries 沒有定義 JP

這是一個很簡單的國別碼範例，但是當面對到需求擴增的時候可能會顯得功能有點不足。 假設我們的需求從簡單的國別碼擴增到使用國別碼取得國家全名。

那我們的做法會變成這樣:

// @flow
type Country = 'US' | 'IT' | 'FR';

const countries = {
    US: '美國',
    IT: '義大利',
    FR: '法國',
};

function printCountryName(code: Country): void {
    console.log(countries[code]);
}

printCountryName('IT'); // 義大利
printCountryName('JP'); // 錯誤! 因為 Countries 沒有定義 JP

這樣會動是沒錯，但是不夠好 ( doesn’t feel very DRY )，因為我們定義了兩次國別碼。

在這種情況下，$Keys<T> 會是我們的好朋友。 我們用原本的範例，使用 $Keys<T> 來改寫。

// @flow
const countries = {
    US: '美國',
    IT: '義大利',
    FR: '法國',
};

type Country = $Keys<typeof countries>;

function printCountryName(code: Country): void {
    console.log(countries[code]);
}

printCountryName('IT'); // 義大利
printCountryName('JP'); // 錯誤! 因為 Countries 沒有定義 JP

範例中的 type Country = $Keys<typeof countries> 就相等於前面用的 type Country = 'US' | 'IT' | 'FR' 差別在於後者是使用 $Keys<T> 解析 countries 物件所產生的。

有了 $Keys<T>，我們不用再自己定義 Unions 類別，取而代之的是解析物件本身的 keys 來取得類別。

$Values<T>

$Values<T> 會從物件中提取值的屬性別，最終以 union types 回傳。 ( 注意! 不是從 key 哦! 他是去解析 value 的 )

// flow
type Person = {
    name: string,
    age: number,
    height: number,
    alive: boolean,
};

// 這兩種型態是一樣的
type PersonValue = string | number | boolean;
type Person$Value = $Values<Person>;

const name: Person$Value = 'Wayne';
const age: Person$Value = 26;
// 錯誤! 因為從 Person 型別中解析出來的 union types 中不含有 function
const swim: Person$Value = () => {};

$Values<T> 可以幫我們快速從已存在的型態中，取出其 union types。

( 但是老實說，我也還沒有找到具體使用的情境 )

小陷阱

假設我們定義了一個 children 型態是 Array<String>。

// @flow
type Person = {
    name: string,
    age: number,
    children: Array<string>, // 新定義 Array
}

type Person$Value = $Values<Person>;

const children: Person$Value = ['Willy', 'Lee']; // ok

但是當我們現在有多一個 account 型態是 Array<number>。( 先不要管為什麼要這樣，我就演示演示而已~ )

// @flow
type Person = {
    name: string,
    age: number,
    children: Array<string>, // 新定義 Array<string>
    account: Array<number>, // 多一個 Array<number>
};

type Person$Value = $Values<Person>;

const children: Person$Value = ['Willy', 'Lee']; // 錯誤!
const account: Person$Value = [1, 12, 123]; // 錯誤!

我們預期兩種都接受的型態應該是 Array<string | number> 但是它幫我們解析成 Array<string> | Array<number> 所以就不行囉~~ 要小心。

$ReadOnly<T>

會將已經定義好的型別轉換成 ReadOnly修飾 ( 只可讀 )，詳細請參考 ReadOnly 章節。

這意味這這兩個是相等的:

// @flow
type ReadOnlyObj = {
    +key: any,
};

// @flow
type ReadOnlyObj = $ReadOnly<{
    key: any
}>;

這兩個同樣具有不可被寫入只可讀取值的特性。

$ReadOnly<T> 在需要將一個既存物件轉為一個 ReadOnly版本的資料型態是很方便的，不需要重新定義一個同樣結構、卻只是在每個 key上加個 ReadOnly修飾的物件。

// @flow
type Person = {
    name: string,
    age: number,
};

type ReadOnlyPerson = $ReadOnly<Person>;

function fn(person: ReadOnlyPerson) {
    // 皆會有錯誤 
    // ... 略過 ... property `name` is not writable.Flow(cannot-write)
    person.name = 'Wayne';
    // ... 略過 ... property `age` is not writable.Flow(cannot-write)
    person.age = 26;
}

$Exact<T>

可以從原先定義的型別轉換為精確匹配型別，參考 Exact object types。

// @flow
type Person = {
    name: string,
    age: number,
};

function fn(person: Person) {
    // ... 跑跑跑 ...
}

// 成功，因為預設的型別判斷是只要定義的都有就好
fn({
    name: 'Wayne',
    age: 26,
    children: [],
});

現在改用 $Exact<T> 來做精確限制。

// @flow
type Person = {
    name: string,
    age: number,
};

type ExactPerson = $Exact<Person>;

function exactFn(person: ExactPerson) {
    // ... Exact 跑跑跑 ...
}

// 錯誤! 因為改成了精確匹配
exactFn({
    name: 'Wayne',
    age: 26,
    children: [], // 多定義了 :(
});

補充說明:

type ExactUser = $Exact<{name: string}>;
type ExactUserShorthand = { | name: string | };

這兩個是一樣的哦~~~

$Diff<A, B>

顧名思義，他會比較 A 與 B 的差別，我的了解是:

以 A 為主，去除 B 的型別，取出剩餘的型別。

借用官方範例，實在精妙呀!

// @flow
type Props = {
    name: string,
    age: number,
};
type DefaultProps = { age: number };
type RequiredProps = $Diff<Props, DefaultProps>;

function setProps(props: RequiredProps) {
    // ...
}

setProps({ name: 'foo'}); // ok
setProps({ name: 'foo', age: 42, baz: false }); // 可以傳入額外的屬性，沒問題的
setProps({ age: 42 }); // 錯誤! 一定要有 name

眼尖的朋友或許注意到了，這個跟我們在 React 定義 Props 型別與預設 Props 是不是很像呢? 哈哈沒錯，官方也這麼說道了:

$Diff is exactly what the React definition file uses to define the type of the props accepted by a React Component.

就是用在 React Component 中的囉~ 給有發現的自己拍拍手 ^^ ( 我自己要不是整理這份筆記，我也沒發現 )

拉回來，繼續講 $Diff<A, B>，其實個人認為在理解上，可以把 $Diff<A, B> 方法以 A - B 去理解，會比較好理解。

我們的 A 有 name, age 兩個屬性，B 有一個 age 屬性，這樣 Diff<A, B>比較下去，就會只留下 A 的 name 屬性。

// @flow
type Props = {
    name: string,
    age: number,
};
type DefaultProps = {
    age: number
};
type RequiredProps = $Diff<Props, DefaultProps>; // 只剩下 name 一個屬性

為什麼我前面要不厭其煩的不斷寫道 $Diff<A, B> ? 因為我要讓各位記住， A 與 B放置的位置是有不同意義的! 就像減法中 10 - 5 與 5 - 10 得出來的結果不會相等一樣。而 $Diff<A, B> 位置放錯是會有錯誤的哦~

$Diff<A, B> 的要求是，B 之中的屬性一定要是 A 所存在的。

// @flow
type Props = {
    name: string,
    age: number,
};
type DefaultProps = {
    age: number,
    other: string,
};

// 錯誤!
// Cannot instantiate `$Diff` because undefined property `other` [1] ...
type RequiredProps = $Diff<Props, DefaultProps>;

B 的 other屬性 A 沒有，所以就會報出「 B 含有 A 所沒有的屬性」，這種錯誤了。

$Rest<A, B>

要瞭解 $Rest<A, B> 的話一定要先瞭解 JavaScript 的 解構賦值 ( Destructuring assignment )

const person = {
    name: 'Wayne',
    age: 26,
    children: ['Andy', 'Tom', 'Jayson'],
    foo: 'Test',
    bar: 123,
    baz: false,
}

const { name, children, ...other } = person;

console.log(name); // Wayne
console.log(children); // [ 'Andy', 'Tom', 'Jayson' ]
console.log(other); // { age: 26, foo: 'test', bar: 123, baz: false }

大致演示一下它的概念。 我們有一個 person 物件，含有多個屬性，當我們使用解構方法提取出 name 與 children 後，再將剩餘的屬性放入 other 物件中，所以 other 物件就會有除了剛才被提去出去的 name 與 children 以外的全部屬性。

那 $Rest<A, B> 的概念也就類似這樣，它會保留 A 擁有的且 B 沒有的屬性，flow 判定擁有屬性是以精確指定 ( Exact Object Types )為擁有依據哦!。因此是這種定義方法 {| name: string, age: number |} 而不是 { name: string, age: number } 哦!

// @flow
type Person = {
    name: string,
    age: number,
    children: Array<string>,
    foo: string,
}

type RestPerson = $Rest<Person, {| age: number, foo: string |}>

function fn(person: RestPerson) {
    person.name // ok!
    person.age // 錯誤!
    person.children // ok!
    person.foo // 錯誤!
}

可以看到因為我們送給 $Rest<A, B> 的 B 當中含有 age 與 foo 兩個屬性，因此在下面呼叫 person.age 與 person.foo 的時候都會報錯。

與 $Diff<A, B> 的差別

這樣乍看下來... 跟 $Diff<A, B> 是不是很像? 確實是滿像的，但還是有差別的! 他們最主要的差別就展現在 必須有 與 optional 上面。 當我們使用 $Rest<{| n: number |}, {}> 與 $Diff<{| n: number |}, {}> 時，答案就呼之欲出了。

// @flow
type RestType = $Rest<{| n: number |}, {}> // {| n?: number |}
type DiffType = $Diff<{| n: number |}, {}> // {| n: number |}

差別就在 optional 囉!!

$PropertyType<T, k>

傳入 T ( Type ) 與 k ( Key )，回傳指定 k 的型態， T 必須是類型， 而 k 呢，必須是一個字串。

// @flow
type Person = {
  name: string,
  age: number,
  parent: Person
};

function nameFn(name: $PropertyType<Person, 'name'>) {
  // ...
}

nameFn('Wayne'); // ok!
nameFn(123); // 錯誤，必須是 string

可以看到若是指定 name 這個 key 進去，它會提取出 Person 中 name 的型別，也就是 string。

剛才上面的是我個人的理解方式，接下來用官方的範例吧！

// @flow
type Person = {
  name: string,
  age: number,
  parent: Person
};

// ok
const newName: $PropertyType<Person, 'name'> = 'Toni Braxton';
// ok
const newAge: $PropertyType<Person, 'age'> = 51;
// 錯誤，因為要是 Person 形態
const newParent: $PropertyType<Person, 'parent'> = 'Evelyn Braxton';
// 如果要正確的話要這樣哦！
const newParent2: $PropertyType<Person, 'parent'> = {
  name: 'Wayne',
  age: 123,
  parent: {}
};

// 錯誤! children 不存在
const newChildren: $PropertyType<Person, 'children'> = {};

$PropertyType<T, K> 在 React 的用例場景上尤其有用。

// @flow
import React from 'react';

// 定義 Props
type Props = {
  text: string,
  onMouseOver: ({x: number, y: number}) => void
}

// 指定這個 Component 會有 text 跟 onMouseOver 兩個 Prop 傳入
class Tooltip extends React.Component<Props> {
  props: Props;
}

// 存 Tooltip 中取得 props 屬性的型別，剛好就是剛才定義的 Props
const someProps: $PropertyType<Tooltip, 'props'> = {
  text: 'foo',
  onMouseOver: (data: {x: number, y: number}) => undefined
};

// 錯誤
const otherProps: $PropertyType<Tooltip, 'props'> = {
  text: 'foo'
  // 缺少 `onMouseOver` 定義
};

延續剛才的範例，我們也可以使用巢狀的定義 $PropertyType 像是這樣

// @flow
// 指定這個 Component 會有 text 跟 onMouseOver 兩個 prop 傳入
type Props = {
  text: string,
  onMouseOver: ({x: number, y: number}) => void
}

class Tooltip extends React.Component<Props> {
  props: Props;
}

type PositionHandler = $PropertyType<$PropertyType<Tooltip, 'props'>, 'onMouseOver'>;

const handler: PositionHandler = (data: {x: number, y: number}) => undefined; // ok
const handler2: PositionHandler = (data: string) => undefined; // 錯誤!傳入參數錯誤

稍微來解析一下，先從 $PropertyType<Tooltip, 'props'> 中由 props 字串轉出 Props 類別，轉出來後，再由 $PropertyType<$PropertyType<Tooltip, 'props'>, 'onMouseOver'> 中解析出 onMouseOver 這個 function 類型。

$ElementType<T, K>

之後會用比較多 Type Casting Expressions，不熟的話再去複習一下吧！

$ElementType<T, K> 跟 $PropertyType<T, k> 一樣 都是傳入 T 與 k，回傳指定 k 的型態。

在特定場景下，它的用法會跟 $PropertyType<T, k> 一樣

// @flow
type Person = {
    name: string,
    age: number,
}

(123: $ElementType<Person, 'age'>); // ok
(123: $PropertyType<Person, 'age'>); // ok

// children 不存在
(123: $ElementType<Person, 'children'>); // 錯誤!
(123: $PropertyType<Person, 'children'>); // 錯誤!

在這種情況下確實是會有一樣的回傳結果，只是 ElementType<T, K> 的 T 不一定要接收物件型別，而是可以接收一個物件、陣列、甚至是 Tuple 的型別。接收到後再根據 K 傳入的值去解析出相對應的欄位型別。

// @flow
type Tuple = [boolean, string];

(true: $ElementType<Tuple, 0>); // ok!
('123': $ElementType<Tuple, 1>); // ok!
('123': $ElementType<Tuple, 2>); // 錯誤! 長度並沒有到 2

(true: $PropertyType<Tuple, 0>); // 錯誤! $PropertyType<T, k> 中，k 必須是字串

可以看到我們這次用了 Tuple 類別，$ElementType<T, K> 可以使用位置解析出型別，但是 $PropertyType<T, k> 不行，因為 $PropertyType<T, k> 的 k 是只可以傳入字串的，不接受其他型別的傳入， 而 $ElementType<T, K> 並沒有這個限制，只要傳入的 K 是 T 存在的屬性就好，這也是 $ElementType<T, K> 跟 $PropertyType<T, k> 最大的差別囉！

// @flow

// 物件解析
type Obj = {
    [key: string]: number,
};

(42: $ElementType<Obj, string>); // ok!
(42: $ElementType<Obj, boolean>); // 錯誤! Obj 內並沒有 boolean 型別
(true: $ElementType<Obj, string>); // 錯誤! 回傳值是 number 型別

// 解析陣列，由於一個陣列我們通常不知道它確切的長度，因此我們直接使用 number 作為 key 就好了
type Arr = Array<boolean>;

(true: $ElementType<Arr, number>);
(true: $ElementType<Arr, boolean>); // 錯誤! 陣列中並沒有 boolean 型別作為 key
('foo': $ElementType<Arr, number>); // 錯誤! 回傳值是 boolean 型別

也可以使用巢狀的使用 $ElementType ，在需要取得型別中的型別時會特別有用。

像這樣

// @flow
type NumberObj = {
  nums: Array<number>,
};

(42: $ElementType<$ElementType<NumberObj, 'nums'>, number>);

稍微來解析一下，先從 $ElementType<NumberObj, 'nums'> 中由 nums 字串轉出 NumberObj 陣列類別，轉出來後，再由 $ElementType<$ElementType<NumberObj, 'nums'>, number> 透過 array key ( number ) 解析出 number 類型。

巢狀有點複雜，可以多看幾次！

$NonMaybeType<T>

顧名思義，$NonMaybeType<T> 會將收到的 T 轉換為 non-mayby type，簡單一點瞭解就是將允許 null 或 undefined 的定義轉為不允許啦~

// @fow
type MaybeName = ?string;
type Name = $NonMaybeType<MaybeName>;

('Wayne': MaybeName); // ok
(null: MaybeName); // ok

('Wayne': Name); // ok
(null: Name); // 錯誤

$ObjMap<T, F>

這段比較不好懂，會用到比較多的泛型 ( Generic )，與 js 方法，如果一時半刻看不懂，不要怪自己，是很正常的。只要花點時間細看一下，我相信一定能看懂！功力也會有些許進步的。 也不要放棄唷！因為接下來的很多都要在這個的基礎上做延伸嘿！

這個不太好懂，如果一時半刻看不懂，不要怪自己，是很正常的！

首先我們來看一個純 js function

function run(o) {
  return Object.keys(o).reduce(
    (acc, k) => Object.assign(acc, { [k]: o[k]() }),
    {}
  );
}

const obj = run({
  foo: () => 2,
	bar: () => true,
	baz: () => 'test'
})

這很簡單，就是一個 function 接收一個物件，而這個 function 會把物件中每個屬性都當成 function 去跑，再將回傳值放入一個空物件中，用 reduce() 方法做出新的物件回傳。 ( 不熟的話麻煩自己再去補一下 reduce() 跟 Object.assign() 囉！ )

但是這樣的回傳我們要怎麼知道 obj 他的回傳型別呢？ 我怎麽知道 foo 是 number、bar 是 boolean 呢？

這就是 $ObjMap<T, F> 的使用時機了！

$ObjMap<T, F> 收取 物件形態 T function 形態 F

會從 F 中提取回傳形態作為該屬性最終的形態依據，換句話說，$ObjMap<T, F> 會解析 T 的所有屬性，並且一一執行 F 取得回傳值。

再多說下去就要茫了~直接來看範例吧！

// @flow
type ExtractReturnType = <V>(() => V) => V;

function run<O: {[key: string]: Function}>(o: O): $ObjMap<O, ExtractReturnType> {
  return Object.keys(o).reduce(
    (acc, k) => Object.assign(acc, { [k]: o[k]() }),
    {}
  );
}

const obj = run({
  foo: () => 2, // ok!
	bar: () => true, // ok!
	baz: () => 'test' // ok!
})

(obj.foo: number);
(obj.bar: bool);
(obj.baz: string);
(obj.baz: bool); // 錯誤!

我們在前面先定義了一個 function 形態 ExtractReturnType，他的內容就是簡單地將收去到的形態照原本回傳回去而已。

而 run() 做的事情跟原先一樣，只是多加了些型別的判斷、使用， 首先 run<O: {[key: string]: Function}> 是限制傳入的參數必須為物件、且物件的 key 必須是字串型式、value 必須是個 Function。

再來run<O: {[key: string]: Function}>(o: O): $ObjMap<O, ExtractReturnType> 的後半段，$ObjMap<O, ExtractReturnType> 就是將收到的物件 O 與剛才定義 ExtractReturnType F 傳入，$ObjMap<T, F> 就會執行它的任務了。

$ObjMapi<T, F>

$ObjMapi<T, F> 與 $ObjMap<T, F> 看起來很類似，差別在於 $ObjMapi<T, F> 的 Function F 會呼叫 T 的 key 與 value，而不是只針對 value 做處理。

// @flow
const person = {
  name: () => 'Wayne',
  age: () => 26
};

type ExtractReturnObjectType = <K, V>(K, () => V) => { k: K, v: V };

declare function run<O: Object>(o: O): $ObjMapi<O, ExtractReturnObjectType>;

(run(person).name: { k: 'name', v: string}); // ok!
(run(person).age: { k: 'age', v: number}); // ok!

(run(person).name: { k: 'age', v: string}); // 錯誤! name 的 k 應該是 name
(run(person).age: { k: 'age', v: string}); // 錯誤! age 的 v 應該是 number

$TupleMap<T, F>

$TupleMap<T, F> 接收一個可迭代的型別 T ( 像是 Tuple、陣列... )，另外再接收一個 function 形態的 F。 最終回傳另一個可迭代的物件，物件中每個元素都經過 F 的回傳，有點像是 JavaScript 的 map() 方法。

此功能的用例上也是比較特殊一點的，假設我們有一個陣列裡面每個元素都是 function，我們需要取得每個元素的回傳值作為最終的形態。

// @flow
type ExtractReturnType = <V>(() => V) => V;

function run<A, I: Array<() => A>>(iter: I): $TupleMap<I, ExtractReturnType> {
  return iter.map(fn => fn());
}

const arr = [
  () => 'foo',
  () => 'bar',
  () => 'baz',
];

(run(arr)[0]: string); // ok
(run(arr)[1]: string); // ok
(run(arr)[2]: string); // ok
(run(arr)[2]: number); // 錯誤! 應該是 string 才對

$Call<F, T...>

$Call<F, T...> 接收一個 F 參數與 0 個或多個 T 參數，並且已 F 的回傳做作為最終的形態。

注意到了！不一定要有 T 參數也是可以的哦！

// @flow

// 一個固定會回傳 number 型態的 function
type ExtractNumberType = () => number;

type NumberType = $Call<ExtractNumberType>;


(26: NumberType); // ok
('Wayne': NumberType); // 錯誤! 必須要是 number 形態

上例雖然沒有什麼意義，就是演示沒有接收 T 參數，$Call<F, T...> 也是可以正常運作的~

再來我們看一下接收一個參數的幾個範例

// @flow
// 解析接收到的物件中 prop 屬性的的型態
type ExtractPropType = <T>({prop: T}) => T;

type PropObj = { prop: number };
type NopeObj = { nope: number };

type PropType = $Call<ExtractPropType, PropObj>;
type NopeType = $Call<ExtractPropType, NopeObj>; // 錯誤


(26: PropType); // ok!
('Wayne': PropType); // ok!
(26: NopeType); // 錯誤

// @flow
type ExtractReturnType = <R>(() => R) => R;
type Fn = () => number;
type Return = $Call<ExtractReturnType, Fn>;

(26: Return); // ok!
('Wayne': Return); // 錯誤! 必須是 number 型態

再來些進階的用法

// @flow
type NestedObj = {
  status: number,
  data: $ReadOnlyArray<{
    foo: {
       bar: number,
    },
  }>,
};

type Fn = <T>({
  data: $ReadOnlyArray<{
    foo: {
      bar: T,
    },
  }>
}) => T

// $Call<F, T...> 也是可以往下解析型態的哦！
type BarType = $Call<Fn, NestedObj>;

(26: BarType); // ok!
('Wayne': BarType); // 錯誤! 必須是 number 型態

$Call<F, T...> 還可以解析 Map 等等型態，就等你們再去挖掘囉~

Class<T>

接收一個 T 參數回傳一個實體 Class 型態 C，C 型態是 Class 本身而不是被 new 出來的 Class 實體。

// @flow
class Store {}

// 接收 Store 型態
function getStore(newStore: Store) {
  return newStore;
}

// 接收 Class<Store> 型態
function makeStore(storeClass: Class<Store>) {
  return new storeClass();
}

(getStore(Store): Store); // 錯誤! 必須接收 Class 實體
(getStore(new Store()): Store); // ok

(makeStore(Store): Store); // ok
(makeStore(new Store()): Store); // 錯誤! 必須接收 Class 本身

Class 的建構子需要接收參數的話，我們也需要提供參數的型別

// @flow
class ParamStore<T> {
  constructor(data: T) {
  }
}

function makeStore<T>(storeClass: Class<ParamStore<T>>, data: T): ParamStore<T> {
  return new storeClass(data);
}

(makeStore(ParamStore, 26): ParamStore<number>); // ok
(makeStore(ParamStore, 'Wayne'): ParamStore<string>); // ok
(makeStore(ParamStore, 'Wayne'): ParamStore<bool>); // 錯誤!

$Shape<T>

接收一個物件型態的 T，他會去解析 T 的所有屬性，並回傳一個只要符合一個屬性就通過的型別。

// @flow
type Person = {
  age: number,
  name: string,
}
type PersonDetails = $Shape<Person>;

const person001: Person = { age: 26, name: 'Wayne' }; // ok
const person002: PersonDetails = { age: 26, name: 'Wayne' }; // ok

const person003: Person = { age: 26 }; // 錯誤!
const person004: PersonDetails = { age: 26 }; // ok
const person005: PersonDetails = { name: 'Wayne' }; // ok

注意了！$Shape<T> 跟 T 使用 Optional 型別定義是不一樣的哦！

$Exports<T>

官網給出來的解釋是這樣的

// @flow
import typeof * as T from 'my-module';

// @flow
type T = $Exports<'my-module'>;

恩... 當然是沒錯啦！但是我個人在看的時候為了搞懂這兩句可是花了好大的心思呀！

為什麼呢？因為這短短兩行，我們就必須要去補 flow module 的部分，看看看還會被帶到 flow-typed 、 Library Definitions 等等的地方，是很容易迷路的！

這邊我給大家個範例！加速理解，有空大家再自己去補技術細節就好。

先在 /flow-typed 資料夾內建立一個叫做 'test-module.js' 的檔案 ( /flow-typed 資料夾是預設的全域 lib，詳細在該章節細細討論 )

// @flow
declare module "test-module" {
  declare export function concatPath(dirA: number, dirB: string): string;
  declare export var Name: string;
  declare export var PI: number;
}

接著在專案內引入

typeof * as T 方法引入

// @flow
import typeof * as T from 'test-module';

// ok!
const a: T = {
  concatPath: (a, b) => b,
  PI: 3.14,
  Name: 'Wayne',
}


// 錯誤
const b: T = {
  concatPath: (a, b) => b,
  PI: 3.14,
  Name: 'Wayne',
  test: 'Hello',
}

$Exports<T> 方法引入

// @flow
type T = $Exports<'test-module'>;

// ok!
const a: T = {
  concatPath: (a, b) => b,
  PI: 3.14,
  Name: 'Wayne',
}

// 錯誤
const b: T = {
  concatPath: (a, b) => b,
  PI: 3.14,
  Name: 'Wayne',
  test: 'Hello',
}