{"id":3961,"date":"2024-11-15T06:45:09","date_gmt":"2024-11-15T03:45:09","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/"},"modified":"2024-11-15T06:45:09","modified_gmt":"2024-11-15T03:45:09","slug":"typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/","title":{"rendered":"TypeScript Olay T\u00fcrleri ve React&#8217;te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz"},"content":{"rendered":"<p>TypeScript Olay T\u00fcrleri ve React&#8217;te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz<\/p>\n<p>React uygulamalar\u0131nda etkile\u015fimli aray\u00fczler olu\u015fturmak i\u00e7in olay i\u015fleme kullan\u0131m\u0131 olmazsa olmazd\u0131r. TypeScript, JavaScript&#8217;e statik tip g\u00fcvenli\u011fi ekleyerek kodun daha g\u00fcvenilir ve okunabilir olmas\u0131n\u0131 sa\u011flar. Bu k\u0131lavuz, TypeScript olay t\u00fcrlerini ve React&#8217;te olay i\u015flemeyi ele alarak hem ba\u015flang\u0131\u00e7 seviyesindeki hem de orta seviyedeki geli\u015ftiricilere rehberlik etmek amac\u0131yla haz\u0131rlanm\u0131\u015ft\u0131r. <\/p>\n<p>## TypeScript&#8217;te Olay T\u00fcrleri<\/p>\n<p>TypeScript&#8217;te, olaylar i\u00e7in belirli t\u00fcr tan\u0131mlar\u0131 bulunur. Bu tan\u0131mlar, olay nesnesinin hangi \u00f6zelliklere sahip olaca\u011f\u0131n\u0131 belirterek kodun daha d\u00fczenli ve g\u00fcvenilir olmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda olu\u015fan bir olayda, `MouseEvent` t\u00fcr\u00fc kullan\u0131l\u0131r. `MouseEvent` t\u00fcr\u00fc, fare konumu, d\u00fc\u011fme durumu gibi \u00f6zellikleri i\u00e7erir.<\/p>\n<p>&#8220;`typescript<br \/>\ninterface ButtonProps {<br \/>\n  onClick: (event: MouseEvent) => void;<br \/>\n}<\/p>\n<p>const MyButton: React.FC<ButtonProps> = ({ onClick }) => {<br \/>\n  return (<br \/>\n    <button onClick={onClick}>T\u0131kla<\/button><br \/>\n  );<br \/>\n};<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, `onClick` \u00f6zelli\u011fi bir `MouseEvent` t\u00fcr\u00fc al\u0131r. Bu, `onClick` i\u015flevine ge\u00e7irilen olay\u0131n `MouseEvent` t\u00fcr\u00fcnden oldu\u011fundan emin olunmas\u0131n\u0131 sa\u011flar. <\/p>\n<p>## React&#8217;te Olay \u0130\u015fleme<\/p>\n<p>React, olay i\u015flemeyi kolayla\u015ft\u0131rmak i\u00e7in \u00f6zel bir y\u00f6ntem kullan\u0131r. Bir bile\u015fenin bir olay\u0131 dinlemesi i\u00e7in `onClick`, `onChange`, `onSubmit` gibi \u00f6zellikler kullan\u0131l\u0131r. Bu \u00f6zellikler, olay meydana geldi\u011finde \u00e7a\u011f\u0131r\u0131lacak bir i\u015flev al\u0131rlar. <\/p>\n<p>&#8220;`typescript<br \/>\nconst MyComponent: React.FC = () => {<br \/>\n  const handleClick = (event: MouseEvent) => {<br \/>\n    console.log(&#8220;D\u00fc\u011fmeye t\u0131kland\u0131!&#8221;, event);<br \/>\n  };<\/p>\n<p>  return (<\/p>\n<div>\n      <button onClick={handleClick}>T\u0131kla<\/button>\n    <\/div>\n<p>  );<br \/>\n};<br \/>\n&#8220;`<\/p>\n<p>Bu \u00f6rnekte, `handleClick` i\u015flevi `onClick` \u00f6zelli\u011fine atanm\u0131\u015ft\u0131r. D\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda, `handleClick` i\u015flevi \u00e7a\u011fr\u0131lacak ve olay nesnesi `event` de\u011fi\u015fkenine aktar\u0131lacakt\u0131r. <\/p>\n<p>## Olay T\u00fcr\u00fc Tan\u0131mlar\u0131<\/p>\n<p>React&#8217;te kullan\u0131lan en yayg\u0131n olay t\u00fcrleri \u015funlard\u0131r:<\/p>\n<p>* **MouseEvent:** Fare olaylar\u0131 i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, `onClick`, `onMouseOver`, `onMouseOut`).<br \/>\n* **KeyboardEvent:** Klavye olaylar\u0131 i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, `onKeyDown`, `onKeyUp`, `onKeyPress`).<br \/>\n* **FocusEvent:** Odak olaylar\u0131 i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, `onFocus`, `onBlur`).<br \/>\n* **ChangeEvent:** De\u011fer de\u011fi\u015fikli\u011fi olaylar\u0131 i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, `onChange` &#8211; giri\u015f alanlar\u0131, se\u00e7im kutular\u0131).<br \/>\n* **SubmitEvent:** Form g\u00f6nderme olay\u0131 i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, `onSubmit`).<\/p>\n<p>## Olay \u0130\u015fleme Uygulamalar\u0131<\/p>\n<p>Olay i\u015fleme, React uygulamalar\u0131nda bir\u00e7ok farkl\u0131 \u015fekilde kullan\u0131l\u0131r. \u00d6rne\u011fin, kullan\u0131c\u0131 girdisini i\u015flemek, bir bile\u015fenin durumunu g\u00fcncellemek, API \u00e7a\u011fr\u0131lar\u0131 yapmak veya animasyonlar ba\u015flatmak i\u00e7in kullan\u0131labilir.<\/p>\n<p>**\u00d6rnekler:**<\/p>\n<p>* **Kullan\u0131c\u0131 Girdisini \u0130\u015fleme:** Bir giri\u015f alan\u0131ndaki de\u011fer de\u011fi\u015fti\u011finde, `onChange` olay\u0131n\u0131 kullanarak de\u011fer g\u00fcncellenebilir.<br \/>\n* **Durum G\u00fcncelleme:** Bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda, `onClick` olay\u0131n\u0131 kullanarak bile\u015fenin durumunu g\u00fcncelleyebilirsiniz.<br \/>\n* **API \u00c7a\u011fr\u0131lar\u0131:** Bir form g\u00f6nderildi\u011finde, `onSubmit` olay\u0131n\u0131 kullanarak API \u00e7a\u011fr\u0131lar\u0131 yap\u0131labilir.<br \/>\n* **Animasyonlar Ba\u015flatma:** Bir fare olay\u0131 meydana geldi\u011finde, `onMouseOver` olay\u0131n\u0131 kullanarak bir animasyon ba\u015flat\u0131labilir.<\/p>\n<p>## \u00d6zet<\/p>\n<p>TypeScript olay t\u00fcrleri ve React&#8217;te olay i\u015fleme, uygulamalar\u0131n\u0131z\u0131 daha etkile\u015fimli ve dinamik hale getirmenin temel unsurlar\u0131d\u0131r. Bu k\u0131lavuz, bu konularda temel bilgiler sunarak, TypeScript&#8217;in sa\u011flad\u0131\u011f\u0131 statik tip g\u00fcvenli\u011fi ve React&#8217;in olay i\u015fleme mekanizmas\u0131n\u0131n nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 anlamaya yard\u0131mc\u0131 olmay\u0131 ama\u00e7lam\u0131\u015ft\u0131r. <\/p>\n<p>Daha fazla bilgi i\u00e7in a\u015fa\u011f\u0131daki kaynaklar\u0131 inceleyebilirsiniz: <\/p>\n<p>* **[TypeScript Olay T\u00fcrleri Dok\u00fcmantasyonu](https:\/\/www.typescriptlang.org\/docs\/handbook\/events.html)**<br \/>\n* **[React Dok\u00fcmantasyonu &#8211; Olay \u0130\u015fleme](https:\/\/reactjs.org\/docs\/handling-events.html)**<\/p>\n<p>## Daha Fazla Kaynak<\/p>\n<p>* **[Fatih Soysal Blog](https:\/\/fatihsoysal.com)**<\/p>\n<p>#Etiketler<br \/>\nTypeScript, React, Olay \u0130\u015fleme, Olay T\u00fcrleri, MouseEvent, KeyboardEvent, FocusEvent, ChangeEvent, SubmitEvent, Web Geli\u015ftirme, Frontend Geli\u015ftirme<\/p>\n","protected":false},"excerpt":{"rendered":"TypeScript Olay T\u00fcrleri ve React&#8217;te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz React uygulamalar\u0131nda etkile\u015fimli aray\u00fczler olu\u015fturmak i\u00e7in&hellip;","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-3961","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>TypeScript Olay T\u00fcrleri ve React&#039;te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz<\/title>\n<meta name=\"description\" content=\"React uygulamalar\u0131nda etkile\u015fimli aray\u00fczler olu\u015fturmak i\u00e7in olay i\u015fleme kullan\u0131m\u0131 olmazsa olmazd\u0131r. TypeScript, JavaScript&#039;e statik tip g\u00fcvenli\u011fi ekleyerek kodun daha g\u00fcvenilir ve okunabilir olmas\u0131n\u0131 sa\u011flar. Bu k\u0131lavuz, TypeScript olay t\u00fcrlerini ve React&#039;te olay i\u015flemeyi ele alarak hem ba\u015flang\u0131\u00e7 seviyesindeki hem de orta seviyedeki geli\u015ftiricilere rehberlik etmek amac\u0131yla haz\u0131rlanm\u0131\u015ft\u0131r.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TypeScript Olay T\u00fcrleri ve React&#039;te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz\" \/>\n<meta property=\"og:description\" content=\"React uygulamalar\u0131nda etkile\u015fimli aray\u00fczler olu\u015fturmak i\u00e7in olay i\u015fleme kullan\u0131m\u0131 olmazsa olmazd\u0131r. TypeScript, JavaScript&#039;e statik tip g\u00fcvenli\u011fi ekleyerek kodun daha g\u00fcvenilir ve okunabilir olmas\u0131n\u0131 sa\u011flar. Bu k\u0131lavuz, TypeScript olay t\u00fcrlerini ve React&#039;te olay i\u015flemeyi ele alarak hem ba\u015flang\u0131\u00e7 seviyesindeki hem de orta seviyedeki geli\u015ftiricilere rehberlik etmek amac\u0131yla haz\u0131rlanm\u0131\u015ft\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-15T03:45:09+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"TypeScript Olay T\u00fcrleri ve React&#8217;te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz\",\"datePublished\":\"2024-11-15T03:45:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/\"},\"wordCount\":654,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/\",\"name\":\"TypeScript Olay T\u00fcrleri ve React'te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-11-15T03:45:09+00:00\",\"description\":\"React uygulamalar\u0131nda etkile\u015fimli aray\u00fczler olu\u015fturmak i\u00e7in olay i\u015fleme kullan\u0131m\u0131 olmazsa olmazd\u0131r. TypeScript, JavaScript'e statik tip g\u00fcvenli\u011fi ekleyerek kodun daha g\u00fcvenilir ve okunabilir olmas\u0131n\u0131 sa\u011flar. Bu k\u0131lavuz, TypeScript olay t\u00fcrlerini ve React'te olay i\u015flemeyi ele alarak hem ba\u015flang\u0131\u00e7 seviyesindeki hem de orta seviyedeki geli\u015ftiricilere rehberlik etmek amac\u0131yla haz\u0131rlanm\u0131\u015ft\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"TypeScript Olay T\u00fcrleri ve React&#8217;te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"TypeScript Olay T\u00fcrleri ve React'te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz","description":"React uygulamalar\u0131nda etkile\u015fimli aray\u00fczler olu\u015fturmak i\u00e7in olay i\u015fleme kullan\u0131m\u0131 olmazsa olmazd\u0131r. TypeScript, JavaScript'e statik tip g\u00fcvenli\u011fi ekleyerek kodun daha g\u00fcvenilir ve okunabilir olmas\u0131n\u0131 sa\u011flar. Bu k\u0131lavuz, TypeScript olay t\u00fcrlerini ve React'te olay i\u015flemeyi ele alarak hem ba\u015flang\u0131\u00e7 seviyesindeki hem de orta seviyedeki geli\u015ftiricilere rehberlik etmek amac\u0131yla haz\u0131rlanm\u0131\u015ft\u0131r.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/","og_locale":"tr_TR","og_type":"article","og_title":"TypeScript Olay T\u00fcrleri ve React'te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz","og_description":"React uygulamalar\u0131nda etkile\u015fimli aray\u00fczler olu\u015fturmak i\u00e7in olay i\u015fleme kullan\u0131m\u0131 olmazsa olmazd\u0131r. TypeScript, JavaScript'e statik tip g\u00fcvenli\u011fi ekleyerek kodun daha g\u00fcvenilir ve okunabilir olmas\u0131n\u0131 sa\u011flar. Bu k\u0131lavuz, TypeScript olay t\u00fcrlerini ve React'te olay i\u015flemeyi ele alarak hem ba\u015flang\u0131\u00e7 seviyesindeki hem de orta seviyedeki geli\u015ftiricilere rehberlik etmek amac\u0131yla haz\u0131rlanm\u0131\u015ft\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-11-15T03:45:09+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"TypeScript Olay T\u00fcrleri ve React&#8217;te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz","datePublished":"2024-11-15T03:45:09+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/"},"wordCount":654,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/","url":"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/","name":"TypeScript Olay T\u00fcrleri ve React'te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-11-15T03:45:09+00:00","description":"React uygulamalar\u0131nda etkile\u015fimli aray\u00fczler olu\u015fturmak i\u00e7in olay i\u015fleme kullan\u0131m\u0131 olmazsa olmazd\u0131r. TypeScript, JavaScript'e statik tip g\u00fcvenli\u011fi ekleyerek kodun daha g\u00fcvenilir ve okunabilir olmas\u0131n\u0131 sa\u011flar. Bu k\u0131lavuz, TypeScript olay t\u00fcrlerini ve React'te olay i\u015flemeyi ele alarak hem ba\u015flang\u0131\u00e7 seviyesindeki hem de orta seviyedeki geli\u015ftiricilere rehberlik etmek amac\u0131yla haz\u0131rlanm\u0131\u015ft\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/typescript-olay-turleri-ve-reactte-olay-isleme-baslangic-icin-tam-bir-kilavuz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"TypeScript Olay T\u00fcrleri ve React&#8217;te Olay \u0130\u015fleme: Ba\u015flang\u0131\u00e7 \u0130\u00e7in Tam Bir K\u0131lavuz"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=3961"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3961\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=3961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=3961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=3961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}