React Native ile Typescript Kullanımı

Merhaba arkadaşlar,

Bugün size Facebook’un geliştirmiş olduğu react-native ile Microsoft’un geliştirmiş olduğu açık kaynaklı programlama dili olan  typescript’in react-native ile nasıl kullanılacağını anlatacağım.

Öncelikle boş bir react-native projesi oluşturuyoruz.

Devamında react-native’e typescript ile ilgili bazı paketler kurmamız gerekecek.

  • Typescript’i projemize ekliyoruz.
  • React Native Typescript Transform’u ekliyoruz
  • Boş bir typescript konfigürasyon dosyası ekliyoruz
  • Boş bir React Native TypeScript Transformer konfigürasyon dosyası ekliyoruz
  • Type’larımızı ekliyoruz
 

Yukarıdaki adımları izledikten sonra tsconfig.json dosyamız oluşacak. Bu dosyanın içinde typescript compiler ile ilgili tüm ayarları görebilirsiniz. Bu dosyada bazı ayarları değiştirmemiz gerecek. Aşağıki komutu yorum satırından çıkardıktan sonra işlem tamamdır.

rn-cli.config.js dosyası React Native TypeScript Transformer ile ilgili tüm ayarları içermektedir. Aşağıdaki kodu bu dosya içine yazalım.

 

Şimdi  typescript’e geçme zamanı! App.js dosyamızı artık App.tsx olarak değiştirebiliriz. Yalnız index.js dosyamız .js olarak kalmalı. Artık yeni oluşturacağınız tüm dosyaları .tsx veya .ts (önemli: .ts olarak oluşturğunuz dosyalarda JSX yazamazsınız o yüzden .tsx olarak oluşturmanızı tavsiye ederim.) olarak oluşturabilirsiniz.

Sırada App.tsx dosyamızda ufak tefek bazı değişiklikler yapacağız.

Sırada typescript için test altyapısını ekleme işine geldi. Test için jest kullanacağız. Aşağıdaki gibi kurulumunu yapalım

Komutu çalıştırdıktan sonra package.json dosyasında jest ile ilgili değişiklikler yapacağız. jest’i bulun ve aşağıdaki gibi değiştirin.

react-native type’ları olduğu gibi typescript’inde type’ları var. Bunlar eklemek için aşağıdaki komutu çalıştıralım.

Örnek .tsx dosyası ve nasıl kullanıldığı

Artık react-native projelerinizde typescript kullanabilirsiniz. İyi günler dilerim.

Yorumlar

yorumlar