成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用 Typescript 檢查你的代碼規(guī)范

Loong_T / 2330人閱讀

摘要：公司不同，規(guī)范的內(nèi)容形式檢查方式也不同，但最終是要驗(yàn)收你的規(guī)范。你的代碼不合規(guī)范，提交都提交不上去，這樣就能從入口上保證代碼的規(guī)范性。

背景

越來越多的前端項(xiàng)目開始使用typescript這門靜態(tài)檢查語言了，它包括很多很棒的功能點(diǎn)，在這里就不細(xì)述，根據(jù)靜態(tài)語法檢查和.d.ts生成的代碼提示兩大特性，我們就可以來制定并且檢查代碼規(guī)范，現(xiàn)在我們來詳細(xì)說一下。

代碼規(guī)范

代碼規(guī)范大家應(yīng)該是從開始寫第一行代碼開始別人就開始和你說，要遵循xx代碼規(guī)范。公司不同，規(guī)范的內(nèi)容、形式、檢查方式也不同，但最終是要驗(yàn)收你的規(guī)范。
如果是通過leader code review方式來檢查代碼，那效率也就太低了，最好的方式就是在GIT提交之前做檢查。你的代碼不合規(guī)范，提交都提交不上去，這樣就能從入口上保證代碼的規(guī)范性。
我們?cè)僬f看下前端的代碼規(guī)范情況，前端的代碼主要就是js的代碼，因?yàn)閖s的靈活性以及隨意性，讓工具來檢查代碼的規(guī)范成為不可能，這也是我一直頭疼的事，因?yàn)橐?guī)范這種東西，說再多遍，不來點(diǎn)強(qiáng)制手段，組內(nèi)之前也是不可能達(dá)成一致的。直到Typescript的出現(xiàn)，解決了這個(gè)問題。

Typescript檢查的原理

Typescript是javascript的超集，所以ts在運(yùn)行之前，得先編譯成js，那么這個(gè)編譯的過程，ts的編譯引擎就得知道，文件里包括哪些方法，方法包含哪些參數(shù)，各參數(shù)的定義是什么，類型是什么，總之，所有源信息必須都知道，才能準(zhǔn)確無誤的把ts翻譯成js。這些東西也正是我們需要的，通過這些信息，我們就可以對(duì)比規(guī)范和源信息，來確認(rèn)是否是符合我們制定規(guī)范的代碼。

初步實(shí)現(xiàn)

順著這個(gè)思路，我查了查typescript的官方文檔，果然找到了一個(gè)，叫做Compiler API，最后的那個(gè)例子，是和我們的需求相關(guān)的，把代碼拿下來，也是可以跑通的，所以呢，下一步，就是基于這個(gè)例子進(jìn)行擴(kuò)展，來滿足我們自己的需求。
實(shí)現(xiàn)的過程，也是挺痛苦的，因?yàn)闆]有文檔，也沒有說明，幸虧在vscode可以點(diǎn)進(jìn)行看聲明文件，好消息是可以看到方法的定義，壞消息就是所有的方法的聲明、類型，都沒有注釋，部分需要自己來猜，哈哈，有總比沒有強(qiáng)，照貓畫虎，總算實(shí)現(xiàn)了基本功能。

官方的.d.ts大致就長這樣

開發(fā)之中，有一個(gè)問題比較難解決，就是在目前可觀測(cè)的API中，只能constructor可以取到返回值類型，其他方法API根本不提供，最后借助stackoverflow上提問，解決了這個(gè)問題，有興趣的同學(xué)可以參考下：how to use typescript Compiler API to get normal function info, eg: returnType/parameters?

檢查你的代碼

現(xiàn)在已經(jīng)可以檢查你的代碼了，我們上面也說了，最好的檢查時(shí)機(jī)是開發(fā)人員提交的時(shí)候，這時(shí)會(huì)檢查所有的代碼，只有所有的代碼都符合規(guī)范，才會(huì)提交成功，這是我們最理想的情況。
按照這個(gè)思路，我們可以查到，Git有很多鉤子，pre-commit、commit-msg、post-commit等等，我們使用pre-commit：提交前檢查，會(huì)執(zhí)行.git/hooks/pre-commit下的腳本文件，但是這個(gè)文件分布在組內(nèi)所有人的筆記本中，并且不能增加版本控制。帶著這樣的疑問，我們找到了pre-commit這個(gè)神器，它的實(shí)現(xiàn)原理也是修改上面的文件，不過它從node層屏蔽了實(shí)現(xiàn)細(xì)節(jié)，我們只要在package.json里面增加一個(gè)script就可以實(shí)現(xiàn)我們要的功能。

配置大概是這樣：

...
"pre-commit": ["commit"],
"script":{
    ...
    "commit": "ts-node verify.ts"
    ...
}
...

這樣在git里面commit（不管使用命令行還是SourceTree這樣圖形界面）的時(shí)候就會(huì)執(zhí)行ts-node verify.ts，檢查要是失敗了，就會(huì)把錯(cuò)誤信息打印到控制臺(tái)上，并且提交會(huì)失敗，直到所有的已定規(guī)則都驗(yàn)證通過，才會(huì)提交成功。

檢查失敗，大致就是這樣的：

還有一個(gè)更大的作用

我們已經(jīng)通過上一步，能夠檢查我們的規(guī)范了，知道代碼的所有信息，比如生成.d.ts文件！對(duì)一個(gè)對(duì)外提供的工具庫來講，如果沒有一套完整的.d.ts文件進(jìn)行代碼提示的話，那就顯的太不專業(yè)了。如果要生成一個(gè)完整的提示文件，就必須要求你的類、方法、參數(shù)、返回值都要有完整的注釋，這些就應(yīng)該在你的代碼規(guī)范中。

我們來看一下，比較好的例子：

知道了所有的信息，生成這個(gè)文件其實(shí)就是字符串的拼接，沒什么技術(shù)含量，不過生成的格式還得注意一下。

兼容所有情況的.d.ts寫法

一般我們使用一個(gè)庫文件的時(shí)候，都會(huì)有三種用法：

import Util from "xxx/Util"
import {DateTime, Fiel} from "xxx/Util"
import * as Util from "xxx/Util"

在使用的時(shí)候，這三種形式所需要的.d.ts文件的格式也是不一樣的，所以作為對(duì)外提供服務(wù)的庫文件來說，所有的使用方式，我們都應(yīng)該兼容。經(jīng)過多次嘗試，這樣格式的.d.ts文件是兼容所有用法：

export class DateTime {
    static dateFormat(....)
}

declare const exDe: {
    DateTime: typeof DateTime
}

export default exDe
源碼

Demo的源碼以及使用效果，用力點(diǎn)我
Demo中用到的代碼檢查工具，用力點(diǎn)我

使用效果

檢查失敗的情況

檢查成功的情況

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107269.html

相關(guān)文章

  • 在Typescript項(xiàng)目中，如何優(yōu)雅的使用ESLint和Prettier

    摘要：對(duì)于項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇和。此外由于性能問題，官方?jīng)Q定全面采用，甚至把倉庫作為測(cè)試平臺(tái)，而的解析器也成為獨(dú)立項(xiàng)目，專注解決雙方兼容性問題。最近在我的項(xiàng)目的編碼規(guī)范中全量的用代替了針對(duì)其中遇到的問題做一個(gè)記錄。 ??對(duì)于Typescript項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過配置解析器，也能規(guī)范TS代碼。此外由...

    chemzqm 評(píng)論0 收藏0

  • 在Typescript項(xiàng)目中，如何優(yōu)雅的使用ESLint和Prettier

    摘要：對(duì)于項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇和。此外由于性能問題，官方?jīng)Q定全面采用，甚至把倉庫作為測(cè)試平臺(tái)，而的解析器也成為獨(dú)立項(xiàng)目，專注解決雙方兼容性問題。最近在我的項(xiàng)目的編碼規(guī)范中全量的用代替了針對(duì)其中遇到的問題做一個(gè)記錄。 ??對(duì)于Typescript項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過配置解析器，也能規(guī)范TS代碼。此外由...

    WilsonLiu95 評(píng)論0 收藏0

  • 在Typescript項(xiàng)目中，如何優(yōu)雅的使用ESLint和Prettier

    摘要：對(duì)于項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇和。此外由于性能問題，官方?jīng)Q定全面采用，甚至把倉庫作為測(cè)試平臺(tái)，而的解析器也成為獨(dú)立項(xiàng)目，專注解決雙方兼容性問題。最近在我的項(xiàng)目的編碼規(guī)范中全量的用代替了針對(duì)其中遇到的問題做一個(gè)記錄。 ??對(duì)于Typescript項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過配置解析器，也能規(guī)范TS代碼。此外由...

    ?。?。 評(píng)論0 收藏0

  • web前端學(xué)習(xí)方案

    摘要：學(xué)習(xí)計(jì)劃認(rèn)識(shí)語義化的意義。這意味著可以在編程語言中很方便地表達(dá)靜態(tài)或動(dòng)態(tài)的數(shù)據(jù)流，而相關(guān)的計(jì)算模型會(huì)自動(dòng)將變化的值通過數(shù)據(jù)流進(jìn)行傳播。熟悉，理解響應(yīng)式編程思想在根據(jù)官方文檔學(xué)習(xí)的時(shí)候請(qǐng)優(yōu)先理解它的思想。 學(xué)習(xí)計(jì)劃 HTML5 認(rèn)識(shí)HTML5語義化的意義。 熟悉HTML5新特性 了解如何快速的加載HTML頁面，以及完善用戶體驗(yàn)如：閱讀模式、無障礙設(shè)置， 了解Canvas、Svg CS...

    imccl 評(píng)論0 收藏0

  • web前端學(xué)習(xí)方案

    摘要：學(xué)習(xí)計(jì)劃認(rèn)識(shí)語義化的意義。這意味著可以在編程語言中很方便地表達(dá)靜態(tài)或動(dòng)態(tài)的數(shù)據(jù)流，而相關(guān)的計(jì)算模型會(huì)自動(dòng)將變化的值通過數(shù)據(jù)流進(jìn)行傳播。熟悉，理解響應(yīng)式編程思想在根據(jù)官方文檔學(xué)習(xí)的時(shí)候請(qǐng)優(yōu)先理解它的思想。 學(xué)習(xí)計(jì)劃 HTML5 認(rèn)識(shí)HTML5語義化的意義。 熟悉HTML5新特性 了解如何快速的加載HTML頁面，以及完善用戶體驗(yàn)如：閱讀模式、無障礙設(shè)置， 了解Canvas、Svg CS...

    mylxsw 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<