Modern web geli\u015ftirme d\u00fcnyas\u0131nda h\u0131z, performans ve geli\u015ftirici deneyimi, ba\u015far\u0131l\u0131 bir projenin temel ta\u015flar\u0131d\u0131r. Bu ba\u011flamda, statik site olu\u015fturucular\u0131 (Static Site Generators – SSG) ve g\u00fc\u00e7l\u00fc tip denetimi sunan diller \u00f6ne \u00e7\u0131kmaktad\u0131r. Gatsby, React tabanl\u0131, GraphQL destekli ve y\u00fcksek performansl\u0131 web siteleri olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f pop\u00fcler bir SSG’dir. TypeScript ise JavaScript’in s\u00fcper k\u00fcmesi olarak, derleme zaman\u0131nda tip denetimi sa\u011flayarak daha g\u00fcvenilir, bak\u0131m\u0131 kolay ve \u00f6l\u00e7eklenebilir uygulamalar geli\u015ftirmemize olanak tan\u0131r.<\/p>\n
Gatsby’nin sa\u011flad\u0131\u011f\u0131 h\u0131z, g\u00fcvenlik ve SEO avantajlar\u0131 ile TypeScript’in sundu\u011fu geli\u015ftirici verimlili\u011fi ve hata yakalama yetenekleri bir araya geldi\u011finde, ortaya \u00e7\u0131kan sinerji olduk\u00e7a g\u00fc\u00e7l\u00fcd\u00fcr. Bu kombinasyon, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k projelerde, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, olas\u0131 hatalar\u0131 azalt\u0131r ve kod taban\u0131n\u0131n uzun vadede s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131r\u0131r. Bu makalede, bir Gatsby projesini TypeScript ile ad\u0131m ad\u0131m nas\u0131l kuraca\u011f\u0131n\u0131z\u0131, yap\u0131land\u0131raca\u011f\u0131n\u0131z\u0131 ve geli\u015ftirece\u011finizi detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
Gatsby ve TypeScript ile \u00e7al\u0131\u015fmaya ba\u015flamadan \u00f6nce sisteminizde baz\u0131 temel ara\u00e7lar\u0131n y\u00fckl\u00fc olmas\u0131 gerekmektedir. Bu ara\u00e7lar, geli\u015ftirme ortam\u0131n\u0131z\u0131 kurmak ve projenizi sorunsuz bir \u015fekilde \u00e7al\u0131\u015ft\u0131rmak i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n
* Node.js:<\/strong> Gatsby, Node.js \u00fczerinde \u00e7al\u0131\u015fan bir JavaScript \u00e7al\u0131\u015fma zaman\u0131 ortam\u0131d\u0131r. LTS (Uzun S\u00fcreli Destek) s\u00fcr\u00fcm\u00fcn\u00fc kullanman\u0131z \u00f6nerilir. Node.js’i Bu \u00f6n ko\u015fullar\u0131 sa\u011flad\u0131\u011f\u0131n\u0131zdan emin olduktan sonra, Gatsby projenizi kurmaya ge\u00e7ebiliriz.<\/p>\n Gatsby projelerini h\u0131zl\u0131 bir \u015fekilde olu\u015fturmak ve y\u00f6netmek i\u00e7in Gatsby Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc’ne (CLI) ihtiyac\u0131m\u0131z var. Gatsby CLI, yeni projeler olu\u015fturman\u0131za, geli\u015ftirme sunucusunu ba\u015flatman\u0131za ve \u00fcretim i\u00e7in derleme yapman\u0131za olanak tan\u0131r.<\/p>\n Gatsby CLI’yi global olarak y\u00fcklemek i\u00e7in a\u015fa\u011f\u0131daki komutu kullan\u0131n:<\/p>\n Bu komut, Bu komut, y\u00fckl\u00fc Gatsby CLI s\u00fcr\u00fcm\u00fcn\u00fc g\u00f6stermelidir. Art\u0131k yeni bir Gatsby projesi olu\u015fturmaya haz\u0131rs\u0131n\u0131z.<\/p>\n Gatsby CLI’yi kullanarak yeni bir proje olu\u015fturmak olduk\u00e7a basittir. Projenizi olu\u015fturmak istedi\u011finiz dizine gidin ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n Bu komut: Proje olu\u015fturulduktan sonra, yeni olu\u015fturulan proje dizinine ge\u00e7in:<\/p>\n \u015eimdi projenizi geli\u015ftirme modunda \u00e7al\u0131\u015ft\u0131rabilirsiniz:<\/p>\n Bu komut, geli\u015ftirme sunucusunu ba\u015flatacak ve projenizi genellikle Varsay\u0131lan Gatsby projesi yap\u0131s\u0131 \u015funlar\u0131 i\u00e7erir: \u015eimdi s\u0131ra, bu projemize TypeScript’i entegre etmeye geldi.<\/p>\n Gatsby, TypeScript ile uyumlu bir \u015fekilde \u00e7al\u0131\u015fmak \u00fczere tasarlanm\u0131\u015ft\u0131r ve temel TypeScript deste\u011fi genellikle sorunsuz bir \u015fekilde sa\u011flan\u0131r. Ancak, tam tip denetimi ve geli\u015ftirici deneyimi i\u00e7in baz\u0131 ek ad\u0131mlar atmam\u0131z gerekiyor.<\/p>\n TypeScript’i projenize eklemek i\u00e7in \u00f6ncelikle TypeScript derleyicisini ve React ile Node.js i\u00e7in tip tan\u0131mlamalar\u0131n\u0131 y\u00fcklemeniz gerekir. Bu tip tan\u0131mlamalar\u0131, TypeScript’in React bile\u015fenlerinin ve Node.js API’lerinin tiplerini anlamas\u0131n\u0131 sa\u011flar.<\/p>\n Projenizin k\u00f6k dizininde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n Bu komutun y\u00fckledi\u011fi paketler \u015funlard\u0131r: TypeScript derleyicisini projenizin gereksinimlerine g\u00f6re yap\u0131land\u0131rmak i\u00e7in bir Bu komut, projenizin k\u00f6k dizinine temel bir Bu ayarlardan baz\u0131lar\u0131 \u00f6zellikle \u00f6nemlidir: TypeScript entegrasyonunun bir sonraki ad\u0131m\u0131, mevcut JavaScript dosyalar\u0131n\u0131z\u0131 TypeScript’e d\u00f6n\u00fc\u015ft\u00fcrmek ve Gatsby’nin yap\u0131land\u0131rma dosyalar\u0131n\u0131 da TypeScript ile kullanmakt\u0131r.<\/p>\n Gatsby, varsay\u0131lan olarak \u00d6rne\u011fin, Gatsby v4 ve \u00fczeri, \u0130\u00e7eriklerini TypeScript syntax’\u0131na uygun hale getirin. \u00d6rne\u011fin, Burada, React bile\u015fenlerini TypeScript ile yazmak, props’lar\u0131, state’leri ve di\u011fer bile\u015fen \u00f6zelliklerini a\u00e7\u0131k\u00e7a tan\u0131mlayarak kodunuzu daha g\u00fcvenli ve anla\u015f\u0131l\u0131r hale getirir.<\/p>\n Fonksiyonel bile\u015fenler, React’te en yayg\u0131n kullan\u0131lan bile\u015fen t\u00fcr\u00fcd\u00fcr. TypeScript ile, bile\u015fenin alaca\u011f\u0131 \u00d6rnek: Burada Gatsby’deki sayfalar da asl\u0131nda React bile\u015fenleridir. Bu nedenle, onlar\u0131 da TypeScript ile yazabiliriz. Genellikle sayfalar \u00d6rnek: Bu, TypeScript ile olu\u015fturulmu\u015f bir Gatsby projesidir.<\/p>\n Bulundu\u011funuz yol: {location.pathname}<\/p>\n <\/Layout>\n);\n\nexport default IndexPage;<\/code><\/pre>\n Burada Gatsby’nin en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, veri katman\u0131 olarak GraphQL kullanmas\u0131d\u0131r. TypeScript ile GraphQL sorgular\u0131n\u0131 birle\u015ftirmek, sorgular\u0131n\u0131zdan d\u00f6nen verilerin tip g\u00fcvenli\u011fini sa\u011flar. Bu, \u00f6zellikle b\u00fcy\u00fck veri modelleriyle \u00e7al\u0131\u015f\u0131rken hata yapma olas\u0131l\u0131\u011f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n Gatsby projelerinde GraphQL sorgular\u0131ndan otomatik olarak tip tan\u0131mlamalar\u0131 olu\u015fturmak i\u00e7in 1. * 2. 3. Art\u0131k 4. Sorgu Yaz\u0131m\u0131 ve Tiplerin Kullan\u0131m\u0131:<\/strong><\/p>\n \u015eimdi bir sayfa veya bile\u015fende GraphQL sorgusu yazabilir ve olu\u015fturulan tipleri kullanabiliriz.<\/p>\n \u00d6rnek: Bu, {siteTitle} projesinin hakk\u0131m\u0131zda sayfas\u0131d\u0131r.<\/p>\n Bu sayfa, Gatsby ve TypeScript kullan\u0131larak geli\u015ftirilmi\u015ftir.<\/p>\n <\/Layout>\n );\n);\n\nexport default AboutPage;\n\nexport const query = graphql Yukar\u0131daki \u00f6rnekte, Gatsby eklentileri, projenizin i\u015flevselli\u011fini geni\u015fletmenin harika bir yoludur. TypeScript ile \u00e7al\u0131\u015f\u0131rken, eklentilerin yap\u0131land\u0131rmas\u0131n\u0131 \u00d6rne\u011fin, Bu sayede, TypeScript entegrasyonundan sonra geli\u015ftirme ve derleme s\u00fcre\u00e7leri Gatsby’nin standart komutlar\u0131yla ayn\u0131d\u0131r. Gatsby, dahili olarak Babel’i kullanarak TypeScript dosyalar\u0131n\u0131z\u0131 derler ve JavaScript’e d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\n * Geli\u015ftirme Sunucusunu Ba\u015flatma:<\/strong><\/p>\n Bu komut, geli\u015ftirme sunucusunu ba\u015flat\u0131r ve kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikleri otomatik olarak yeniden y\u00fckler (hot-reloading). TypeScript dosyalar\u0131n\u0131zdaki hatalar, terminalde ve kod d\u00fczenleyicinizde (VS Code gibi) an\u0131nda g\u00f6r\u00fcnt\u00fclenecektir.<\/p>\n * \u00dcretim Derlemesi Yapma:<\/strong><\/p>\n Bu komut, projenizi \u00fcretim i\u00e7in derler. T\u00fcm TypeScript dosyalar\u0131 JavaScript’e d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr, optimize edilir ve * Hata Ay\u0131klama \u0130pu\u00e7lar\u0131:<\/strong> Gatsby ve TypeScript ile \u00e7al\u0131\u015f\u0131rken geli\u015ftirme deneyiminizi daha da iyile\u015ftirecek baz\u0131 en iyi uygulamalar ve ipu\u00e7lar\u0131:<\/p>\n * Tutarl\u0131 Tip Kullan\u0131m\u0131:<\/strong> Projeniz boyunca tutarl\u0131 tip tan\u0131mlamalar\u0131 kullanmaya \u00f6zen g\u00f6sterin. Ortak tipleri ayr\u0131 bir Gatsby ve TypeScript’in birle\u015fimi, modern web geli\u015ftirme i\u00e7in g\u00fc\u00e7l\u00fc ve verimli bir ekosistem sunar. Gatsby’nin statik site olu\u015fturma yetenekleri sayesinde elde edilen y\u00fcksek performans, g\u00fcvenlik ve SEO avantajlar\u0131, TypeScript’in sa\u011flad\u0131\u011f\u0131 tip g\u00fcvenli\u011fi, geli\u015ftirici verimlili\u011fi ve kod kalitesiyle birle\u015fti\u011finde, ortaya \u00e7\u0131kan projeler hem geli\u015ftiriciler hem de son kullan\u0131c\u0131lar i\u00e7in \u00fcst d\u00fczey bir deneyim sunar.<\/p>\n Bu rehberde ad\u0131m ad\u0131m g\u00f6sterildi\u011fi gibi, bir Gatsby projesine TypeScript entegrasyonu nispeten basittir ve sa\u011flad\u0131\u011f\u0131 faydalar, ba\u015flang\u0131\u00e7taki kurulum \u00e7abas\u0131n\u0131 fazlas\u0131yla kar\u015f\u0131lar. Tip g\u00fcvenli GraphQL sorgular\u0131, daha anla\u015f\u0131l\u0131r bile\u015fenler ve erken hata yakalama yetenekleri sayesinde, b\u00fcy\u00fck ve karma\u015f\u0131k projeleri bile g\u00fcvenle geli\u015ftirebilir, bak\u0131m\u0131n\u0131 yapabilir ve \u00f6l\u00e7eklendirebilirsiniz.<\/p>\n Gatsby ve TypeScript ile \u00e7al\u0131\u015fmak, sadece daha iyi kod yazman\u0131z\u0131 sa\u011flamakla kalmaz, ayn\u0131 zamanda daha keyifli ve \u00fcretken bir geli\u015ftirme s\u00fcreci sunar. Bu g\u00fc\u00e7l\u00fc ikilinin sundu\u011fu imkanlar\u0131 ke\u015ffetmeye devam edin ve web projelerinizi bir sonraki seviyeye ta\u015f\u0131y\u0131n.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Gatsby Projesini TypeScript ile Kurulum Rehberi\nGatsby ve TypeScript’in G\u00fcc\u00fc\nModern web geli\u015ftirme d\u00fcnyas\u0131nda h\u0131z, performans ve geli\u015ftirici","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-34591","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nnodejs.org<\/code> adresinden indirebilir veya bir s\u00fcr\u00fcm y\u00f6neticisi (\u00f6rn. nvm<\/code>) kullanarak y\u00fckleyebilirsiniz.
\n* npm veya Yarn:<\/strong> Node.js ile birlikte gelen paket y\u00f6neticisi npm<\/code> veya daha h\u0131zl\u0131 ve g\u00fcvenilir alternatif olan Yarn<\/code>‘a ihtiyac\u0131n\u0131z olacak. Bu rehberde npm<\/code> komutlar\u0131n\u0131 kullanaca\u011f\u0131z, ancak Yarn<\/code> kullan\u0131c\u0131lar\u0131 e\u015fde\u011fer komutlar\u0131 kolayca uygulayabilirler.
\n* Git:<\/strong> Projenizi versiyon kontrol alt\u0131nda tutmak i\u00e7in Git<\/code>‘in y\u00fckl\u00fc olmas\u0131 faydal\u0131d\u0131r. \u00d6zellikle a\u00e7\u0131k kaynak projelerle veya ekip i\u00e7inde \u00e7al\u0131\u015f\u0131rken vazge\u00e7ilmezdir.
\n* Kod D\u00fczenleyici:<\/strong> Tercihen TypeScript ve React deste\u011fi g\u00fc\u00e7l\u00fc olan bir kod d\u00fczenleyici (\u00f6rne\u011fin, Visual Studio Code) kullanman\u0131z \u00f6nerilir. VS Code, zengin eklenti ekosistemi sayesinde geli\u015ftirme deneyiminizi \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r.<\/p>\nGatsby CLI Kurulumu<\/h3>\n
npm install -g gatsby-cli<\/code><\/pre>\ngatsby<\/code> komutunu sisteminizin herhangi bir yerinden \u00e7al\u0131\u015ft\u0131r\u0131labilir hale getirecektir. Kurulumun ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 do\u011frulamak i\u00e7in a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rabilirsiniz:<\/p>\ngatsby --version<\/code><\/pre>\nYeni Bir Gatsby Projesi Olu\u015fturma<\/h3>\n
gatsby new my-gatsby-ts-project https:\/\/github.com\/gatsbyjs\/gatsby-starter-hello-world<\/code><\/pre>\n
\n* my-gatsby-ts-project<\/code> ad\u0131nda yeni bir klas\u00f6r olu\u015fturur.
\n* Belirtilen ba\u015flang\u0131\u00e7 \u015fablonunu (bu \u00f6rnekte gatsby-starter-hello-world<\/code>) bu klas\u00f6re klonlar.
\n* Gerekli t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckler.<\/p>\ncd my-gatsby-ts-project<\/code><\/pre>\ngatsby develop<\/code><\/pre>\nhttp:\/\/localhost:8000<\/code> adresinde g\u00f6r\u00fcnt\u00fcleyebileceksiniz. Taray\u0131c\u0131n\u0131zda bu adresi ziyaret etti\u011finizde, ba\u015flang\u0131\u00e7 \u015fablonunun i\u00e7eri\u011fini g\u00f6rmelisiniz.<\/p>\n
\n* src\/<\/code>: Sayfalar\u0131n\u0131z\u0131, bile\u015fenlerinizi ve statik dosyalar\u0131n\u0131z\u0131 i\u00e7eren ana geli\u015ftirme klas\u00f6r\u00fc.
\n* src\/pages\/<\/code>: Her .js<\/code> veya .tsx<\/code> dosyas\u0131n\u0131n otomatik olarak bir rota haline geldi\u011fi klas\u00f6r.
\n* gatsby-config.js<\/code>: Gatsby projenizin ana yap\u0131land\u0131rma dosyas\u0131d\u0131r. Eklentileri, site meta verilerini ve di\u011fer ayarlar\u0131 tan\u0131mlar.
\n* package.json<\/code>: Projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve betiklerini listeler.<\/p>\nTypeScript’i Entegre Etme<\/h3>\n
Gerekli Paketlerin Kurulumu<\/h4>\n
npm install --save-dev typescript @types\/react @types\/react-dom @types\/node<\/code><\/pre>\n
\n* typescript<\/code>: TypeScript derleyicisinin kendisi. Bu paket, .ts<\/code> ve .tsx<\/code> dosyalar\u0131n\u0131z\u0131 derleyerek taray\u0131c\u0131lar\u0131n anlayabilece\u011fi JavaScript’e d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.
\n* @types\/react<\/code>: React k\u00fct\u00fcphanesi i\u00e7in tip tan\u0131mlamalar\u0131. Bu sayede React bile\u015fenleri, props’lar\u0131, state’leri ve di\u011fer React API’leri i\u00e7in tip denetimi al\u0131rs\u0131n\u0131z.
\n* @types\/react-dom<\/code>: React DOM k\u00fct\u00fcphanesi i\u00e7in tip tan\u0131mlamalar\u0131.
\n* @types\/node<\/code>: Node.js \u00e7al\u0131\u015fma zaman\u0131 ortam\u0131 i\u00e7in tip tan\u0131mlamalar\u0131. Bu, gatsby-node.js<\/code> gibi Node.js ortam\u0131nda \u00e7al\u0131\u015fan dosyalar\u0131n\u0131z i\u00e7in tip denetimi sa\u011flar.<\/p>\ntsconfig.json<\/code> Dosyas\u0131n\u0131 Olu\u015fturma<\/h4>\ntsconfig.json<\/code> dosyas\u0131na ihtiyac\u0131n\u0131z var. Bu dosya, derleyicinin nas\u0131l davranaca\u011f\u0131n\u0131 belirten ayarlar\u0131 i\u00e7erir.<\/p>\ntsconfig.json<\/code> dosyas\u0131n\u0131 otomatik olarak olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\nnpx tsc --init<\/code><\/pre>\ntsconfig.json<\/code> dosyas\u0131 ekleyecektir. Olu\u015fturulan dosyay\u0131 a\u00e7\u0131n ve Gatsby projeniz i\u00e7in optimize etmek \u00fczere baz\u0131 \u00f6nemli ayarlar\u0131 g\u00fcncelleyin veya ekleyin. \u0130\u015fte \u00f6nerilen bir yap\u0131land\u0131rma:<\/p>\n\/\/ tsconfig.json\n{\n \"compilerOptions\": {\n \"target\": \"es2017\", \/\/ \u00c7\u0131kt\u0131 JavaScript s\u00fcr\u00fcm\u00fc\n \"module\": \"esnext\", \/\/ Mod\u00fcl sistemi\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"], \/\/ Kullan\u0131lacak k\u00fct\u00fcphaneler\n \"allowJs\": true, \/\/ JavaScript dosyalar\u0131na izin ver\n \"jsx\": \"react-jsx\", \/\/ JSX d\u00f6n\u00fc\u015ft\u00fcrme modu\n \"strict\": true, \/\/ T\u00fcm kat\u0131 tip denetim se\u00e7eneklerini etkinle\u015ftir\n \"esModuleInterop\": true, \/\/ ES mod\u00fclleri ile CommonJS mod\u00fclleri aras\u0131nda birlikte \u00e7al\u0131\u015fabilirlik\n \"skipLibCheck\": true, \/\/ Tip tan\u0131mlama dosyalar\u0131n\u0131n denetimini atla\n \"forceConsistentCasingInFileNames\": true, \/\/ Dosya adlar\u0131nda b\u00fcy\u00fck\/k\u00fc\u00e7\u00fck harf tutarl\u0131l\u0131\u011f\u0131 zorla\n \"noEmit\": true, \/\/ Sadece tip denetimi yap, \u00e7\u0131kt\u0131 dosyas\u0131 olu\u015fturma\n \"resolveJsonModule\": true, \/\/ .json uzant\u0131l\u0131 mod\u00fclleri i\u00e7e aktarmaya izin ver\n \"isolatedModules\": true, \/\/ Her dosyan\u0131n ayr\u0131 bir mod\u00fcl olarak derlenmesini sa\u011fla (Babel\/Webpack ile uyumlu)\n \"moduleResolution\": \"node\", \/\/ Mod\u00fcl \u00e7\u00f6z\u00fcmleme stratejisi\n \"baseUrl\": \".\", \/\/ Mod\u00fcl \u00e7\u00f6z\u00fcmleme i\u00e7in temel dizin\n \"paths\": { \/\/ Mod\u00fcl takma adlar\u0131\n \"\": [\"src\/<\/em>\"]\n }\n },\n \"include\": [\n \"src\/<\/em>\/*\",\n \"gatsby-config.ts\",\n \"gatsby-node.ts\",\n \"plugins\/<\/em>\/*\" \/\/ \u00d6zel eklentileriniz varsa\n ],\n \"exclude\": [\n \"node_modules\",\n \".cache\",\n \"public\"\n ]\n}<\/code><\/pre>\n
\n* \"jsx\": \"react-jsx\"<\/code>: React 17 ve sonras\u0131 i\u00e7in yeni JSX d\u00f6n\u00fc\u015ft\u00fcrme modunu kullan\u0131r.
\n* \"strict\": true<\/code>: TypeScript’in en iyi uygulamalar\u0131n\u0131 uygulayan bir dizi kat\u0131 tip denetimi kural\u0131n\u0131 etkinle\u015ftirir. Bu, ba\u015flang\u0131\u00e7ta biraz zorlay\u0131c\u0131 olabilir ancak uzun vadede \u00e7ok daha g\u00fcvenilir kod yazman\u0131z\u0131 sa\u011flar.
\n* \"noEmit\": true<\/code>: Gatsby’nin kendi derleme s\u00fcrecini kulland\u0131\u011f\u0131 i\u00e7in TypeScript derleyicisinin kendi ba\u015f\u0131na JavaScript dosyalar\u0131 olu\u015fturmas\u0131n\u0131 engeller. TypeScript burada sadece tip denetimi yapar.
\n* \"isolatedModules\": true<\/code>: Babel gibi ara\u00e7lar\u0131n her dosyay\u0131 ba\u011f\u0131ms\u0131z olarak derlemesini sa\u011flar.
\n* \"include\"<\/code>: TypeScript’in hangi dosyalar\u0131 tip denetimine dahil edece\u011fini belirtir. gatsby-config.ts<\/code> ve gatsby-node.ts<\/code> gibi Gatsby’ye \u00f6zg\u00fc yap\u0131land\u0131rma dosyalar\u0131n\u0131 buraya eklemek \u00f6nemlidir.<\/p>\nProje Yap\u0131s\u0131n\u0131 TypeScript’e Uyarlama<\/h3>\n
Dosya Uzant\u0131lar\u0131n\u0131 G\u00fcncelleme<\/h4>\n
.js<\/code> ve .jsx<\/code> uzant\u0131l\u0131 dosyalar\u0131 React bile\u015feni veya sayfa olarak tan\u0131r. TypeScript kullanmaya ba\u015flad\u0131\u011f\u0131m\u0131zda, bu uzant\u0131lar\u0131 .ts<\/code> veya .tsx<\/code> olarak de\u011fi\u015ftirmemiz gerekir:
\n* React bile\u015fenleri veya JSX i\u00e7eren sayfalar i\u00e7in .tsx<\/code> kullan\u0131n (\u00f6rne\u011fin, src\/components\/header.jsx<\/code> -> src\/components\/header.tsx<\/code>).
\n* Sadece TypeScript kodu i\u00e7eren ve JSX i\u00e7ermeyen dosyalar i\u00e7in .ts<\/code> kullan\u0131n (\u00f6rne\u011fin, yard\u0131mc\u0131 i\u015flevler veya veri modelleri).<\/p>\nsrc\/pages\/index.js<\/code> dosyas\u0131n\u0131 src\/pages\/index.tsx<\/code> olarak yeniden adland\u0131r\u0131n. \u0130\u00e7eri\u011fini de TypeScript syntax’\u0131na uygun hale getirin.<\/p>\ngatsby-config.ts<\/code> ve gatsby-node.ts<\/code> \u0130\u00e7in Destek<\/h4>\ngatsby-config.ts<\/code> ve gatsby-node.ts<\/code> gibi yap\u0131land\u0131rma dosyalar\u0131n\u0131 do\u011frudan destekler. Bu, bu dosyalar i\u00e7in herhangi bir ek yap\u0131land\u0131rma (\u00f6rn. ts-node<\/code>) yapmadan tip denetimi alabilece\u011finiz anlam\u0131na gelir.<\/p>\ngatsby-config.js<\/code> dosyan\u0131z\u0131 gatsby-config.ts<\/code> olarak yeniden adland\u0131r\u0131n. Ayn\u0131 \u015fekilde, e\u011fer bir gatsby-node.js<\/code> dosyan\u0131z varsa, onu da gatsby-node.ts<\/code> olarak yeniden adland\u0131r\u0131n.<\/p>\ngatsby-config.ts<\/code> dosyan\u0131z \u015f\u00f6yle g\u00f6r\u00fcnebilir:<\/p>\n\/\/ gatsby-config.ts\nimport type { GatsbyConfig } from \"gatsby\";\n\nconst config: GatsbyConfig = {\n siteMetadata: {\n title: My Gatsby Site with TypeScript<\/code>,\n siteUrl: https:\/\/www.yourdomain.com<\/code>,\n },\n plugins: [\n \"gatsby-plugin-image\",\n \"gatsby-plugin-sharp\",\n {\n resolve: \"gatsby-source-filesystem\",\n options: {\n name: \"images\",\n path: \".\/src\/images\/\",\n },\n __key: \"images\",\n },\n ],\n};\n\nexport default config;<\/code><\/pre>\nGatsbyConfig<\/code> tipini kullanarak config<\/code> nesnesinin do\u011fru bir yap\u0131ya sahip olmas\u0131n\u0131 sa\u011fl\u0131yoruz. Bu, yap\u0131land\u0131rma dosyan\u0131zda hatal\u0131 anahtarlar veya de\u011ferler kullanman\u0131z\u0131 engelleyecektir.<\/p>\nBile\u015fenleri TypeScript ile Yazma<\/h3>\n
Fonksiyonel Bile\u015fenler<\/h4>\n
props<\/code>‘lar\u0131 bir interface<\/code> veya type<\/code> kullanarak tan\u0131mlar\u0131z.<\/p>\nsrc\/components\/header.tsx<\/code><\/p>\n\/\/ src\/components\/header.tsx\nimport * as React from \"react\";\nimport { Link } from \"gatsby\";\n\n\/\/ Props'lar i\u00e7in bir interface tan\u0131mla\ninterface HeaderProps {\n siteTitle: string;\n}\n\nconst Header: React.FCvar(--size-gutter)<\/code>,\n backgroundColor: rebeccapurple<\/code>,\n }}\n >\n var(--size-content)<\/code>,\n padding: 1.45rem 1.0875rem<\/code>,\n }}\n >\n \n <\/div>\n <\/header>\n);\n\nexport default Header;<\/code><\/pre>\nHeaderProps<\/code> interface’i, siteTitle<\/code> ad\u0131nda bir prop bekledi\u011fimizi ve bu prop’un bir string<\/code> tipinde olmas\u0131 gerekti\u011fini belirtir. React.FCHeader<\/code> bile\u015feninin bir React fonksiyonel bile\u015feni oldu\u011funu ve HeaderProps<\/code> tipindeki props’lar\u0131 alaca\u011f\u0131n\u0131 TypeScript’e bildirir.<\/p>\nSayfalar<\/h4>\n
pageContext<\/code> veya GraphQL sorgular\u0131ndan veri al\u0131rlar.<\/p>\nsrc\/pages\/index.tsx<\/code><\/p>\n\/\/ src\/pages\/index.tsx\nimport * as React from \"react\";\nimport type { PageProps } from \"gatsby\"; \/\/ Gatsby'nin PageProps tipini i\u00e7e aktar\n\nimport Layout from \"..\/components\/layout\";\nimport Seo from \"..\/components\/seo\";\n\n\/\/ Sayfa props'lar\u0131 i\u00e7in \u00f6zel bir interface tan\u0131mlayabiliriz,\n\/\/ ancak Gatsby'nin PageProps tipi genellikle yeterlidir.\n\/\/ E\u011fer pageContext'ten \u00f6zel veri geliyorsa, onu burada tan\u0131mlayabiliriz.\ninterface IndexPageProps extends PageProps {\n \/\/ pageContext'ten gelen \u00f6zel veriler burada tan\u0131mlanabilir\n \/\/ pageContext: {\n \/\/ someData: string;\n \/\/ };\n}\n\nconst IndexPage: React.FCPageProps<\/code> tipi, Gatsby taraf\u0131ndan sayfalara otomatik olarak sa\u011flanan location<\/code>, navigate<\/code>, params<\/code> gibi props’lar\u0131 i\u00e7erir. E\u011fer sayfan\u0131z \u00f6zel pageContext<\/code> verileri al\u0131yorsa, IndexPageProps<\/code> interface’ini geni\u015fleterek bu verileri tan\u0131mlayabilirsiniz.<\/p>\nGraphQL Sorgular\u0131nda TypeScript<\/h4>\n
gatsby-plugin-graphql-codegen<\/code> eklentisini kullanabiliriz.<\/p>\ngatsby-plugin-graphql-codegen<\/code> Kurulumu:<\/strong><\/p>\nnpm install --save-dev gatsby-plugin-graphql-codegen @graphql-codegen\/cli @graphql-codegen\/typescript @graphql-codegen\/typescript-operations<\/code><\/pre>\ngatsby-plugin-graphql-codegen<\/code>: Gatsby’nin derleme s\u00fcrecine GraphQL Code Generator’\u0131 entegre eder.
\n* @graphql-codegen\/cli<\/code>: GraphQL Code Generator’\u0131n komut sat\u0131r\u0131 aray\u00fcz\u00fc.
\n* @graphql-codegen\/typescript<\/code>: TypeScript tipleri olu\u015fturmak i\u00e7in eklenti.
\n* @graphql-codegen\/typescript-operations<\/code>: GraphQL sorgular\u0131, mutasyonlar\u0131 ve fragmanlar\u0131 i\u00e7in TypeScript tipleri olu\u015fturmak i\u00e7in eklenti.<\/p>\ngatsby-config.ts<\/code> Entegrasyonu:<\/strong><\/p>\ngatsby-config.ts<\/code> dosyan\u0131za eklentiyi ekleyin:<\/p>\n\/\/ gatsby-config.ts\nimport type { GatsbyConfig } from \"gatsby\";\n\nconst config: GatsbyConfig = {\n \/\/ ... di\u011fer ayarlar\u0131n\u0131z\n plugins: [\n \/\/ ... di\u011fer eklentileriniz\n \"gatsby-plugin-image\",\n \"gatsby-plugin-sharp\",\n \"gatsby-source-filesystem\",\n {\n resolve: \"gatsby-plugin-graphql-codegen\",\n options: {\n fileName: .\/gatsby-types.d.ts<\/code>, \/\/ Olu\u015fturulacak tip dosyas\u0131n\u0131n ad\u0131\n documentPaths: [\n \".\/src\/<\/em>\/*.{ts,tsx}\",\n \".\/gatsby-node.ts\",\n ],\n \/\/ Di\u011fer codegen se\u00e7enekleri\n },\n },\n ],\n};\n\nexport default config;<\/code><\/pre>\nfileName<\/code> se\u00e7ene\u011fi, GraphQL sorgular\u0131n\u0131zdan otomatik olarak olu\u015fturulacak tip tan\u0131mlamalar\u0131n\u0131n dosya ad\u0131n\u0131 belirtir. documentPaths<\/code> ise GraphQL sorgular\u0131n\u0131z\u0131n nerede bulunaca\u011f\u0131n\u0131 Code Generator’a s\u00f6yler.<\/p>\ngatsby-types.d.ts<\/code> Dosyas\u0131n\u0131n Olu\u015fturulmas\u0131:<\/strong><\/p>\ngatsby develop<\/code> veya gatsby build<\/code> komutunu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, gatsby-types.d.ts<\/code> dosyas\u0131 projenizin k\u00f6k dizininde otomatik olarak olu\u015fturulacakt\u0131r. Bu dosya, t\u00fcm GraphQL sorgular\u0131n\u0131z i\u00e7in tip tan\u0131mlamalar\u0131n\u0131 i\u00e7erecektir.<\/p>\nsrc\/pages\/about.tsx<\/code><\/p>\n\/\/ src\/pages\/about.tsx\nimport * as React from \"react\";\nimport { graphql, PageProps } from \"gatsby\";\nimport Layout from \"..\/components\/layout\";\nimport Seo from \"..\/components\/seo\";\n\n\/\/ graphql sorgusundan d\u00f6nen veriler i\u00e7in tip tan\u0131mlamas\u0131\n\/\/ Bu tipler gatsby-types.d.ts dosyas\u0131nda otomatik olarak olu\u015fturulur.\n\/\/ \u00d6rne\u011fin, \"AboutPageQuery\" gibi bir tip olu\u015facakt\u0131r.\nimport type { AboutPageQuery } from \"..\/..\/gatsby-types\";\n\nconst AboutPage: React.FC\n query AboutPage {\n site {\n siteMetadata {\n title\n }\n }\n }\n<\/code>;<\/code><\/pre>\nAboutPageQuery<\/code> tipini gatsby-types.d.ts<\/code> dosyas\u0131ndan i\u00e7e aktar\u0131yoruz. Bu tip, graphql<\/code> sorgusunun d\u00f6nece\u011fi verilerin yap\u0131s\u0131n\u0131 a\u00e7\u0131k\u00e7a tan\u0131mlar. B\u00f6ylece, data.site.siteMetadata.title<\/code> gibi verilere eri\u015firken tip g\u00fcvenli\u011finden faydalan\u0131r\u0131z. Yanl\u0131\u015f bir anahtar kullan\u0131rsak, TypeScript derleyicisi bizi uyaracakt\u0131r.<\/p>\nGatsby Eklentileri ve TypeScript<\/h3>\n
gatsby-config.ts<\/code> i\u00e7inde tip g\u00fcvenli bir \u015fekilde tan\u0131mlamak m\u00fcmk\u00fcnd\u00fcr. Bir\u00e7ok pop\u00fcler Gatsby eklentisi i\u00e7in @types<\/code> paketleri mevcuttur. Bu paketler, eklentilerin se\u00e7enekleri i\u00e7in tip tan\u0131mlamalar\u0131 sa\u011flar.<\/p>\ngatsby-plugin-image<\/code> veya gatsby-plugin-sharp<\/code> gibi eklentileri kullan\u0131rken, bu eklentilerin tip tan\u0131mlamalar\u0131n\u0131 y\u00fcklemeniz gerekebilir:<\/p>\nnpm install --save-dev @types\/gatsby-plugin-image @types\/gatsby-plugin-sharp<\/code><\/pre>\ngatsby-config.ts<\/code> i\u00e7inde eklenti se\u00e7eneklerini yap\u0131land\u0131r\u0131rken tip denetimi al\u0131rs\u0131n\u0131z. Bu, yanl\u0131\u015f yap\u0131land\u0131rma hatalar\u0131n\u0131 \u00f6nlemeye yard\u0131mc\u0131 olur.<\/p>\n\/\/ gatsby-config.ts\nimport type { GatsbyConfig } from \"gatsby\";\n\nconst config: GatsbyConfig = {\n \/\/ ...\n plugins: [\n {\n resolve: gatsby-plugin-image<\/code>,\n options: {\n \/\/ Bu se\u00e7enekler i\u00e7in tip denetimi alacaks\u0131n\u0131z\n defaults: {\n formats: [auto<\/code>, webp<\/code>],\n placeholder: dominantColor<\/code>,\n quality: 50,\n },\n },\n },\n gatsby-plugin-sharp<\/code>,\n \/\/ ...\n ],\n};\n\nexport default config;<\/code><\/pre>\nGeli\u015ftirme ve Derleme S\u00fcreci<\/h3>\n
gatsby develop<\/code><\/pre>\ngatsby build<\/code><\/pre>\npublic\/<\/code> klas\u00f6r\u00fcne statik HTML, CSS ve JavaScript dosyalar\u0131 olarak \u00e7\u0131kar\u0131l\u0131r. Bu komut \u00e7al\u0131\u015ft\u0131r\u0131l\u0131rken de herhangi bir TypeScript hatas\u0131 varsa, derleme i\u015flemi durdurulur ve hatalar g\u00f6sterilir.<\/p>\n
\n * TypeScript Hatalar\u0131:<\/strong> Terminalinizdeki veya kod d\u00fczenleyicinizdeki (VS Code) TypeScript hatalar\u0131n\u0131 dikkatlice okuyun. Hatalar genellikle sorunun nerede oldu\u011funu ve nas\u0131l d\u00fczeltilece\u011fini a\u00e7\u0131k\u00e7a belirtir.
\n * tsconfig.json<\/code> Ayarlar\u0131:<\/strong> Bazen hatalar tsconfig.json<\/code> dosyan\u0131zdaki yanl\u0131\u015f ayarlardan kaynaklanabilir. \u00d6zellikle strict<\/code> modu veya jsx<\/code> ayarlar\u0131 gibi se\u00e7enekleri kontrol edin.
\n * Linter Entegrasyonu:<\/strong> ESLint ve Prettier gibi ara\u00e7lar\u0131 TypeScript ile entegre etmek, kod kalitesini art\u0131r\u0131r ve potansiyel hatalar\u0131 geli\u015ftirme a\u015famas\u0131nda yakalaman\u0131za yard\u0131mc\u0131 olur.<\/p>\nEn \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h3>\n
types\/<\/code> klas\u00f6r\u00fcnde veya src\/types.ts<\/code> gibi bir dosyada merkezi olarak tan\u0131mlamak, kod tekrar\u0131n\u0131 azalt\u0131r ve bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r.
\n* ESLint ve Prettier Entegrasyonu:<\/strong> TypeScript ile uyumlu ESLint ve Prettier yap\u0131land\u0131rmalar\u0131 kullanarak kodunuzu otomatik olarak bi\u00e7imlendirin ve olas\u0131 hatalar\u0131 belirleyin. eslint-plugin-react<\/code>, @typescript-eslint\/eslint-plugin<\/code> gibi eklentiler bu entegrasyon i\u00e7in \u00f6nemlidir.
\n* strict<\/code> Modunu Kullan\u0131n:<\/strong> tsconfig.json<\/code> dosyan\u0131zda \"strict\": true<\/code> ayar\u0131n\u0131 etkinle\u015ftirin. Bu, daha kat\u0131 tip denetimi sa\u011flayarak daha g\u00fcvenilir ve hatas\u0131z kod yazman\u0131za yard\u0131mc\u0131 olur. Ba\u015flang\u0131\u00e7ta daha fazla tip tan\u0131mlaman\u0131z gerekse de, uzun vadede size zaman kazand\u0131racakt\u0131r.
\n* tsconfig.json<\/code> Optimizasyonu:<\/strong> Projenizin ihtiya\u00e7lar\u0131na g\u00f6re tsconfig.json<\/code> ayarlar\u0131n\u0131 optimize edin. \u00d6rne\u011fin, b\u00fcy\u00fck bir projeniz varsa incremental<\/code> derleme se\u00e7ene\u011fini etkinle\u015ftirmek derleme s\u00fcrelerini h\u0131zland\u0131rabilir.
\n* Ortak Tipleri Ay\u0131rma:<\/strong> S\u0131k kullan\u0131lan interface’leri, type’lar\u0131 ve enum’lar\u0131 ayr\u0131 bir dosyada (\u00f6rne\u011fin, src\/types\/index.ts<\/code>) tutun. Bu, projenizin tip sistemini daha d\u00fczenli hale getirir ve tiplere eri\u015fimi kolayla\u015ft\u0131r\u0131r.
\n* Gatsby’nin Dahili Tiplerini Kullanma:<\/strong> Gatsby’nin kendisi bir\u00e7ok dahili tip sa\u011flar (\u00f6rne\u011fin, PageProps<\/code>, GatsbyConfig<\/code>). Bu tipleri import type { PageProps } from \"gatsby\";<\/code> \u015feklinde i\u00e7e aktararak kodunuzda kullan\u0131n. Bu, Gatsby’nin API’leriyle daha g\u00fcvenli bir \u015fekilde etkile\u015fim kurman\u0131z\u0131 sa\u011flar.
\n* Bo\u015f De\u011fer Kontrolleri:<\/strong> TypeScript, null<\/code> veya undefined<\/code> de\u011ferleri konusunda kat\u0131d\u0131r. GraphQL sorgular\u0131ndan gelen verilerde potansiyel olarak bo\u015f olabilecek alanlar i\u00e7in g\u00fcvenli eri\u015fim operat\u00f6rlerini (?.<\/code>) veya ko\u015fullu kontrolleri (if (data.field)<\/code>) kullanmay\u0131 unutmay\u0131n.<\/p>\nSonu\u00e7<\/h3>\n