Heim Web-Frontend js-Tutorial Flow, ein neuer statischer Javascript-Typ-Checker_Javascript-Fähigkeiten

Flow, ein neuer statischer Javascript-Typ-Checker_Javascript-Fähigkeiten

May 16, 2016 pm 03:24 PM
Statische Typprüfung

Heute freuen wir uns, eine Early-Adopter-Version von Flow zu veröffentlichen, einem neuen statischen Javascript-Typprüfer. Flow fügt Javascript eine statische Typprüfung hinzu, um die Entwicklungseffizienz und Codequalität zu verbessern. Genauer gesagt bietet die statische Typprüfung Vorteile wie eine frühe Fehlerprüfung, die Ihnen hilft, einige Fehler zu finden, die nur zur Laufzeit gefunden werden können, und Code-Intelligenz, die die Wartung, Erkennung, Umgestaltung und Optimierung des Codes unterstützt.

Wir haben alle Funktionen von Flow so konzipiert, dass sie auf vorhandenen Javascript-Spezifikationen aufbauen. Da Flow aktiv im Hintergrund arbeitet, ist der zusätzliche Kompilierungsaufwand minimal. Flow erfordert nicht, dass Entwickler Code schreiben – es verwendet einen komplexen Satz von Algorithmen, um Ihren vertrauten Codierungsstil zu analysieren.

Flow befindet sich noch im Anfangsstadium, aber wir nutzen es bereits bei Facebook. Wir wünschen Ihnen viel Spaß beim Einsatz in Ihren eigenen Projekten und freuen uns auf Ihr Feedback. Sie können schnell loslegen, indem Sie flowtype.org besuchen.

Übersicht

Facebook liebt Javascript; es ist schnell, ausdrucksstark, läuft überall und ist eine großartige Sprache zum Erstellen von Produkten. Gleichzeitig beunruhigt die fehlende statische Typisierung die Entwickler. Fehler sind schwer zu finden (z. B. liegt die Ursache des Absturzes tief im Verborgenen) und die Codepflege ist ein Albtraum (z. B. ist ein Refactoring ohne Kenntnis aller Abhängigkeiten sehr riskant). Flow verbessert die Geschwindigkeit und Effizienz von Entwicklern, die Javascript verwenden.

Es ist nicht einfach, eine Schicht eines statischen Systems über Javascript hinzuzufügen. Die Bausteine ​​von Javascript sind äußerst ausdrucksstark und ein einfaches Typsystem kann die richtige Semantik nicht genau kombinieren. Um verschiedene Javascript-Programmierparadigmen und -gewohnheiten zu unterstützen, führt Flow Analysetechnologien wie Datenfluss und Kontrollfluss ein, die normalerweise zum Extrahieren von Semantik zur Kompilierungszeit verwendet werden. Verwenden Sie dann die extrahierten Informationen und fügen Sie erweiterte Typprinzipien hinzu, um Typinferenzen durchzuführen. Natürlich reicht eine starke statische Typanalyse nicht aus – Javascript-Codebasen können sehr umfangreich sein, was eine blitzschnelle Typprüfung erfordert, um den Bearbeitungs- und Ausführungsprozess des Entwicklers nicht zu unterbrechen. Flow führt die Analyse modulweise durch, wobei alle Typen auf Modulgrenzen beschränkt sind. Dies führt letztendlich zu einer hochparallelen, inkrementellen Prüfarchitektur, ähnlich wie bei Hack. Dadurch ist die Typprüfung selbst bei Millionen von Codezeilen sehr reaktionsschnell.

Die Typprüfung von Flow ist optional – Sie müssen nicht alles auf einmal überprüfen. Das Design hinter Flow geht jedoch davon aus, dass die meisten Javascript-Codetypen implizit statisch typisiert sind. Obwohl Typen möglicherweise nicht überall im Code vorkommen, existieren sie in einer Form, die vom Entwickler anhand der gedanklichen Korrektheit abgeleitet werden kann. Flow leitet diese Typen nach Möglichkeit ab, sodass Typfehler gefunden werden können, ohne dass der Code geändert werden muss. Andererseits nutzen einige, wie etwa in Frameworks vorhandener Javascript-Code, in großem Umfang Reflektion, was die statische Typinferenz sehr schwierig macht. Bei dieser Art von natürlich dynamischem Code ist die Typprüfung voller Fehler, sodass Flow die Möglichkeit bietet, diesem Code Vertrauen zu verleihen und fortzufahren. Dieses Design wird intern durch die große Javascript-Codebasis von Facebook bewiesen: Der meiste Code übergibt keine impliziten statischen Typprüfungseinträge, die es Entwicklern ermöglichen, Codetypfehler zu überprüfen, ohne Kommentare hinzuzufügen.

Dadurch unterscheidet sich Flow grundlegend von anderen JavaScript-Typsystemen (z. B. TypeScript), indem die Annahme geschwächt wird, dass der meiste JavaScript-Code dynamisch typisiert wird, und es dem Entwickler überlassen wird, anzugeben, welcher Code statisch typisiert werden soll. Typischerweise führt diese Art von Design zu einer geringeren Prüfabdeckung: Es werden weniger Typfehler erkannt und das Tool ist weniger effizient. Obwohl dieses Design in einigen Fällen sinnvoll ist, bietet es im Allgemeinen nicht genügend Hilfe für die praktische Entwicklung ohne großen zusätzlichen Aufwand. Nichtsdestotrotz können Sie mit Flow diese Art der abgeschwächten Typprüfung problemlos durchführen, was für vorhandenen Code sehr nützlich ist.

Um diesen Unterschied zu erklären, sehen Sie sich das folgende Beispiel an:

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

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);
Nach dem Login kopieren

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

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

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>;
 }
});
Nach dem Login kopieren

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

React.render(, ...);
Nach dem Login kopieren

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

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

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

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

开源

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

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

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ersetzen Sie Stringzeichen in JavaScript Ersetzen Sie Stringzeichen in JavaScript Mar 11, 2025 am 12:07 AM

Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi

Wie erstelle ich meine eigenen JavaScript -Bibliotheken? Wie erstelle ich meine eigenen JavaScript -Bibliotheken? Mar 18, 2025 pm 03:12 PM

In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.

Wie optimiere ich den JavaScript -Code für die Leistung im Browser? Wie optimiere ich den JavaScript -Code für die Leistung im Browser? Mar 18, 2025 pm 03:14 PM

In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.

JQuery Matrixeffekte JQuery Matrixeffekte Mar 10, 2025 am 12:52 AM

Bringen Sie Matrix -Filmeffekte auf Ihre Seite! Dies ist ein cooles JQuery -Plugin, das auf dem berühmten Film "The Matrix" basiert. Das Plugin simuliert die klassischen grünen Charakter-Effekte im Film und wählen Sie einfach ein Bild aus, und das Plugin verwandelt es in ein mit numerischer Zeichen gefüllte Bild im Matrix-Stil. Komm und probiere es aus, es ist sehr interessant! Wie es funktioniert Das Plugin lädt das Bild auf die Leinwand und liest die Pixel- und Farbwerte: Data = ctx.getImagedata (x, y, setting.grainize, setting.grainesize) .data Das Plugin liest geschickt den rechteckigen Bereich des Bildes und berechnet JQuery, um die durchschnittliche Farbe jedes Bereichs zu berechnen. Dann verwenden Sie

Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools? Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools? Mar 18, 2025 pm 03:16 PM

In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.

So bauen Sie einen einfachen JQuery Slider So bauen Sie einen einfachen JQuery Slider Mar 11, 2025 am 12:19 AM

In diesem Artikel werden Sie mit der JQuery -Bibliothek ein einfaches Bildkarousel erstellen. Wir werden die BXSLIDER -Bibliothek verwenden, die auf JQuery basiert und viele Konfigurationsoptionen zum Einrichten des Karussells bietet. Heutzutage ist Picture Carousel zu einem Muss auf der Website geworden - ein Bild ist besser als tausend Wörter! Nachdem Sie sich entschieden haben, das Bild -Karussell zu verwenden, ist die nächste Frage, wie Sie es erstellen. Zunächst müssen Sie hochwertige, hochauflösende Bilder sammeln. Als nächstes müssen Sie ein Bildkarousel mit HTML und einem JavaScript -Code erstellen. Es gibt viele Bibliotheken im Web, die Ihnen helfen können, Karussell auf unterschiedliche Weise zu erstellen. Wir werden die Open -Source -BXSLIDER -Bibliothek verwenden. Die BXSLIDER -Bibliothek unterstützt reaktionsschnelles Design, sodass das mit dieser Bibliothek gebaute Karussell an alle angepasst werden kann

Verbesserung des strukturellen Markups mit JavaScript Verbesserung des strukturellen Markups mit JavaScript Mar 10, 2025 am 12:18 AM

Wichtige Punkte erweiterte strukturierte Tagging mit JavaScript können die Zugänglichkeit und Wartbarkeit von Webseiteninhalten erheblich verbessern und gleichzeitig die Dateigröße reduzieren. JavaScript kann effektiv verwendet werden, um HTML -Elementen dynamisch Funktionen hinzuzufügen, z. Durch das Integrieren von JavaScript in strukturierte Tags können Sie dynamische Benutzeroberflächen erstellen, z. B. Tabletten, für die keine Seiten -Aktualisierung erforderlich ist. Es ist entscheidend sicherzustellen, dass JavaScript -Verbesserungen die grundlegende Funktionalität von Webseiten nicht behindern. Erweiterte JavaScript -Technologie kann verwendet werden (

So laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunter So laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunter Mar 10, 2025 am 01:01 AM

Datensätze sind äußerst wichtig für den Aufbau von API -Modellen und verschiedenen Geschäftsprozessen. Aus diesem Grund ist das Import und Exportieren von CSV eine häufig benötigte Funktionalität. In diesem Tutorial lernen Sie, wie Sie eine CSV-Datei in einem Angular herunterladen und importieren.

See all articles