在研究一个react的工程时候，发现了这样一个语法
import type {xxx} from 'xxx'
完全没有见过这样的语法，并不知道是什么玩意，console他的时候，提示undefined
以下内容节选自：
作者：[Eddy张]
链接：https://www.imooc.com/article/15855
来源：慕课网
要弄明白这个，首先从Flow说起，他是一个JavaScript的静态类型检查工具，由Facebook出品的开源项目。简单来说，它是对比TypeScript语言的解决方式。
那么又得讲讲TypeScript了。因为JavaScript是一种弱数据类型语言，在代码中，变量或常量会自动依照赋值变更数据类型。他的优点是容易学习与使用，缺点是像开发者经常会因为赋值或传值的类型错误，造成不如预期的结果。因此，像TypeScript这样的，基于JavaScript为基础的强数据类型语言开始流行起来。
但是，将整个JavaScript代码换成TypeScript，是一个很大的工程，对开发人员来说还需要一定的学习过程。现在，Flow的出现提供了一种新的解决方案，他从头到尾只是个检查工具，针对代码中的数据类型进行检查，可以规避很多不必要的数据类型使用上的问题，让你的代码更具强健性与提高阅读性。它可以与各种现有的JavaScript代码兼容，如果你哪天不想用了，就去除掉标记就行。
举个例子
function foo(x) {
return x + 10
}
foo(1) //11
foo('Hello!') //hello!10
由于输入参数的数据类型的不同，导致函数执行结果出现了数字加运算和字符串拼接的两种结果，这会造成一定的困扰。用Flow类型的定义方式可以解决这个小问题
// @flow
function foo(x: number): number {
return x + 10
}
foo('hi')
在函数的传参，以及函数的圆括号(())后面的两个地方，加了: number标记，这代表这个传参会限定为数字类型，而返回值也只允许是数字类型。
当使用非数字类型的值作为传入值时，就会出现由Flow工具发出的警告消息
message: '[flow] string (This type is incompatible with number See also: function call)'
意思是，你这函数的传参是string(字符串)类型，与你声明的number(数字)不相符合
再举个例子
export type Name : string;
export type Student = {
name: Name,
age: number
}
export type School = {
name: Name,
students: Array<Student>
}
Flow具备有像TypeScript语言中，预先定义对象类型的作用。上面代码的都是这个组件中预先定义的类型，只要是声明过的类型(type)，同样可以拿来拿在其他类型中套用。
第一行代码预定义了Name的类型为string，在接下来定义的Student和School对象里的name属性的数据类型都应为string类型。
在最后一段定义的School类型中，他的students属性的类型Array<Student>，是一个数组，里面放的成员是Student类型，是个对象的结构。
看到这里，再回过头来看看最初的问题import type，答案就很明显了。他作用就是从另一个模块中导入数据类型。
以下内容节选自flow官网
https://flow.org/blog/2015/02/18/Import-Types/
关于 Import Type 的通告
从Flow 0.3.0版本以后，现在大家可以从另一个模块中导入【数据类型】了。例如，你引入一个类（class）的目的，只是想使用他的类型标注（type annotation），那么你就可以使用这个import type语法。
起因
你是否曾经遇到过以下情况？
// @flow
// 报错 Post-transformation lint error: Unused variable 'URI'
import URI from "URI";
// 但是当你去掉引入，又会收到另一个Flow抛出的错误:
// 报错 identifier URI - Unknown global name
module.exports = function(x: URI): URI {
return x;
}
现在这个问题有出路啦！现在（以及未来的ES6中）我们加入了新的语法import type，在这种情况下使用他可以表达你真正的意图——你仅仅想引入他的数据类型，而不是真的引入这个类。
使用Import Type
现在你可以这么写
// @flow
import type URI from 'URI';
module.exports = function(x: URI): URI {
return x;
};
如果在模块中你定义了一个复杂的类（例如，Crayon 或者 Marker 类），你可以分别单独引入他们，像这样：
// @flow
import type {Crayon, Marker} from 'WritingUtensils';
module.exports = function junkDrawer(x: Crayon, y: Marker): void {}
正如类型标注以及其他Flow的特性一样，import type也需要在代码可运行的基础上才能发挥作用。这一改变将在即将到来的0.13.0版本中实现，现在你可以在0.13.0-beta.2版本中实现他。你可以通过以下命令安装
npm install react-tools@0.13.0-beta.2
网友评论