{"componentChunkName":"component---src-templates-docs-js","path":"/docs/static-type-checking.html","result":{"data":{"markdownRemark":{"html":"
\n
\n

These docs are old and won’t be updated. Go to react.dev for the new React docs.

\n

Check out React TypeScript cheatsheet for how to use React with TypeScript.

\n
\n
\n

Flow və TypeScript statik tip yoxlayıcıları ilə kod icra olunmamışdan öncə bəzi problemlərin tapılması mümkündür. Əlavə olaraq, bu alətlər avtomatik tamamlama kimi xüsusiyyətlər əlavə edərək proqramçı iş axının təkmiləşdirir. Bu səbəbdən, böyük kodlarda PropTypes əvəzinə Flow və ya Typescript işlətməyi tövsiyə edirik.

\n

Flow

\n

Flow, JavaScript kodu üçün statik tip yoxlayıcısıdır. Bu alət, Facebook tərəfindən yaradılıb və React ilə çox işlənilir. Bu, dəyişənləri, funksiyaları və React komponentlərini xüsusi tip sintaksisi ilə annotasiya edərək xətaların tez tutulmasına imkan yaradır. Əsasları öyrənmək üçün Flow-a giriş sənədini oxuya bilərsiniz.

\n

Flow-nu işlətmək üçün:

\n\n

Bu addımlar aşağıdalı bölmələrdə detallı başa salınır.

\n

Flow-nu Layihəyə Əlavə Et

\n

İlk olaraq, terminaldan layihə direktoriyasına naviqasiya edin. Sonra, aşağıdakı əmri icra edin:

\n

Yarn işlədirsinizsə:

\n
yarn add --dev flow-bin
\n

npm işlədirsinizsə:

\n
npm install --save-dev flow-bin
\n

Bu əmr, Flow-un ən son versiyasını layihəyə yükləyir.

\n

İndi, flow əmrini package.json faylının \"scripts\" bölməsinə əlavə edin:

\n
{\n  // ...\n  \"scripts\": {\n    \"flow\": \"flow\",    // ...\n  },\n  // ...\n}
\n

Ən sonda, aşağıdakı əmri icra edin:

\n

Yarn işlədirsinizsə:

\n
yarn run flow init
\n

npm işlədirsinizsə:

\n
npm run flow init
\n

Yaranan Flow konfiqurasiya faylını reponuza commit edin.

\n

Flow Sintaksisinin Kompilyasiya Olunan Koddan Silinməsi

\n

Flow, tip annotasiyaları üçün JavaScript dilinə xüsusi sintaksis əlavə edir. Lakin, brauzerlərin bu sintaksisı anlamadığından, bu sintaksis brauzerə göndərilən, kompilyasiya olunan JavaScript paketindən silinməlidir.

\n

Bu sintaksisin silinməsi JavaScript-i kompilyasiyası edən alətdən asılıdır.

\n

Create React App

\n

Əgər layihəniz Create React App ilə qurulubsa, təbrik edirik! Kompilyasiya zamanı Flow annotasiyaları silinəcək.

\n

Babel

\n
\n

Qeyd:

\n

Bu təlimatlar Create React App istifadəçiləri üçün nəzərdə tutulmayıb. Create React App-in Babel işlətdiyinə baxmayaraq Flow-nu addımı artıq konfiqurasiya olunub. Bu bölmədə olan təlimatları Create React App işlətmədikdə təqib edin.

\n
\n

Layihəyə Babel əl ilə quraşdırıldıqda Flow üçün xüsusi preset yükləmək lazımdır.

\n

Yarn işlədirsinizsə:

\n
yarn add --dev @babel/preset-flow
\n

npm işlədirsinizsə:

\n
npm install --save-dev @babel/preset-flow
\n

Sonra, flow presetini Babel konfiqurasiyasına əlavə edin. Məsələn, Babel-ı .babelrc faylı ilə konfiqurasiya etdikdə fayl aşağıdakı formada ola bilər:

\n
{\n  \"presets\": [\n    \"@babel/preset-flow\",    \"react\"\n  ]\n}
\n

Bu, kodunuzda Flow sintaksisi işlətməyə imkan yaradacaq.

\n
\n

Qeyd:

\n

Flow, react presetinin işlədilməsini tələb etmir. Lakin, adətən bu iki preset birlikdə işlənilir. Flow təklikdə JSX sintaksisini anlayır.

\n
\n

Digər Qurulmalar

\n

Create React App və ya Babel işlətmədikdə flow-remove-types paketindən istifadə edərək tip annotasiyalarını silə bilərsiniz.

\n

Flow-nun İcrası

\n

Yuxarıdakı təlimatları sıra ilə təqib etmisinizsə, artıq Flow-nu işlədə biləcəksiniz.

\n

Yarn işlədirsinizsə:

\n
yarn flow
\n

npm işlədirsinizsə:

\n
npm run flow
\n

Əmrin nəticəsində aşağıdakı formada mesaj görəcəksiniz:

\n
No errors!\n✨  Done in 0.17s.
\n

Flow Tip Annotasiyalarının Əlavəsi

\n

Normalda, Flow yalnız aşağıdakı annotasiya olan faylları yoxlayır:

\n
// @flow
\n

Adətən, bu annotasiya faylın tam yuxarısına əlavə olunur. Bu annotasiyanı bəzi fayllara əlavə edib yarn flow və ya npm run flow əmrlərini icra edərək Flow-nun səhv tapdığına baxın.

\n

Annotasiyanın olmasından asılı olmayaraq Flow-nun bütün faylları yoxlaması üçün bu parametrdən istifadə edə bilərsiniz. Bu parametr mövcud layihələr üçün çox səhv göstərdiyindən ağır ola bilər. Lakin, yeni layihədə tipləri Flow ilə annotasiya etmək istəyirsinizsə, bu parametrdən istifadə etmək faydalı ola bilər.

\n

İndi Flow tam işləyir! Flow haqqında əlavə məlumat üçün aşağıdakı resurslara baxın:

\n\n

TypeScript

\n

TypeScript, Microsoft tərəfindən yaranmış proqramlaşdırma dilidir. JavaScript-in üzərindən qurulmuş bu dilin öz kompilyatoru var. TypeScript, tipli dil olduğundan xətalar və baqlar qurulma zamanı tutula bilir. React ilə TypeScript işlətmək haqqında buradan oxuya bilərsiniz.

\n

TypeScript işlətmək üçün:

\n\n

Gəlin, bu addımlara detallı baxaq.

\n

Create React App ilə TypeScript-in İşlədilməsi

\n

TypeScript, Create React App-də konfiqurasiyasız işləyir.

\n

TypeScript dəstəkləyən yeni layihə üçün aşağıdakı əmri icra edin:

\n
npx create-react-app my-app --template typescript
\n

TypeScript-i mövcud Create React App layihəsinə də əlavə edə bilərsiniz. Sənədlərə baxın.

\n
\n

Qeyd:

\n

Create React App işədirsinizsə, bu səhifənin qalanının üzərindən atlaya bilərsiniz. Burada, TypeScript-in əl ilə qurulması izah edilir. Buradakı təlimatlar Create React App istifadəçilərinə şamil edilmir.

\n
\n

Layihəyə TypeScript Əlavə Etmək

\n

Typescript-i aşağıdakı əmri icra edərək yükləyin.

\n

Yarn işlədirsinizsə:

\n
yarn add --dev typescript
\n

npm işlədirsinizsə:

\n
npm install --save-dev typescript
\n

Təbrik edirik! Siz, layihənizə TypeScript-in ən sonuncu versiyasını yüklədiniz. TypeScript paketi tsc əmri ilə gelir. Konfiqurasiya etməkdən öncə package.json faylının “scripts” bölməsinə tsc əmrini əlavə edin:

\n
{\n  // ...\n  \"scripts\": {\n    \"build\": \"tsc\",    // ...\n  },\n  // ...\n}
\n

TypeScript Kompilyatorunun Konfiqurasiyası

\n

Kompilyatorun nə edəcəyini demədikdə Typescript-in heç bir xeyri olmayacaq. Bu qaydalar tsconfig.json adlı xüsusi faylda təyin edilir. Faylı yaratmaq üçün aşağıdakı əmrləri icra edin.

\n

Yarn işlədirsinizsə:

\n
yarn run tsc --init
\n

npm işlədirsinizsə:

\n
npx tsc --init
\n

Yeni yaranmış tsconfig.json faylında olan parametrlər ilə kompilyatoru konfiqurasiya etmək mümkündür. Parametrlərin dərin izahatı üçün bu sənədə baxın.

\n

Əsas rootDir və outDir parametlərinə baxaq. Kompilyator, typescript fayllarını qəbul edib javascript faylları yaratmalıdır. Lakin, biz mənbə fayllarını və yaranmış nəticələri qarışdırmaq istəmirik.

\n

Bunu iki addım ilə həll edəcəyik:

\n\n
├── package.json\n├── src\n│   └── index.ts\n└── tsconfig.json
\n\n
// tsconfig.json\n\n{\n  \"compilerOptions\": {\n    // ...\n    \"rootDir\": \"src\",    \"outDir\": \"build\"    // ...\n  },\n}
\n

Əla! İndi “build” skriptini icra etdikdə kompilyator yaranacaq javascript faylları build/ direktoriyasına əlavə edəcək. TypeScript React Starter paketi başlamaq üçün yaxşı qaydalar olan tsconfig.json faylı təmin edir.

\n

Adətən, yaranmış javascript faylarını mənbə kontrolunda (source control) saxlamağı tövsiyə etmirik. Bu səbəbdən, build/ direktoriyasını .gitignore-a əlavə edin.

\n

Fayl genişləmələri

\n

Normalda, React komponentləri .js faylında saxlanılır. TypeScript-də iki fayl genişləməsindən istifadə edir:

\n

Standart fayl genişləməsi .ts-dir. .tsx isə JSX olan fayllar üçün istifadə edilir.

\n

TypeScript-in İcra Olunması

\n

Yuxarıdakı təlimatları sıra ilə təqib etmisinizsə, artıq TypeScript-i işlədə biləcəksiniz.

\n

Yarn işlədirsinizsə:

\n
yarn build
\n

npm işlədirsinizsə:

\n
npm run build
\n

Əgər nəticə görmürsünzüsə, TypeScript əməliyyatı uğurla başa çatdı.

\n

Tip Tərifləri

\n

Kompilyator, deklarasiya fayllarından istifadə edərək digər paketlərin annotasiyalarını və tip xətalarını göstərir. Deklarasiya faylı kitabxana haqqında bütün tip məlumatlarını təmin edir. Bu, layihədə npm ilə işlədilən javascript kitabxanalarının istifadəsinə imkan yaradır.

\n

Kitabxana deklarasiyalarını əldə etməyin iki yolu var:

\n

Paket ilə gələn - Kitabxana, deklarasiya faylı ilə paketlənir. Belə olduqda, kitabxananı yükləyib dərhal işlədə bilərsiniz. Kitabxana tiplərinin olduğunu bilmək üçün layihədə index.d.ts faylına baxın. Bu fayl, bəzi kitabxanalarda package.json faylının typings və ya types bölməsində göstərilir.

\n

DefinitelyTyped - deklarasiya faylı paket ilə gəlməyən kitabxanalar üçün DefinitelyTyped reposundan istifadə edə bilərsiniz. Bu repoda olan deklarasiyalar cəmiyyət tərəfindən əlavə edilir və Microsoft və digər open-source əməkdaşları tərəfindən idarə olunur. Məsələn, React, deklarasiya fayllarını paketləmir. Əvəzinə, tipləri DefinitelyTyped reposundan almaq mümkündür. Tipləri əlavə etmək üçün aşağıdakı əmri terminalda icra edin.

\n
# yarn\nyarn add --dev @types/react\n\n# npm\nnpm i --save-dev @types/react
\n

Lokal Deklarasiyalar

\n

Bəzən, işlədilən paketdə və ya DefinitelyTyped reposunda tip deklarasiyaları olmaya bilər. Bu halda, deklarasiyaları lokal faylda göstərmək lazımdır. Bunu edə bilmək üçün, ana direktoriyada declarations.d.ts faylı yaradın. Sadə deklarasiya aşağıdakı formada olur:

\n
declare module 'querystring' {\n  export function stringify(val: object): string\n  export function parse(val: string): object\n}
\n

İndi TypeScript ilə kod yaza bilərsiniz! TypeScript haqqında əlavə məlumat üçün aşağıdakı resurslara baxın:

\n\n

ReScript

\n

Reason yeni bir dil deyil. Bu, OCaml ilə işləyən yeni sintaksis və toolchain-dir. Reason, OCaml dilini JavaScript proqramçılarının başa düşəcəyi sintaksis ilə təmin edir. Əlavə olaraq, bu alət ilə bildiyimiz mövcud NPM/Yarn iş axınlarından istifadə etmək mümkündür.

\n

Reason, Facebook tərəfindən yaradılıb və Messenger kimi məhsullarda istifdə olunur. Bu alət eksperimentaldır. Lakin, bu alətin Facebook və canlı cəmiyyət tərəfindən saxlanan React binding-ləri var.

\n

Kotlin

\n

Kotlin, JetBrains tərəfindən düzəldilmiş statik tipli yazılan dildir. Bu dilin hədəf platforması JVM, Android, LLVM, və JavaScript-dir.

\n

JetBrains, React cəmiyyəti üçün bir neçə alət düzəldir və saxlayır: React binding-ləri və Create React Kotlin App. Create React Kotlin App paketi, qurulma konfiqurasiyası olmadan React applikasiyalarının yaradılmasına imkan yaradır.

\n

Digər Dillər

\n

Nəzərə alın ki, JavaScript-ə kompilyasiya olunan (bu səbəbdən, React ilə işləyə bilən) digər statik tipli yazılan dillər də mövcuddur: F#/Fable və elmish-react. Əlavə məlumat üçün bu paketlərin səhifələrinə baxın. React ilə işləyən statik tipli dil bilirsinizə, yeni dili bu səhifəyə əlavə etməkdən çəkinməyin!

","frontmatter":{"title":"Statik Tip Yoxlamaları","next":null,"prev":null},"fields":{"path":"content/docs/static-type-checking.md","slug":"docs/static-type-checking.html"}}},"pageContext":{"slug":"docs/static-type-checking.html"}},"staticQueryHashes":[]}