JavaScript, zayıf yazılmış bir programlama dilidir. Bu nedenle, çok hafiftir ve geliştirme sırasında programlama hatalarının fark edilmemesi muhtemeldir. Bir JavaScript tür denetimi kitaplığı olan TypeScript, türleri değerlere zorlayarak bu sorunu çözer. Bu makale size TypeScript ile bir React projesinin nasıl oluşturulacağını öğretecektir.

TypeScript ile React Projesi Oluşturma

create-react-app komutu, aşağıdakileri kullanarak TypeScript projeleri oluşturmanıza olanak tanır. --şablon seçenek.

İle yeni bir React projesi oluştur TypeScript ile aşağıdaki komutu çalıştırın:

npx oluşturmak-react-app uygulaması-isim--template daktilo yazısı

Bu komut, sıfırdan yeni bir React ve TypeScript projesi oluşturur. Ayrıca mevcut bir React uygulamasına TypeScript ekleyebilirsiniz.

Bunu yapmak için TypeScript eklemek istediğiniz projeye gidin ve aşağıdaki kodu çalıştırın:

npm kurulumu -- daktiloyu kaydet @types/node @types/react @types/react-dom @types/jest

Ardından, TypeScript'e dönüştürmek istediğiniz dosyalar için .js dosya uzantısını .tsx ile değiştirin. Bunu yaptığınızda, "

instagram viewer
React, global bir UMD'ye atıfta bulunur, ancak mevcut dosya bir modüldür." hata. Bunu, aşağıdaki gibi her typescript dosyasında React'i içe aktararak çözebilirsiniz:

içe aktarmak Tepki itibaren "tepki"

Daha basit bir çözüm olarak, bir tsconfig.json oluşturun ve jsx'i react-jsx olarak ayarlayın.

{
"derleyiciSeçenekleri": {
"jsx": "tepki-jsx",
"hedef": "es6",
"modül": "sonraki",
 },
}

Tüm yapılandırma ayarlarını şuradan bulabilirsiniz: TypeScript belgeleri.

TypeScript'te React Function Bileşeni Oluşturma

Bir React işlevi bileşenini JavaScript işleviyle aynı şekilde tanımlarsınız.

Aşağıda, Selamlar adlı bir işlev bileşeni örneği verilmiştir.

ihracatvarsayılanişlevSelamlar() {
dönüş (
<div>Selam Dünya</div>
 )
}

Bu bileşen bir "Merhaba dünya" dizesi döndürür ve TypeScript, dönüş türünü çıkarır. Ancak, dönüş türüne açıklama ekleyebilirsiniz:

ihracatvarsayılanişlevSelamlar(): JSX.eleman{
dönüş (
<div>Selam Dünya</div>
 )
}

Selamlama bileşeni JSX.element olmayan bir değer döndürürse TypeScript bir hata verir.

TypeScript ile React Props Kullanmak

React, aksesuarlar aracılığıyla yeniden kullanılabilir bileşenler oluşturmanıza olanak tanır. Örneğin, Selamlama bileşeni, dönüş değerinin buna göre özelleştirilmesi için bir ad desteği alabilir.

Aşağıda, prop olarak bir adla düzenlenmiş bileşen bulunmaktadır. Satır içi tür bildirimine dikkat edin.

işlevSelamlar({isim}: {isim: dize}) {
dönüş (
<div>Merhaba {isim}</div>
 )
}

"Jane" adını iletirseniz, bileşen "Merhaba Jane" mesajını döndürür.

Tip bildirimini fonksiyona yazmak yerine harici olarak şu şekilde tanımlayabilirsiniz:

tip SelamlarProps = {
 isim: dize;
};

Ardından tanımlanan türü bileşene aşağıdaki gibi iletin:

işlevSelamlar({name}: SelamlarProps) {
dönüş (
<div>Merhaba {isim}</div>
 )
}

Bu türü dışa aktarıyorsanız ve genişletmek istiyorsanız interface anahtar sözcüğünü kullanın:

ihracat arayüzSelamlarProps{
 isim: dize;
};

Tip ve arayüz arasındaki sözdizimi farkına dikkat edin - arayüzün eşittir işareti yoktur.

Aşağıdaki kodu kullanarak bir arayüzü genişletebilirsiniz:

içe aktarmak { SelamlarProps } itibaren './Selamlar'
arayüzHoş GeldinizPropsuzanırSelamlarProps{
 zaman: "sicim"
}

Daha sonra genişletilmiş arabirimi başka bir bileşende kullanabilirsiniz.

işlevHoş geldin({isim, zaman}: WelcomeProps) {
dönüş (
<div>
 İyi {zaman}, {isim}!
</div>
 )
}

Kullan "?" İsteğe bağlı donanımları tanımlamak için donanım arayüzünüzle birlikte sembolü. Burada isteğe bağlı bir ad desteğine sahip bir arabirim örneği verilmiştir.

arayüzSelamlarProps{
 isim?: dize;
};

Bir name prop iletmezseniz, TypeScript herhangi bir hata vermez.

TypeScript ile Tepki Durumunu Kullanma

Düz JavaScript'te tanımlarsınız useState() kancası aşağıdaki gibi:

const [müşteriAdı, setCustomerName] = useState("");

Bu örnekte TypeScript, varsayılan değer bir dize olduğundan, firstName türünü bir dize olarak kolayca çıkarabilir.

Ancak, bazen durumu tanımlanmış bir değere başlatamazsınız. Bu durumlarda, bir durum değeri türü vermelisiniz.

Aşağıda, useState() kancasında türlerin nasıl tanımlanacağına ilişkin bazı örnekler verilmiştir.

const [müşteriAdı, setCustomerName] = useState<sicim>("");
const [yaş, setAge] = useState<sayı>(0);
const [isSubscribed, setIsSubscribed] = useState<boole>(yanlış);

Ayrıca useState() kancasında bir arabirim kullanabilirsiniz. Örneğin, aşağıda gösterilen bir arabirimi kullanmak için yukarıdaki örneği yeniden yazabilirsiniz.

arayüzICmüşteri{
 müşteriAdı: string ;
 yaş: sayı ;
 Abone olunan: boole ;
}

Kancadaki özel arayüzü şu şekilde kullanın:

const [müşteri, setCustomer] = useState<ICmüşteri>({
 müşteri adı: "Jane",
 yaş: 10,
 Abone olunan: yanlış
 });

TypeScript ile Olayları Kullanma

Etkinlikler, kullanıcıların bir web sayfasıyla etkileşime girmesine izin verdiği için önemlidir. TypeScript'te olayları veya olay işleyicilerini yazabilirsiniz.

Göstermek için, onClick() ve onChange() olaylarını kullanan aşağıdaki Login bileşenini düşünün.

içe aktarmak { useState } itibaren 'tepki';
ihracatvarsayılanişlevGiriş yapmak() {
 const [email, setEmail] = useState('');
const handleChange = (olay) => {
setE-posta(Etkinlik.hedef.değer);
 };


const handleClick = (olay) => {
 konsol.log('Gönderilen!');
 };
dönüş (
<div>
<giriş türü="e-posta" değer={email} onChange={handleChange} />
<buton onClick={() => tutamakKlik}>Göndermek</button>
</div>
 );
}

Olayları düz JavaScript'te bu şekilde ele alırsınız. Ancak TypeScript, olay işleyici işlevlerinde olay parametresi türünü tanımlamanızı bekler. Neyse ki, React birkaç olay türü sağlar.

Örneğin, handleChange() olay işleyicisi için changeEvent türünü kullanın.

içe aktarmak { ChangeEvent, useState } itibaren 'tepki';
const handleChange = (olay: ChangeEvent<HTMLInputElement>) => {
setE-posta(Etkinlik.hedef.değer);
};

changeEvent türü, input, select ve textarea öğelerinin değerlerini değiştirmek için kullanılır. Bu, değeri değişen DOM öğesini geçmeniz gereken genel bir türdür. Bu örnekte girdi öğesini geçtiniz.

Yukarıdaki örnek olayın nasıl yazılacağını gösterir. Aşağıdaki kod, bunun yerine olay işleyicisini nasıl yazabileceğinizi gösterir.

içe aktarmak { ChangeEventHandler, useState } itibaren 'tepki';
const handleChange: ChangeEventHandler<HTMLInputElement> = (olay) => {
setE-posta(Etkinlik.hedef.değer);
};

HandleClick() olayı için MouseEvent()'i kullanın.

içe aktarmak { useState, MouseEvent } itibaren 'tepki';
const handleClick = (olay: MouseEvent) => {
 konsol.log('Gönderilen!');
};

Yine, türü olay işleyicisinin kendisine ekleyebilirsiniz.

içe aktarmak { useState, MouseEventHandler } itibaren 'tepki';
const handleClick: MouseEventHandler = (olay) => {
 konsol.log('Gönderilen!');
 };

Diğer etkinlik türleri için bkz. React TypeScript hile sayfası.

Büyük formlar oluşturuyorsanız, Formik gibi bir form kitaplığı kullanın, TypeScript ile oluşturulduğu için.

Neden TypeScript Kullanmalısınız?

TypeScript kullanmak veya mevcut bir projeyi dönüştürmek için yeni bir React projesine talimat verebilirsiniz. TypeScript'i React işlev bileşenleri, durum ve React olaylarıyla da kullanabilirsiniz.

React bileşenlerini yazmak bazen gereksiz ortak kod yazmak gibi gelebilir. Ancak, onu ne kadar çok kullanırsanız, kodunuzu dağıtmadan önce hataları yakalama yeteneğini o kadar çok takdir edeceksiniz.