Module Types
Importing and exporting types
It is often useful to share types in between modules (files). In Flow, you can export type aliases, interfaces, and classes from one file and import them in another.
exports.js
1 2 3 4 |
|
{"value":"// @flow\nexport default class Foo {};\nexport type MyObject = { /* ... */ };\nexport interface MyInterface { /* ... */ };\n","tokens":[{"type":"Line","context":"comment","value":"// @flow","line":1,"start":0,"end":8},{"type":"T_EXPORT","context":"normal","value":"export","line":2,"start":9,"end":15},{"type":"T_DEFAULT","context":"normal","value":"default","line":2,"start":16,"end":23},{"type":"T_CLASS","context":"normal","value":"class","line":2,"start":24,"end":29},{"type":"T_IDENTIFIER","context":"normal","value":"Foo","line":2,"start":30,"end":33},{"type":"T_LCURLY","context":"normal","value":"{","line":2,"start":34,"end":35},{"type":"T_RCURLY","context":"normal","value":"}","line":2,"start":35,"end":36},{"type":"T_SEMICOLON","context":"normal","value":";","line":2,"start":36,"end":37},{"type":"T_EXPORT","context":"normal","value":"export","line":3,"start":38,"end":44},{"type":"T_TYPE","context":"normal","value":"type","line":3,"start":45,"end":49},{"type":"T_IDENTIFIER","context":"type","value":"MyObject","line":3,"start":50,"end":58},{"type":"T_ASSIGN","context":"type","value":"=","line":3,"start":59,"end":60},{"type":"T_LCURLY","context":"type","value":"{","line":3,"start":61,"end":62},{"type":"Block","context":"comment","value":"/* ... */","line":3,"start":63,"end":72},{"type":"T_RCURLY","context":"type","value":"}","line":3,"start":73,"end":74},{"type":"T_SEMICOLON","context":"normal","value":";","line":3,"start":74,"end":75},{"type":"T_EXPORT","context":"normal","value":"export","line":4,"start":76,"end":82},{"type":"T_INTERFACE","context":"normal","value":"interface","line":4,"start":83,"end":92},{"type":"T_IDENTIFIER","context":"type","value":"MyInterface","line":4,"start":93,"end":104},{"type":"T_LCURLY","context":"type","value":"{","line":4,"start":105,"end":106},{"type":"Block","context":"comment","value":"/* ... */","line":4,"start":107,"end":116},{"type":"T_RCURLY","context":"type","value":"}","line":4,"start":117,"end":118},{"type":"T_SEMICOLON","context":"normal","value":";","line":4,"start":118,"end":119}],"errors":[]}
imports.js
1 2 |
|
{"value":"// @flow\nimport type Foo, {MyObject, MyInterface} from './exports';\n","tokens":[{"type":"Line","context":"comment","value":"// @flow","line":1,"start":0,"end":8},{"type":"T_IMPORT","context":"normal","value":"import","line":2,"start":9,"end":15},{"type":"T_TYPE","context":"normal","value":"type","line":2,"start":16,"end":20},{"type":"T_IDENTIFIER","context":"type","value":"Foo","line":2,"start":21,"end":24},{"type":"T_COMMA","context":"normal","value":",","line":2,"start":24,"end":25},{"type":"T_LCURLY","context":"normal","value":"{","line":2,"start":26,"end":27},{"type":"T_IDENTIFIER","context":"type","value":"MyObject","line":2,"start":27,"end":35},{"type":"T_COMMA","context":"normal","value":",","line":2,"start":35,"end":36},{"type":"T_IDENTIFIER","context":"type","value":"MyInterface","line":2,"start":37,"end":48},{"type":"T_RCURLY","context":"normal","value":"}","line":2,"start":48,"end":49},{"type":"T_IDENTIFIER","context":"normal","value":"from","line":2,"start":50,"end":54},{"type":"T_STRING","context":"normal","value":"'./exports'","line":2,"start":55,"end":66},{"type":"T_SEMICOLON","context":"normal","value":";","line":2,"start":66,"end":67}],"errors":[{"id":"E1","messages":[{"id":"E1M1","description":"Cannot resolve module `./exports`. [cannot-resolve-module]","context":"import type Foo, {MyObject, MyInterface} from './exports';","source":"-","start":{"line":2,"column":47,"offset":55},"end":{"line":2,"column":57,"offset":66}}],"operation":null}]}
Don’t forget to mention
@flow
on top of file, otherwise flow won’t report errors.
Importing and exporting values
Flow also supports importing the type of values exported by other modules using
typeof
.
exports.js
1 2 3 4 5 6 |
|
{"value":"// @flow\nconst myNumber = 42;\nexport default myNumber;\nexport class MyClass {\n // ...\n}\n","tokens":[{"type":"Line","context":"comment","value":"// @flow","line":1,"start":0,"end":8},{"type":"T_CONST","context":"normal","value":"const","line":2,"start":9,"end":14},{"type":"T_IDENTIFIER","context":"normal","value":"myNumber","line":2,"start":15,"end":23},{"type":"T_ASSIGN","context":"normal","value":"=","line":2,"start":24,"end":25},{"type":"T_NUMBER","context":"normal","value":"42","line":2,"start":26,"end":28},{"type":"T_SEMICOLON","context":"normal","value":";","line":2,"start":28,"end":29},{"type":"T_EXPORT","context":"normal","value":"export","line":3,"start":30,"end":36},{"type":"T_DEFAULT","context":"normal","value":"default","line":3,"start":37,"end":44},{"type":"T_IDENTIFIER","context":"normal","value":"myNumber","line":3,"start":45,"end":53},{"type":"T_SEMICOLON","context":"normal","value":";","line":3,"start":53,"end":54},{"type":"T_EXPORT","context":"normal","value":"export","line":4,"start":55,"end":61},{"type":"T_CLASS","context":"normal","value":"class","line":4,"start":62,"end":67},{"type":"T_IDENTIFIER","context":"normal","value":"MyClass","line":4,"start":68,"end":75},{"type":"T_LCURLY","context":"normal","value":"{","line":4,"start":76,"end":77},{"type":"Line","context":"comment","value":"// ...","line":5,"start":80,"end":86},{"type":"T_RCURLY","context":"normal","value":"}","line":6,"start":87,"end":88}],"errors":[]}
imports.js
1 2 3 |
|
{"value":"// @flow\nimport typeof myNumber from './exports';\nimport typeof {MyClass} from './exports';\n","tokens":[{"type":"Line","context":"comment","value":"// @flow","line":1,"start":0,"end":8},{"type":"T_IMPORT","context":"normal","value":"import","line":2,"start":9,"end":15},{"type":"T_TYPEOF","context":"normal","value":"typeof","line":2,"start":16,"end":22},{"type":"T_IDENTIFIER","context":"type","value":"myNumber","line":2,"start":23,"end":31},{"type":"T_IDENTIFIER","context":"normal","value":"from","line":2,"start":32,"end":36},{"type":"T_STRING","context":"normal","value":"'./exports'","line":2,"start":37,"end":48},{"type":"T_SEMICOLON","context":"normal","value":";","line":2,"start":48,"end":49},{"type":"T_IMPORT","context":"normal","value":"import","line":3,"start":50,"end":56},{"type":"T_TYPEOF","context":"normal","value":"typeof","line":3,"start":57,"end":63},{"type":"T_LCURLY","context":"normal","value":"{","line":3,"start":64,"end":65},{"type":"T_IDENTIFIER","context":"type","value":"MyClass","line":3,"start":65,"end":72},{"type":"T_RCURLY","context":"normal","value":"}","line":3,"start":72,"end":73},{"type":"T_IDENTIFIER","context":"normal","value":"from","line":3,"start":74,"end":78},{"type":"T_STRING","context":"normal","value":"'./exports'","line":3,"start":79,"end":90},{"type":"T_SEMICOLON","context":"normal","value":";","line":3,"start":90,"end":91}],"errors":[{"id":"E1","messages":[{"id":"E1M1","description":"Cannot resolve module `./exports`. [cannot-resolve-module]","context":"import typeof myNumber from './exports';","source":"-","start":{"line":2,"column":29,"offset":37},"end":{"line":2,"column":39,"offset":48}}],"operation":null},{"id":"E2","messages":[{"id":"E2M1","description":"Cannot resolve module `./exports`. [cannot-resolve-module]","context":"import typeof {MyClass} from './exports';","source":"-","start":{"line":3,"column":30,"offset":79},"end":{"line":3,"column":40,"offset":90}}],"operation":null}]}
Just like other type imports, this code will be stripped away by a compiler and will not add a dependency on the other module.
Was this guide helpful? Let us know by sending a message to @flowtype.