jslint、flow 與 typescript

habren 發(fā)布于2019-08-19 18:21 / 1547人閱讀

摘要：命令行目錄文件運行后將會檢查目錄下的文件，并將有問題的語句打印出來。使用成本中搭配編輯器使用是開發(fā)過程中的最佳實踐。是推出的一款靜態(tài)類型檢查工具。收益偏高對代碼做了類型檢查，可以避免之類的錯誤。

jslint airbnb-config

jslint 的作用是對 js 做語法檢查，他可以使代碼更加規(guī)范、清晰，而 airbnb-config 是其中最流行的一套檢查規(guī)則。

安裝方法

npm install jslint eslint-config-airbnb
然后在項目目錄下創(chuàng)建 .eslintrc 文件，輸入內(nèi)容「{ "extends": "airbnb", "rules": { "strict": 0 }」。

命令行

jslint <目錄|文件>
運行后將會檢查目錄下的文件，并將有問題的語句打印出來。

搭配 webpack

需要安裝 jslint-loader，并且在 webpack.config.js 的 preloaders 里做一些配置。
當 webpack 編譯的時候就會調(diào)用 jslint 做檢查，如果發(fā)現(xiàn)不符合規(guī)范的地方，就會自動報錯。

搭配編輯器

Atom 編輯器下可以安裝 linter-eslint 插件，可以在編輯文件的時候?qū)崟r提示語法錯誤。

使用成本（中）

搭配編輯器使用是開發(fā)過程中的最佳實踐。另外兩種方法都會導致代碼編寫之后巨量文件需要修改的問題。
但是在使用過程中也會遇到各種各樣的問題，比如在函數(shù)內(nèi)聲明一個變量導致多行代碼的改動，函數(shù)內(nèi)部不能修改參數(shù)等等，需要花費一點時間去習慣。

遷移成本（低）

針對舊項目，我們可以只用 jslint 作為編輯器的插件，只在寫代碼的時候會給出提示，不影響代碼的編譯。
針對新項目，我們可以將 jslint 同時用在編輯器和 webpack 上。

收益（中）

因為 jslint 主要是對 js 語法和格式做檢查，所以收益主要是使得代碼更規(guī)范。

flow

flow 是 facebook 推出的一款 js 靜態(tài)類型檢查工具。由 ocam 語言編寫。

安裝方法

sudo brew install flow

使用方法

需要檢查的 js 文件需要在文件頂部注明。
// @flow
然后在項目目錄下運行 flow init，再調(diào)用 flow 來執(zhí)行檢查。

搭配 babel

flow 官方提供了一個 babel 插件 transform-flow-strip-types 專門用于刪除 flow 定義的類型聲明。

搭配編輯器

atom 下有個 linter-flow 插件可以使用，作為實時的檢查。

使用成本（偏高）

如果推廣使用的話，首先是學習成本的問題，但好在 flow 并不算復雜。
另外一個問題是用了 flow 的話就不能用 jslint 了，雖然 flow 會檢查代碼語言的合法性，但想要更嚴格的格式檢查就沒辦法了。
使用 flow 一般的模式就是在開發(fā)環(huán)境下搭配編輯器做實時的檢查，然后編譯或者運行的時候用 babel 把類型聲明的語句刪除掉。

遷移成本（低）

舊項目如果之前沒有用過 babel 的話遷移會比較麻煩，因為 flow 依賴 babel。
新項目的話成本則很低，只需要加上 babel 插件就行了。

收益（偏高）

flow 對代碼做了類型檢查，可以避免「undefined is not a function」之類的錯誤。而且由于類型固定了，在 v8 上的執(zhí)行效率會更高。

typescript

typescript 是微軟出品的一個 js 超集，為 js 帶來了類型等一系列功能，使得 js 有了類似于 java 般的開發(fā)體驗。

安裝方法

npm install -g typescript

使用方法

typescript 文件是以 ts 做后綴的。
在項目中運行 tsc --init 做初始化。
然后 tsc <文件名> 做編譯，會生成對應的 js 文件。

搭配 webpack

ts-loader 可以處理 typescript 的編譯。

搭配編輯器

atom-typescript 是 typescript 官方出品的 atom 插件，其包含的如「goto declaration」，「quick fix」，「live error analysis」等功能可以帶來如 java ide 般的開發(fā)體驗。

使用成本（高）

typescript 的學習成本比 flow 要高，他包含了泛型、接口等很多 java、C# 的概念，對于熟悉這兩種語言的人來說 TS 可能上手難度會很簡單。
但如果要構建大型程序的話 TS 也許會蠻合適，TS 的自動提示可以精確的列出一個變量的所有方法，其它編輯器的功能也能很好的提高開發(fā)效率。
typescript 也支持 jsx 語法。

遷移成本（高）

舊項目基本不能遷移。
新項目需要加上 ts 的 webpack 插件。

收益（高）

因為 TS 提供了很多強類型語言的功能，所以可以使得代碼更健壯，編譯后的代碼也是針對 V8 等 js 引擎優(yōu)化過的，所以執(zhí)行效率也不會太慢。
官方的編輯器插件還提供「Format code on save」的功能，可以保證輸出的代碼風格一致，這一功能可以替代 jslint。
TS 1.8 版本里支持 jsx，await, async 等 es6、es7 的語法，所以可以在項目中省去 babel。

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79490.html

類型系統(tǒng)-前端進化的里程碑

摘要：這些優(yōu)勢，其實都是類型系統(tǒng)所帶來的強類型語言所具有的開發(fā)優(yōu)勢，無論是在開發(fā)體驗還是后期項目維護上，都要優(yōu)于目前的。大半夜的JavaScript Weekly發(fā)來賀電：TypeScript 2.0 Final Released！沒錯，繼Angular2發(fā)布之后，TypeScript今天也發(fā)布了2.0版本，這不禁讓我浮想一番。如果要說TS和JS最明顯的差別，我想一定是Type Syst...

wangzy2019 2019-08-20 11:14 評論0 收藏0
JavaScript開發(fā)工具大全

摘要：發(fā)布于之后，采用了完全不同的方式，使用函數(shù)定義任務。它允許開發(fā)者使用它們的補丁和更新來修復這些安全漏洞。提供了工具用于掃描依賴來監(jiān)測漏洞。是一個開源診斷工具，用于和應用。是和開發(fā)的一款新的包管理工具。與相比，它解決了安全性能以及一致性問題。譯者按: 最全的JavaScript開發(fā)工具列表，總有一款適合你！原文: THE ULTIMATE LIST OF JAVASCRIPT TOO...

nifhlheimr 2019-08-20 17:34 評論0 收藏0
Flow - JS靜態(tài)類型檢查工具

摘要：介紹是個的靜態(tài)類型檢查工具，由出品的開源碼項目，問世只有一年多，是個相當年輕的項目。現(xiàn)在，提供了另一個新的選項，它是一種強靜態(tài)類型的輔助檢查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目標是提供一些Flow工具的介紹與使用建議。Flow本質(zhì)上也只是個檢查工具，它并不會自動修正代碼中的錯誤，也不會強制...

seanHai 2019-08-20 13:39 評論0 收藏0
前端周刊第59期：選 Flow 還是 TypeScript？

摘要：周末是時隔兩月的家人團聚，而每次內(nèi)容的準備平均需要我集中精力工作小時，所以第期的內(nèi)容今早才準備好，對不住大家了。下面是本周精選內(nèi)容，請享用。本文作者王仕軍，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權，非商業(yè)轉(zhuǎn)載請注明出處。 showImg(https://segmentfault.com/img/remote/1460000009742537?w=1240&h=509); 周末是時隔兩月的家人團聚，而...

Julylovin 2019-08-21 11:44 評論0 收藏0
阿里云前端周刊 - 第 15 期

摘要：推薦為什么我們選擇本文是工程師記述在前端技術選型時選用的考慮過程。能夠保證較好的類型覆蓋，但是其對于多態(tài)性的支持并不是很好，并且的社區(qū)也相對活躍。引擎就是為解決這一問題而生，在中也是采用該引擎來解析。推薦 1. 為什么我們選擇 TypeScript https://redditblog.com/2017/0... 本文是 Reddit 工程師 Niranjan Ramadas 記述在...

stefanieliang 2019-08-20 17:52 評論0 收藏0