Skip to main content

Module Types

Flow lets you share types between files using import type and export type syntax.

import type {MyType} from './types';

Importing and exporting types​

You can export type aliases, interfaces, and classes from one file and import them in another.

exports.js

1export default class MyClass {};2export type MyObject = { /* ... */ };3export interface MyInterface { /* ... */ };

imports.js

import type MyClass, {MyObject, MyInterface} from './exports';

Don't forget to add @flow at the top of your file, otherwise Flow won't report errors.

Importing and exporting values as types​

Flow also supports importing the type of values exported by other modules using typeof.

exports.js

1const myNumber = 42;2export default myNumber;3export class MyClass { /* ... */ };

imports.js

import typeof MyNumber from './exports';
import typeof {MyClass} from './exports';

const x: MyNumber = 1; // Works: like using `number`

Just like other type imports, this code can be stripped away by a compiler so that it does not add a runtime dependency on the other module.

When the imported value is generic — for example, a function or React hook with type parameters — the imported type stays parameterizable. You can write useState<number> against an import typeof {useState} from 'react'-imported type to obtain the number-specialization:

import typeof {useState} from 'react';

hook useCounter(useStateNum: useState<number>): number {
  const [count, setCount] = useStateNum(0);
  setCount(c => c + 1);
  return count;
}

For the component-specific gotcha when import typeof is applied to a generic component's default export, see import typeof with generic components.

See Also​