Flow vs TypeScript. Ո՞րն է ավելի լավ ստատիկ ստուգիչը:

Բացահայտեք այս գործիքների առավելություններն ու թերությունները, որոնք օգնում են խստացնել ձեր կոդը:

JavaScript գործիքները Flow և TypeScript շատ առումներով նման են: Այնուամենայնիվ, նրանք տարբերվում են իրենց ֆունկցիոնալությամբ և ստատիկ խաղաքարերով:

Պարզեք, թե ինչպես են Flow-ը և TypeScript-ը համեմատվում և որն է լավագույն ստատիկ ստուգիչը ձեր հաջորդ նախագծի համար:

Ի՞նչ է հոսքը:

Flow-ը ստատիկ տիպի ստուգիչ գործիք է JavaScript-ի համար, որը ստեղծվել է Facebook-ի կողմից՝ նախապես կոմպիլյացիայի և գործարկման կոդի սխալները հայտնաբերելու համար: Այն դա անում է՝ վերահսկելով ձեր ծածկագրի փոխանցած արժեքները և ինչպես են փոխվում դրանց տվյալների տեսակները ժամանակի ընթացքում: Ստատիկ ստուգման այս համակարգը բարելավում է հուսալիությունը և ընթեռնելիությունը: Այն նաև օգնում է նվազեցնել ձեր JavaScript կոդում սխալների առաջացումը:

Ի՞նչ է TypeScript-ը:

TypeScript-ը պարզապես տիպերի ստուգիչ չէ, ինչպես Flow-ը, այլ խիստ տպագրված ծրագրավորման լեզու: Microsoft-ը ստեղծել է լեզուն՝ այն կառուցելով JavaScript-ի վրա:

Ըստ պայմանականության, դուք պետք է ստեղծեք TypeScript ֆայլեր .ts ֆայլի ընդլայնմամբ: Դուք կարող եք TypeScript ֆայլը կազմել JavaScript կոդի մեջ, այնպես որ, որտեղ JavaScript-ն աշխատի, TypeScript-ը նույնպես կարող է գործարկվել:

Հոսքի կարգավորում ձեր JavaScript հավելվածի համար

Դուք կարող եք ինտեգրել Flow-ը ցանկացած JavaScript շրջանակի մեջ, որը դուք որոշում եք օգտագործել ձեր նախագծի համար: Դուք պետք է կազմաձևեք JavaScript-ի կոմպիլյատորը, ինչպիսին է Babel-ը, որպեսզի կարգավորի ձեր կոդի բոլոր հոսքերի տեսակները և այն կազմի վանիլային JavaScript-ում:

Flow-ը ձեր նախագծում տեղադրելու համար գործարկեք հետևյալ հրամանը.

yarn add --dev flow-bin

Հաջորդը, դուք պետք է գլոբալ տեղադրեք Flow հրամանի տողի ինտերֆեյսը: Այս CLI-ն ապահովում է մի քանի հրամաններ հոսքային հավելվածներ կառուցելու համար:

MacOS-ում օգտագործեք Homebrew՝ Flow CLI-ի տեղադրման համար.

brew install flow-cli

Դուք պետք է իմանաք, թե ինչպես օգտագործել Windows PowerShell-ը՝ Flow-ը Windows սարքի վրա տեղադրելու համար:

Flow CLI-ն Windows-ում տեղադրելու համար գործարկեք այս սկրիպտը ձեր PowerShell տերմինալում.

iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"

Հոսքի նախագծերը պահանջում են .flowconfig ֆայլ՝ գործիքի բոլոր անհրաժեշտ կազմաձևումների համար:

Գործարկեք այս հրամանը՝ նոր կամ գոյություն ունեցող նախագծում Flow կազմաձևման ֆայլ ստեղծելու համար.

npm run flow init

Ուշադիր եղեք, որ կոնկրետ շրջանակները կարող են լռելյայն ուղարկել նախագծեր Flow կազմաձևման ֆայլով:

Վերջին բանը, որ պետք է անել, ձեր package.json ֆայլին ավելացնել Flow սցենարը.

"scripts": {
    "flow": "flow"
},

Դուք այժմ հաջողությամբ կարգավորել եք Flow-ը ձեր JavaScript հավելվածում գործարկելու համար:

TypeScript-ի կարգավորում ձեր նախագծում

Գործարկեք հետևյալ հրամանը՝ ձեր նախագծում TypeScript-ը տեղադրելու համար.

npm install typescript --save-dev

Դուք նաև պետք է տեղադրեք կոմպիլյատորը՝ TypeScript կոդը վանիլային JavaScript-ում կազմելու համար: Ձեզ նույնպես կարող է անհրաժեշտ լինել կարգավորել TypeScript-ի կազմաձևը՝ աշխատանքային հոսքի ավելի լավ փորձի համար:

Տեղադրեք TypeScript կոմպիլյատորը գլոբալ այս հրամանով.

npm install -g typescript

tsconfig.json կազմաձևման ֆայլը սկզբնավորելու համար ձեր տերմինալում մուտքագրեք հետևյալ հրամանը.

tsc --init

Վերոնշյալ հրահանգները ձեզ կսկսեն օգտագործել TypeScript-ը ձեր նախագծում:

Հոսքով շենք

JavaScript ֆայլում Flow կոդը գրելու համար ցանկացած արտահայտությունից կամ հայտարարությունից առաջ հայտարարեք Flow շարահյուսությունը կոդի վերևում.

// @flow

Դուք կարող եք սահմանել փոփոխական և ֆունկցիայի տվյալների տեսակներ՝ օգտագործելով ծանոթագրությունը: Այնուհետև Flow-ը սխալ կառաջացնի, եթե ակնկալվող տեսակը չկատարվի:

Օրինակ:

// @flow
let foo : number = "Hello";

Flow-ն այստեղ սխալ կառաջացնի, քանի որ foo-ի ակնկալվող արժեքի տեսակը թիվ է, ոչ թե տող:

Գործարկեք npm run flow՝ տերմինալում սխալի ելքը տեսնելու համար.

Եթե միացնեք Flow ընդլայնումը ցանկացած նախընտրած տեքստային խմբագրիչի ներսում, կցուցադրեք ձեր խմբագրի սխալները, երբ կոդավորում եք:

Flow-ը նաև օգտագործում է տիպի եզրակացություն՝ որոշելու համար, թե որն է արտահայտության ակնկալվող արժեքը:

Օրինակ:

// @flow
function doSomething(value) {
    return value * "hello";
};
 
let result = doSomething(6);

Դուք չեք կարող թվաբանական գործողություններ կատարել վեց թվի և բարև տողի միջև:

npm գործարկման հոսքի ելքը կլինի սխալ.

Զարգանում է TypeScript-ով

TypeScript-ի տիպի շարահյուսությունը շատ նման է Flow-ի: Դուք կարող եք սահմանել փոփոխականների և ֆունկցիաների տեսակները տիպի անոտացիայով, ինչպես կկատարեիք Flow-ում:

TypeScript-ը առաքվում է Flow-ի նման մի քանի այլ հատկանիշներով, օրինակ՝ տիպի եզրակացություն:

Վերցրեք օրինակ TypeScript կոդը.

// Typescript.ts
type Result = "pass" | "fail"
 
function verify(result: Result) {
    if (result === "pass") {
        console.log("Passed")
    } else {
        console.log("Failed")
    }
}

Դուք կարող եք գործարկել tsc Typescript.ts՝ այս ծածկագիրը պարզ վանիլային JavaScript-ում հավաքելու համար:

Սա կլինի նույն TypeScript կոդը, որը կազմված է վանիլային JavaScript-ում.

function verify(result) {
    if (result === "pass") {
        console.log("Passed")
    } else {
        console.log("Failed")
    }
}

TypeScript-ի և Flow-ի առավելություններն ու թերությունները

Այժմ դուք գիտեք, թե ինչպես սկսել օգտագործել երկու գործիքները ձեր JavaScript նախագծում: Դուք պետք է իմանաք յուրաքանչյուրի օգտագործման դրական և բացասական կողմերը:

Ինտեգրում

Flow-ի օգտագործման կարգաբերման գործընթացը մի փոքր ավելի բարդ է՝ ի տարբերություն TypeScript-ի: Դուք պետք է կարգավորեք JavaScript կոմպիլյատոր, ինչպիսին է Babel-ը կամ flow-remove-types-ը, ձեր կոդից հոսքի տեսակները հեռացնելու համար: TypeScript-ը ներառում է կոմպիլյատոր՝ TypeScript կոդը JavaScript-ի փոխակերպելու համար՝ հեշտացնելով ինտեգրումը:

Գործիքավորում

TypeScript-ն ունի շատ ավելի լավ գործիքակազմ, և JavaScript-ի շրջանակների մեծ մասն այն աջակցում է լռելյայն: Ամենահայտնի IDE-ները ապահովում են առաջին կարգի աջակցություն TypeScript-ի համար: Flow-ը նույնպես աջակցվում է, բայց պահանջում է հատուկ plug-in:

Համայնք

Ի տարբերություն Flow-ի, JavaScript շրջանակները, ինչպիսիք են React, React Native, Vue և Angular-ը, աջակցում են TypeScript-ին առանց տուփի:

Այս համատարած ընդունումը և մեծ համայնքը հանգեցնում են ավելի լավ ուսումնական ռեսուրսների, թարմացումների և գործիքների աջակցության:

Ճկունություն

Flow-ը գործում է որպես տիպի ստուգիչ, որը նախազգուշացնում է ձեզ հնարավոր վատ կոդի մասին: TypeScript-ը խանգարում է ձեզ վատ կոդ գրելուց և ունի խիստ տիպային համակարգ։ TypeScript-ն աջակցում է նաև օբյեկտների ինկապսուլյացիայի, որն օգնում է կառավարելի պահել բարդ կոդը: Flow-ը չունի այս հատկությունը:

Ծառայություններ

TypeScript-ը տրամադրում է JavaScript լեզվի բոլոր ծառայությունները, ինչպիսիք են կոդերի վերամշակումը և ավտոմատ լրացումը: Flow-ը ստատիկ տիպի ստուգիչ է, որն ապահովում է ձեր գրավոր կոդի խորը ըմբռնում և վերլուծություն:

Flow-ը կարող է աշխատել մինչև ձեր նախագծի ներմուծված մոդուլները և գրադարանները և պարզել, թե ինչպես են դրանք ազդում ձեր կոդի վրա: Օրինակ, այն կարող է հայտնաբերել և նախազգուշացնել, երբ ձեր նախագծում անհրաժեշտ գրադարանը բացակայում է կամ երբ փորձում եք մուտք գործել գոյություն չունեցող սահմանում:

Ո՞ր ստատիկ ստուգիչ պետք է օգտագործեք:

Կան բազմաթիվ վավերական փաստարկներ յուրաքանչյուր գործիք օգտագործելու համար, քանի որ յուրաքանչյուրն ունի տարբեր առանձնահատկություններ: Ոմանք կարող են առաջնահերթ լինել մի մշակողի համար, իսկ ցածր առաջնահերթություն մյուսի համար: Երկու գործիքներն էլ լավ են աշխատում իրենց առումներով և առաջարկում են առավելություններ դրանց օգտագործման համար:

Դուք պետք է ուսումնասիրեք ձեր նախագծի պահանջները և դրանց հիման վրա կիրթ որոշում կայացնեք: