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).
Güncelleme 11.12.2019: Bu makale yazıldığında React Native’in official olarak bir typescript template çözümü yoktu ama artık var olduğundan eğer eski sürüm react-native-cli kurulumu yapacaksanız makaleye devam edebilirsiniz yada en yeni react-native-cli üzerinden yeni bir proje oluşturacaksanız alttaki gibi bir kod ile makalenin geri kalanına hiç bakmadan typescript üzerinden kodlamanızı yapabileceğiniz react-native projesi oluşturmuş olacaksınız.
Official Typescript Template
react-native@0.61.0 veya üstü sürüme sahipseniz
react-native@0.61.x sürüme sahipseniz
Üstteki komutlardan size uygun olanı react-native versiyonunuza göre seçmelisiniz eğer react-native versiyonuzu bilmiyorsanız komut satırına npm view react-native version yazarsanız react-native versiyonunu öğrenmiş olursunuz.
Eski Usül Typescript Template Ortamı Hazırlama
Komut
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.
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.
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.
Typescript konfigürasyon dosyası olan tsconfig.json dosyası oluşturup içeriğini alttaki gibi dolduralım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | { "compilerOptions": { "target": "es6", "module": "commonjs", "moduleResolution": "node", "jsx": "react", "outDir": "./dist", "experimentalDecorators": true, "emitDecoratorMetadata": true, "allowSyntheticDefaultImports": true, "strict": true, "skipLibCheck": true, "declaration": true, "noUnusedLocals": true }, "exclude": [ "node_modules" ] } |
React native ve react’a ait type defition’ları alttaki komut ile Todo projemize ekleyelim.
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.
1 2 3 4 5 6 7 8 | module.exports = { getTransformModulePath() { return require.resolve('react-native-typescript-transformer'); }, getSourceExts() { return ['ts', 'tsx', 'js', 'jsx']; } } |
Ş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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | { "extends": [ "tslint-react-recommended" ], "rules": { "ordered-imports": [ true ], "quotemark": [ true, "single", "jsx-single", "avoid-escape" ], "semicolon": [ true, "never" ], "member-access": [ false ], "member-ordering": [ false ], "trailing-comma": [ true, { "singleline": "never", "multiline": "always" } ], "no-empty": false, "no-submodule-imports": false, "no-implicit-dependencies": false, "no-constant-condition": false, "triple-equals": [ true, "allow-undefined-check" ], "ter-indent": [ true, 2, { "SwitchCase": 1 } ], "no-duplicate-imports": false, "jsx-alignment": true, "jsx-no-bind": true, "jsx-no-lambda": true, "max-classes-per-file": [ false ] } } |
Ş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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import * as React from 'react' import { Platform, StyleSheet, Text, View } from 'react-native'; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', }); export interface Props { } export interface State { } export class App extends React.Component<Props, State> { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit App.js </Text> <Text style={styles.instructions}> {instructions} </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); |
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.
Makalede kullanılan örneğe ve React Native ile ilgili diğer tüm örneklere github hesabımdan erişebilirsiniz. Buraya tıklayıp github hesabıma erişebilirsiniz.
Bir sonraki typescript’in bulaştığı farklı bir makalede görüşmek dileğiyle 🙂
✏️ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
