Statik Tip Yoxlamaları

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

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

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.

Flow

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.

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

Flow-nu layihə asılılığı kimi əlavə edin.
Kompilyasiya edilən kodda Flow sintaksisinin silindiyindən əmin olun.
Tip annotasiyalarını əlavə edib Flow-nu çağıraraq bu tipləri yoxlayın.

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

Flow-nu Layihəyə Əlavə Et

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

Yarn işlədirsinizsə:

yarn add --dev flow-bin

npm işlədirsinizsə:

npm install --save-dev flow-bin

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

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

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

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

Yarn işlədirsinizsə:

yarn run flow init

npm işlədirsinizsə:

npm run flow init

Yaranan Flow konfiqurasiya faylını reponuza commit edin.

Flow Sintaksisinin Kompilyasiya Olunan Koddan Silinməsi

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.

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

Create React App

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

Babel

Qeyd:

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.

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

Yarn işlədirsinizsə:

yarn add --dev @babel/preset-flow

npm işlədirsinizsə:

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

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:

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

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

Qeyd:

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.

Digər Qurulmalar

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.

Flow-nun İcrası

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

Yarn işlədirsinizsə:

yarn flow

npm işlədirsinizsə:

npm run flow

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

No errors!
✨  Done in 0.17s.

Flow Tip Annotasiyalarının Əlavəsi

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

// @flow

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.

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.

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

TypeScript

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.

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

TypeScript-i layihə asılılığı kimi əlavə edin.
TypeScript kompilyator parametrlərini konfiqurasiya edin.
Düzgün fayl genişləmnəsindən istifadə edin.
İşlədilən kitabxanalar üçün tip tərifləri əlavə edin.

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

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

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

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

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

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

Qeyd:

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.

Layihəyə TypeScript Əlavə Etmək

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

Yarn işlədirsinizsə:

yarn add --dev typescript

npm işlədirsinizsə:

npm install --save-dev typescript

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:

{
  // ...
  "scripts"