React Native Typescript 101

React Native projesi geliştirmek istediğinizde eğer benim gibi typescript aşığı iseniz typescript ile javascript geliştirmesi yapıyorsanız .js uzantılı dosyada geliştirme yapmak attan inip eşeğe binmek gibi bir durum oluyor. Bu makalede Typescript ile react-native projesi nasıl geliştiririz tsx uzantılı dosyalarda geliştirme nasıl yaparız uygun ortamı hazırlamak için makale devamındaki adımları bir bir uygulayarak sonuca ulaşabilirsiniz.

React Native Typescript 101

Makalelerimin çoğunda fırsat buldukça öve öve bitiremediğim bu Typescript nedir diye merak edenler Typescript 101 adlı makaleye bakabilirler. Kısaca Typescript backend geliştirmelerimizde sıklıkla kullandığımız class, interface, enum, primitive tipler, access modifiers, extends, implements, generic gibi kavramları kullanarak OOP geliştirmelerini Typescript sayesinde yapabilirsiniz.

React Native geliştirmesini Visual Studio Code üzerinden yapmanızı tavsiye ederim.

React Native Kurulumu

Eğer sisteminizde React Native command line aracı kurulu değilse kurmak için alttaki kodu çalıştırın(npm ile paket yüklemek için makinenizde NodeJS kurulu olmalıdır).

Komut

npm install react-native-cli -g
MSIGB72B@DESKTOP-SPM3MT4 C:\Users\MSIGB72B
C:\Users\MSIGB72B\AppData\Roaming\npm\react-native -> C:\Users\MSIGB72B\AppData\Roaming\npm\node_modules\react-native-cli\index.js
+ react-native-cli@2.0.1
updated 3 packages in 3.435s

Bende kurulu olduğundan updated olarak çıktı verdi ama sizde kurulu değilse farklı bir sonuç çıkacaktır önemli olan makineye kurulması ve başarılı bir sonuç metni almamız 🙂

Eğer üstteki komut ile sisteminize react-native-cli aracını kurduysanız hemen kolları sıvayıp Typescript ile geliştirme ortamını hazırlayacağımız react-native projesini oluşturmaya geçelim.

react-native projesi oluşturmak için komut satırından kullanacağınız kod alttaki şekildedir. 

react-native init Todo

Not: Üstteki Todo yerine proje adınızın ne olmasını istiyorsanız onu girebilirsiniz.

React Native sürümleri ile ilgili önemli bir konudan bahsetmek gerekirse bazen react-native’in özel bir sürümü ile proje oluşturmanız gerekecek mesela benim bazı paketlere olan bağımlığımdan dolayı bir süredir 0.55.4 sürümü ile proje oluşturmak durumunda kalıyorum eğer sizde react-native’in özel bazı sürümleri ile proje oluşturmak isterseniz üstteki koda ek olarak alttaki kodu kendi istediğiniz sürüme uygun olarak düzenleyip çalıştırabilirsiniz. İndirdiğiniz bir component’e ait intellisense desteğini kazandıracak definition type nasıl oluşturulur bunu farklı bir makalede ele alacağız.

react-native init Todo --version=0.55.4

Todo adlı bir proje oluşturduk peki bu Todo klasörü içeriğine hemen gözatalım neler oluşturulmuş.

Üzerinde geliştirme yapacağımız dosya App.js ve sonrasında kendi oluşturacağınız Diğer component’e ait dosyalar olacaktır fakat gördüğünüz üzere varsayılan olarak react-native-cli tool’u typescript ortamına dair hiçbir ts dosyasyı ve typescript konfigürsayon dosyası olan tsconfig.json dosyası v.s. oluşturmadığını görüyoruz o zaman iş başa düşüyor. O zaman hemen typescript ortamını nasıl hazırlarız bunları adım adım görelim.

Başlamadan önce heves kırmak gibi olacak biliyorum ama bunu belirtmek durumundayım react-native’ ait indireceğiniz birçok kütüphanenin herhangi bir typescript definition dosyası olmadığını farkedeceksiniz bu durumda kodlarınızda o kütüphanelere ait intellisense desteği verilemediğini göreceksiniz buradada maalsef eğer o kütüphane için araştırma sonucunda halen definition dosyasını bulamadıysanız kolları sıvayıp o zaman definition dosyası hazırlamalıyız çünkü type safe geliştirme yapabilmek için muhakkak buna ihtiyacımız var.

Typescript Ortamını Hazırlama

Typescript geliştirmesi sırasında sözdizimi standartlarına uymak için iligli linter kütüphanesini alttaki komutu kullanarak Todo projemize yükleyelim.

npm install typescript tslint tslint-react tslint-eslint-rules react-native-typescript-transformer tslint-react-recommended --save-dev

Typescript konfigürasyon dosyası olan tsconfig.json dosyası oluşturup içeriğini alttaki gibi dolduralım.

React native ve react’a ait type defition’ları alttaki komut ile Todo projemize ekleyelim.

npm install @types/react @types/react-native --save-dev

React Native CLI aracımızın bazı konfigürasyon tanımlarını rn-cli.config.js dosyasını oluşturup alttaki gibi doldurarak yapalım.

Şimdi daha önce typescript’de sözdizimi kurallarımızın olmasını sağlayacak linter kütüphanesinin yüklenmesini sağlamıştık şimdi bu linter kütüphanesine ait konfigürasyonları tslint.json adında bir dosya oluşturarak yapalım.

Şimdi react-native tarafından varsayılan olarak oluşturulan App.js bileşeni içeriğini .tsx uzantılı ve içeriğide type safe geliştirme yapacağınız şekilde refactor edelim. App.js dosyamızın son hali alttaki gibidir Sizde yer alan App.js dosyasını silin App.tsx dosyası oluşturun ve içeriğede alttaki içeriği girin.

Bu kadar 🙂 Makalenin sonunda react-native projesi oluşturmak için bilgisayarımıza nasıl react-native kurulumu gerçekleştirilir ve react-native üzerinde typescript ile type sade geliştirme yapmak için uygun ortam nasıl hazırlanır adım adım anlatmaya çalıştım inşallah type safe çalışmayı seven arkadaşlara ışık olur.

React native 0.55.4 versiyonu ve typescript geliştirme ortamı hazır burada anlatılanlardan yola çıkarak oluşturulmuş projeye alttaki github linkinden ulaşabilirsiniz.

 https://github.com/muratoner/reactnative/blob/master/react_typescript/

Bir sonraki typescript’in bulaştığı farklı bir makalede görüşmek dileğiyle 🙂

React Native Typescript 101
5 (100%) 2 oy

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.