Flow, 새로운 Javascript 정적 유형 checker_javascript 기술

오늘 우리는 새로운 Javascript 정적 유형 검사기인 Flow의 얼리 어답터 버전을 출시하게 되어 기쁘게 생각합니다. Flow는 개발 효율성과 코드 품질을 향상시키기 위해 Javascript에 정적 유형 검사를 추가합니다. 보다 구체적으로 정적 유형 검사는 런타임에만 발견할 수 있는 일부 오류를 찾는 데 도움이 되는 조기 오류 검사와 코드 유지 관리, 검색, 리팩터링 및 최적화에 도움이 되는 코드 인텔리전스와 같은 이점을 제공합니다.

우리는 Flow의 모든 기능이 기존 Javascript 사양을 기반으로 구축되도록 설계했습니다. Flow는 백그라운드에서 적극적으로 작동하므로 추가 컴파일 오버헤드가 최소화됩니다. Flow는 개발자에게 코드 작성을 요구하지 않습니다. 복잡한 알고리즘 세트를 사용하여 익숙한 코딩 스타일을 분석합니다.

Flow는 아직 초기 단계이지만 Facebook에서는 이미 사용하고 있습니다. 자신의 프로젝트에서 이 기능을 즐겨 사용하시기 바라며 피드백을 기다리겠습니다. flowtype.org를 방문하면 빠르게 시작할 수 있습니다.

개요

Facebook은 Javascript를 좋아합니다. Javascript는 빠르고 표현력이 뛰어나며 어디에서나 실행되며 제품 구축에 훌륭한 언어입니다. 동시에 개발자는 정적 타이핑이 부족하여 어려움을 겪고 있습니다. 버그는 찾기 어렵고(예: 충돌 원인이 깊이 숨겨져 있음), 코드 유지 관리는 악몽입니다(예: 모든 종속성을 모르고 리팩토링하는 것은 매우 위험합니다). Flow는 Javascript를 사용하는 개발자의 속도와 효율성을 향상시킵니다.

Javascript 위에 정적 시스템 레이어를 추가하는 것은 간단하지 않습니다. Javascript의 빌딩 블록은 표현력이 매우 뛰어나며 단순한 유형 시스템은 적절한 의미를 정확하게 결합할 수 없습니다. 다양한 Javascript 프로그래밍 패러다임과 습관을 지원하기 위해 Flow는 일반적으로 컴파일 타임에 의미를 추출하는 데 사용되는 데이터 흐름 및 제어 흐름과 같은 분석 기술을 도입합니다. 그런 다음 추출된 정보를 사용하고 고급 유형 원칙을 추가하여 유형 추론을 수행합니다. 물론 강력한 정적 유형 분석만으로는 충분하지 않습니다. Javascript 코드 기반은 매우 클 수 있으므로 개발자의 편집 실행 프로세스를 방해하지 않도록 매우 빠른 유형 검사가 필요합니다. Flow는 모든 유형이 모듈 경계로 제한되어 모듈별로 분석을 수행합니다. 이는 궁극적으로 Hack과 유사한 고도로 병렬적이고 증분적인 검사 아키텍처를 초래합니다. 이로 인해 수백만 줄의 코드에서도 유형 검사가 매우 반응적으로 이루어집니다.

Flow의 유형 확인은 선택 사항입니다. 모든 것을 한 번에 확인할 필요는 없습니다. 그러나 Flow의 설계에서는 대부분의 Javascript 코드 유형이 암시적으로 정적으로 유형화되어 있다고 가정합니다. 비록 유형이 코드의 모든 곳에 나타나지 않더라도 개발자가 생각하는 코드의 정확성을 기반으로 추론할 수 있는 형태로 존재합니다. Flow는 가능할 때마다 이러한 유형을 추론합니다. 즉, 코드를 변경하지 않고도 유형 오류를 찾을 수 있습니다. 반면, 프레임워크에 존재하는 Javascript 코드와 같은 일부에서는 리플렉션을 광범위하게 사용하므로 정적 유형 추론이 매우 어렵습니다. 이러한 종류의 자연스러운 동적 코드의 경우 유형 검사에는 오류가 가득하므로 Flow는 이러한 코드에 신뢰를 추가하고 계속할 수 있는 기능을 제공합니다. 이 디자인은 Facebook의 대규모 Javascript 코드 베이스를 통해 내부적으로 입증되었습니다. 대부분의 코드는 암시적 정적 유형 검사 항목을 전달하지 않으므로 개발자는 주석을 추가하지 않고도 코드 유형 오류를 확인할 수 있습니다.

대부분의 JavaScript 코드가 동적으로 입력된다는 가정을 약화시키고 어떤 코드를 정적으로 입력해야 하는지 표현하는 것은 개발자의 몫으로 남겨두기 때문에 Flow가 다른 JavaScript 유형 시스템(예: TypeScript)과 근본적으로 다릅니다. 일반적으로 이러한 유형의 설계에서는 검사 범위가 낮아집니다. 즉, 감지되는 유형 오류가 적고 도구 효율성이 떨어집니다. 어떤 경우에는 합리적이지만 일반적으로 이 디자인은 많은 추가 노력 없이는 실제 개발에 충분한 도움을 제공하지 않습니다. 그럼에도 불구하고 Flow를 사용하면 이러한 종류의 약화 유형 검사를 쉽게 수행할 수 있으며 이는 기존 코드에 매우 유용합니다.

이 차이점을 설명하려면 다음 예를 살펴보세요.

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就会发现 缺少属性的错误，或者 属性类型的错误。

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

开源

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

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