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": {
    "build": "tsc",    // ...
  },
  // ...
}

TypeScript Kompilyatorunun Konfiqurasiyası

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.

Yarn işlədirsinizsə:

yarn run tsc --init

npm işlədirsinizsə:

npx tsc --init

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.

Ə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.

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

İlk olaraq, layihə strukturunu aşağıdakı formada düzəldəcəyik. Bütün mənbə fayllarını src direktoriyasında saxlayacağıq.

├── package.json
├── src
│   └── index.ts
└── tsconfig.json

Sonra, mənbə fayllarının və yaranacaq nəticənin harada olduğunu kompilyatora göstərəcəyik.

// tsconfig.json

{
  "compilerOptions": {
    // ...
    "rootDir": "src",    "outDir": "build"    // ...
  },
}

Ə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.

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.

Fayl genişləmələri

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

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

TypeScript-in İcra Olunması

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

Yarn işlədirsinizsə:

yarn build

npm işlədirsinizsə:

npm run build

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

Tip Tərifləri

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.

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

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.

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.

# yarn
yarn add --dev @types/react

# npm
npm i --save-dev @types/react

Lokal Deklarasiyalar

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:

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

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

ReScript

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.

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.

Kotlin

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.

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.

Digər Dillər

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!

Is this page useful?Bu səhifəni redaktə edin