Maison >interface Web >js tutoriel >Flow, un nouveau type statique Javascript checker_javascript skills

Flow, un nouveau type statique Javascript checker_javascript skills

WBOY
WBOYoriginal
2016-05-16 15:24:241395parcourir

Aujourd'hui, nous sommes ravis de publier une version précoce de Flow, un nouveau vérificateur de type statique Javascript. Flow ajoute une vérification de type statique à Javascript pour améliorer l'efficacité du développement et la qualité du code. Plus précisément, la vérification de type statique offre des avantages tels que la vérification précoce des erreurs, qui vous aide à trouver certaines erreurs qui ne peuvent être trouvées qu'au moment de l'exécution, et l'intelligence du code, qui facilitera la maintenance, la découverte, la refactorisation et l'optimisation du code.

Nous avons conçu toutes les fonctionnalités de Flow pour qu'elles soient construites sur les spécifications Javascript existantes. Étant donné que Flow fonctionne activement en arrière-plan, la surcharge de compilation supplémentaire est minime. Flow n'exige pas que les développeurs écrivent du code : il utilise un ensemble complexe d'algorithmes pour analyser votre style de codage familier.

Flow en est encore à ses débuts, mais nous l'utilisons déjà sur Facebook. Nous espérons que vous apprécierez l’utiliser dans vos propres projets et attendons avec impatience vos commentaires. Vous pouvez commencer rapidement en visitant flowtype.org.

Aperçu

Facebook adore Javascript ; il est rapide, expressif, fonctionne partout et constitue un excellent langage pour créer des produits. Dans le même temps, les développeurs sont troublés par le manque de typage statique. Les bugs sont difficiles à trouver (par exemple, la cause du crash est profondément cachée) et la maintenance du code est un cauchemar (par exemple, refactoriser sans connaître toutes les dépendances est très risqué). Flow améliore la vitesse et l'efficacité des développeurs utilisant Javascript.

Il n'est pas simple d'ajouter une couche de système statique par-dessus Javascript. Les éléments constitutifs de Javascript sont extrêmement expressifs et un système de types simple ne peut pas combiner avec précision la sémantique appropriée. Afin de prendre en charge différents paradigmes et habitudes de programmation Javascript, Flow introduit des technologies d'analyse telles que le flux de données et le flux de contrôle qui sont généralement utilisées pour extraire la sémantique au moment de la compilation. Utilisez ensuite les informations extraites et ajoutez des principes de type avancés pour effectuer l'inférence de type. Bien entendu, une solide analyse de type statique ne suffit pas : les bases de code Javascript peuvent être très volumineuses, ce qui nécessite une vérification de type ultra-rapide afin de ne pas interrompre le processus d'édition du développeur. Flow effectue une analyse module par module, tous les types étant limités aux limites des modules. Cela aboutit finalement à une architecture de vérification incrémentielle hautement parallèle, similaire à Hack. Cela rend la vérification de type très réactive, même avec des millions de lignes de code.

La vérification de type de Flow est facultative : vous n'avez pas besoin de tout vérifier en même temps. Cependant, la conception derrière Flow repose sur l'hypothèse que la plupart des types de code Javascript sont des types implicitement statiques ; bien que les types n'apparaissent pas partout dans le code, ils existent sous une forme qui peut être déduite par le développeur en fonction de l'exactitude du code. .en pensée. Flow déduit ces types chaque fois que cela est possible, ce qui signifie qu'il peut trouver des erreurs de type sans modifier le code. D’un autre côté, certains, comme le code Javascript qui existe dans les frameworks, font un usage intensif de la réflexion, ce qui rend l’inférence de type statique très difficile. Pour ce type de code naturellement dynamique, la vérification de type sera pleine d'erreurs, Flow offre donc la possibilité d'ajouter de la confiance à ce code et de continuer. Cette conception est prouvée en interne par la vaste base de code Javascript de Facebook : la plupart du code ne transmet pas les entrées de vérification de type statique implicite, qui permettent aux développeurs de vérifier les erreurs de type de code sans ajouter de commentaires.

Cela rend Flow fondamentalement différent des autres systèmes de type JavaScript (tels que TypeScript), en affaiblissant l'hypothèse selon laquelle la plupart du code JavaScript est typé dynamiquement et en laissant au développeur le soin d'exprimer quel code doit être saisi de manière statique. Généralement, ce type de conception entraîne une couverture de contrôle plus faible : moins d’erreurs de type sont détectées et l’outil est moins efficace. Bien que raisonnable dans certains cas, cette conception n’apporte généralement pas suffisamment d’aide pour le développement pratique sans beaucoup d’efforts supplémentaires. Néanmoins, Flow vous permet d'obtenir facilement ce type de vérification de type affaibli, ce qui est très utile pour le code existant.

Pour expliquer cette différence, regardez l'exemple suivant :

function onlyWorksOnNumbers(x) {
 return x * 10;
}
onlyWorksOnNumbers(‘Hello, world!');

Flow能够发现这个错误(尝试把数字和字符串相乘),然而另一种更加保守的分析需要显式的标注 x 的类型。在这个玩具般的例子里面并不觉得费力,但是在巨型代码库里面几乎无人去做。Flow可以不用添加注释就能发现这个错误 —— 当然前提是开发者想这样做。

类型系统

Flow的类型系统实现了许多期望中的功能。支持标准基本类型( number ,  string , boolean ),类型之间的隐式转换在除一些特殊情形外是被禁止的。结构类型,如函数、对象和数组也被支持。类型可以是多态的。

也许你会感到意外,Flow没有把 null 和 undefined 当成是上述类型中的任何一种。这两种类型会有多种可能,使用这些类型必须在合理检查的保护之上。其它组合类型(如 string | number )也被支持,这种用法同样需要确保安全。Flow知道缩小类型范围时做动态检查的影响。

让我们用一个例子来描述处理 null 值。下面的程序总是在运行时崩溃,但是一般的类型系统会认为它没有问题:

function length(x) {
return x.length;
}
var total = length('Hello') + length(null);

Flow会在编译时期发现这个错误,并指出 x 可以是null( length 属性不应该被访问)。另外,Flow了解这个程序的控制流,所以简单修改就能让这个程序类型正确:

function length(x) {
 if (x !== null) {
 return x.length;
 } else {
 return 0;
 }
}
var total = length('Hello') + length(null);

Flow还了解JavaScript复杂的对象模型:构造器,方法,原型和它们动态扩展以及绑定。已经试验性去支持类型的复杂操作如:绑定对象,抽取keys等等。我们希望未来这些功能使得让为框架指定具体类型成为可能。

类型错误通常报告为定义和实际值不兼容:比如函数调用的参数不足,对象中不包含要访问的属性,或者把字符串当成数字使用。

最后,Flow支持动态类型( any ),这种类型可以绕过类型系统检查:比如可用 any 表示静态分析无法准确判断而报错的location(通常使用反射的情况)。另外Flow在弱模式下遇到上述类型且没有注释类型的话,会自动假定为 any 。

扩展性

为了拓展,Flow根据模块和其它模块的依赖关系以及其它模块提供的类型接口,单独对每个模块进行检查。要生成类型接口,Flow可能需要在模块边界上进行注释。

Flow在一个后台运行的持久化服务器上,维护着整个代码库的语义信息,一开始Flow会对整个代码做一次分析,然后当一系列文件改动的时候(可能是单个文件改动或者在切换分支的时候),服务器会增量式更新改动文件以及由于类型关联的其它相关文件的语义信息。这样,当开发者试图获取类型错误时,它们已经在服务器上了,相应几乎是立即的。这种服务器架构与 Hack 构建在同一种技术之上。

兼容性

Flow致力于支持最新的JavaScript标准。目前已经支持各种ES6特性如destructuring, classes, extended objects, optional function parameters,以及核心API扩展(比如Map, Set, Promise, 和 new methods on Object, Array, 和 Math)。其它特性(尤其是模块)正在开发中。Flow支持CommonJS / Node.js 规范的模块。

var Hello = React.createClass ({
 render: function() {
 return <div>Hello {this.props.name}</div>;
 }
});

如果你在JSX上使用的class名字有错误,Flow会发现这个问题:

React.render(, ...);

而且,如果你在React class里面使用了React.PropTypes规范,你可以对JSX上的attributes做静态类型检查:

var Hello = React.createClass ({
 propTypes: {
 name: React.PropTypes.string.isRequired
 }
 ...
});

Flow就会发现 2f8f9699dcdbe876fd93d41ad18bf586 缺少属性的错误,或者 ac7308d7bf14bbc160f196782c45a835 属性类型的错误。

更多的关于支持React的细节可以在 文档 中找到。

开源

Flow代码大部分用OCaml实现。代码库在活跃更新并且会在未来几个月快速进化。除了在Facebook范围内的数据代码库中运行外,我们希望Flow的分析引擎能用于构建类似的,无论是JavaScript或者其他的语言工具。请让我们知道你是否想加入!

好了,关于Flow之一个新的Javascript静态类型检查器的全部内容先给大家介绍到这里,后续还会持续更新,敬请关注!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn