diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 7edf8eb6e..7a9554fbe 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -1,57 +1,58 @@ --- -title: Using TypeScript +title: TypeScript'i Kullanmak re: https://github.com/reactjs/react.dev/issues/5960 --- -TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript [supports JSX](/learn/writing-markup-with-jsx) and you can get full React Web support by adding [`@types/react`](https://www.npmjs.com/package/@types/react) and [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) to your project. +TypeScript, JavaScript kod tabanlarına tip tanımları eklemenin popüler bir yoludur. TypeScript,kullanıma hazır olarak [JSX'i](/learn/writing-markup-with-jsx) destekler ve projenize [`@types/react`](https://www.npmjs.com/package/@types/react) ve [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) ekleyerek tam React Web desteği alabilirsiniz. -* [TypeScript with React Components](/learn/typescript#typescript-with-react-components) -* [Examples of typing with Hooks](/learn/typescript#example-hooks) -* [Common types from `@types/react`](/learn/typescript/#useful-types) -* [Further learning locations](/learn/typescript/#further-learning) +* [React Bileşenleri ile TypeScript](/learn/typescript#typescript-with-react-components) +* [Hook'larda Tip Kullanımına Örnekler](/learn/typescript#example-hooks) +* [`@types/react`dan Yaygın Tipler](/learn/typescript/#useful-types) +* [Ek Kaynaklar](/learn/typescript/#further-learning) -## Installation {/*installation*/} +## Kurulum {/*installation*/} -All [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation: +Tüm [canlı ortam düzeyinde React framework’leri](/learn/start-a-new-react-project#production-grade-react-frameworks) TypeScript kullanımı için destek sunar. Kurulum için framework’e özgü kılavuzu takip edin: - [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript) - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript) - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/) - [Expo](https://docs.expo.dev/guides/typescript/) -### Adding TypeScript to an existing React project {/*adding-typescript-to-an-existing-react-project*/} +### Mevcut Bir React Projesine TypeScript Ekleme {/*adding-typescript-to-an-existing-react-project*/} -To install the latest version of React's type definitions: +React’in tip tanımlamalarının en son sürümünü yüklemek için: npm install @types/react @types/react-dom -The following compiler options need to be set in your `tsconfig.json`: +`tsconfig.json` dosyanızda aşağıdaki derleyici seçeneklerinin ayarlanması gerekir:: -1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default). -1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications. - If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose. +1. `dom`, [`lib`](https://www.typescriptlang.org/tsconfig/#lib)'e dahil edilmelidir (Not: Eğer `lib` seçeneği belirtilmemişse, `dom` varsayılan olarak dahil edilir). +1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) geçerli seçeneklerden birine ayarlanmalıdır. Çoğu uygulama için `preserve` yeterli olacaktır. +Eğer bir kütüphane yayımlıyorsanız, hangi değeri seçeceğiniz konusunda + If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) başvurun. -## TypeScript with React Components {/*typescript-with-react-components*/} +## React Bileşenleri ile TypeScript {/*typescript-with-react-components*/} -Every file containing JSX must use the `.tsx` file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX. +JSX içeren her dosya `tsx` dosya uzantısını kullanmalıdır. Bu, TypeScript’e bu dosyanın JSX içerdiğini belirten TypeScript’e özel bir uzantıdır. -Writing TypeScript with React is very similar to writing JavaScript with React. The key difference when working with a component is that you can provide types for your component's props. These types can be used for correctness checking and providing inline documentation in editors. +React ile TypeScript yazmak, React ile JavaScript yazmaya çok benzer. Bir bileşenle çalışırken ana fark, bileşenin props’ları için tipler sağlayabilmenizdir. Bu tipler, doğruluk kontrolü yapmak ve editörlerde satır içi dokümantasyon sağlamak için kullanılabilir -Taking the [`MyButton` component](/learn#components) from the [Quick Start](/learn) guide, we can add a type describing the `title` for the button: +[Hızlı Başlangıç](/learn) kılavuzundan [`MyButton` bileşenini](/learn#components) alarak, butonun `title`’ını tanımlayan bir tip ekleyebiliriz: @@ -65,8 +66,8 @@ function MyButton({ title }: { title: string }) { export default function MyApp() { return (
-

Welcome to my app

- +

Uygulamama hoş geldiniz

+
); } @@ -80,19 +81,19 @@ export default App = AppTSX; -These sandboxes can handle TypeScript code, but they do not run the type-checker. This means you can amend the TypeScript sandboxes to learn, but you won't get any type errors or warnings. To get type-checking, you can use the [TypeScript Playground](https://www.typescriptlang.org/play) or use a more fully-featured online sandbox. +Bu sandboxlar TypeScript kodunu çalıştırabilir, ancak tip denetleyicisini çalıştırmaz. Bu, TypeScript sandboxlar öğrenmek için değiştirebileceğiniz, ancak tip hataları veya uyarıları almayacağınız anlamına gelir. Tip denetimi almak için [TypeScript Playground](https://www.typescriptlang.org/play) kullanabilir veya daha tam özellikli bir çevrimiçi sandbox kullanabilirsiniz. -This inline syntax is the simplest way to provide types for a component, though once you start to have a few fields to describe it can become unwieldy. Instead, you can use an `interface` or `type` to describe the component's props: +Bu yerinde sözdizimi, bir bileşen için tipler sağlamanın en basit yoludur; ancak birkaç alan tanımlamaya başladığınızda karmaşık hale gelebilir. Bunun yerine, bileşenin prop’larını tanımlamak için bir `interface` veya `type` kullanabilirsiniz: ```tsx src/App.tsx active interface MyButtonProps { - /** The text to display inside the button */ + /** Butonun içinde görüntülenecek metin */ title: string; - /** Whether the button can be interacted with */ + /** Butonun etkileşime girilip girilemeyeceği */ disabled: boolean; } @@ -105,8 +106,8 @@ function MyButton({ title, disabled }: MyButtonProps) { export default function MyApp() { return (
-

Welcome to my app

- +

Uygulamama hoş geldiniz

+
); } @@ -119,32 +120,31 @@ export default App = AppTSX; -The type describing your component's props can be as simple or as complex as you need, though they should be an object type described with either a `type` or `interface`. You can learn about how TypeScript describes objects in [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) but you may also be interested in using [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) to describe a prop that can be one of a few different types and the [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) guide for more advanced use cases. +Bileşeninizin props’larını tanımlayan tip, ihtiyaç duyduğunuz kadar basit veya karmaşık olabilir; ancak bunlar ya `type` ya da `interface` ile tanımlanmış bir nesne tipi olmalıdır. TypeScript’in nesneleri nasıl tanımladığını [Nesne Tipleri](https://www.typescriptlang.org/docs/handbook/2/objects.html) bölümünde öğrenebilirsiniz, ayrıca birkaç farklı tipten birini alabilen bir prop tanımlamak için [Birleşim Tipleri](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) kullanmayı ve daha karmaşık kullanım senaryoları için [Tiplerden tip Oluşturma](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) kılavuzunu incelemeyi de düşünebilirsiniz. +## Örnek Hooklar {/*example-hooks*/} -## Example Hooks {/*example-hooks*/} +`@types/react`'den gelen tip tanımlamaları, yerleşik Hooks için tipleri içerir, böylece bileşenlerinizde ek bir ayar yapmadan kullanabilirsiniz. Bu tipler, bileşeninizde yazdığınız kodu dikkate alacak şekilde tasarlanmıştır, bu nedenle çoğu zaman [çıkarılan tipler](https://www.typescriptlang.org/docs/handbook/type-inference.html)alırsınız ve ideal olarak tipleri sağlama detaylarıyla ilgilenmeniz gerekmez. -The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. - -However, we can look at a few examples of how to provide types for Hooks. +Ancak,Hooklar için tipleri nasıl sağlayacağımıza dair birkaç örneğe bakabiliriz. ### `useState` {/*typing-usestate*/} -The [`useState` Hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example: +[`useState` Hook'u](/reference/react/useState)değerinin tipini belirlemek için başlangıç durumu olarak geçirilen değeri yeniden kullanacaktır. Örneğin: ```ts // Infer the type as "boolean" const [enabled, setEnabled] = useState(false); ``` -This will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call: +Bu, `enabled` değişkenine `boolean` tipini atayacak ve `setEnabled` fonksiyonu ya bir `boolean` argümanı ya da bir boolean döndüren bir fonksiyon alacaktır. Eğer duruma açıkça bir tip sağlamak istiyorsanız, bunu useState çağrısına bir tip argümanı vererek yapabilirsiniz: ```ts -// Explicitly set the type to "boolean" +// Tipi açıkça "boolean" olarak ayarlayın const [enabled, setEnabled] = useState(false); ``` -This isn't very useful in this case, but a common case where you may want to provide a type is when you have a union type. For example, `status` here can be one of a few different strings: +Bu durumda çok faydalı değil, ancak bir tip sağlamanız gereken yaygın bir durum, bir birleşim tipiyle karşılaştığınızda ortaya çıkar. Örneğin, burada `status` birkaç farklı string değerinden biri olabilir ```ts type Status = "idle" | "loading" | "success" | "error"; @@ -152,7 +152,7 @@ type Status = "idle" | "loading" | "success" | "error"; const [status, setStatus] = useState("idle"); ``` -Or, as recommended in [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state), you can group related state as an object and describe the different possibilities via object types: +Ya da, [Durum yapılandırma ilkeleri](/learn/choosing-the-state-structure#principles-for-structuring-state) bölümünde önerildiği gibi, ilgili durumu bir nesne olarak gruplandırabilir ve farklı olasılıkları nesne tipleri aracılığıyla tanımlayabilirsiniz: ```ts type RequestState = @@ -166,7 +166,7 @@ const [requestState, setRequestState] = useState({ status: 'idle' ### `useReducer` {/*typing-usereducer*/} -The [`useReducer` Hook](/reference/react/useReducer) is a more complex Hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead: +[`useReducer` Hook'u](/reference/react/useReducer), bir azaltıcı fonksiyon ve bir başlangıç durumu alan daha karmaşık bir Hook’tur. Azaltıcı fonksiyonun tipleri, başlangıç durumundan çıkarılır. `useReducer` çağrısına bir tip argümanı sağlayarak duruma bir tip verebilirsiniz, ancak genellikle tipi başlangıç durumuna ayarlamak daha iyidir: @@ -202,11 +202,11 @@ export default function App() { return (
-

Welcome to my counter

+

Sayacıma hoş geldiniz

-

Count: {state.count}

- - +

Sayaç: {state.count}

+ +
); } @@ -220,16 +220,14 @@ export default App = AppTSX; +TypeScript’i birkaç önemli yerde kullanıyoruz: -We are using TypeScript in a few key places: - - - `interface State` describes the shape of the reducer's state. - - `type CounterAction` describes the different actions which can be dispatched to the reducer. - - `const initialState: State` provides a type for the initial state, and also the type which is used by `useReducer` by default. - - `stateReducer(state: State, action: CounterAction): State` sets the types for the reducer function's arguments and return value. - -A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`: + - `interface State` reducer’ın durumunun yapısını tanımlar. + - `type CounterAction` reducer’a gönderilebilecek farklı eylemleri tanımlar. + - `const initialState: State` başlangıç durumu için bir tip sağlar ve ayrıca varsayılan olarak `useReducer` tarafından kullanılan tiptir. + - `stateReducer(state: State, action: CounterAction): State` reducer fonksiyonunun argümanları ve dönüş değeri için tipleri belirler. +`initialState`’e tip ayarlamanın daha açık bir alternatifi, `useReducer`’a bir tip argümanı sağlamaktır: ```ts import { stateReducer, State } from './your-reducer-implementation'; @@ -242,9 +240,9 @@ export default function App() { ### `useContext` {/*typing-usecontext*/} -The [`useContext` Hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a Hook to consume the value in a child component. +[`useContext` Hook'u](/reference/react/useContext)verileri bileşen ağacında aşağıya doğru geçirebilmenin bir tekniğidir ve bu işlem için bileşenler üzerinden props geçirmeye gerek kalmaz. Bir sağlayıcı bileşeni oluşturarak ve genellikle bir alt bileşende değeri tüketmek için bir Hook oluşturarak kullanılır. -The type of the value provided by the context is inferred from the value passed to the `createContext` call: +Context tarafından sağlanan değerin tipi, `createContext` çağrısına geçirilen değerden çıkarılır: @@ -271,7 +269,7 @@ function MyComponent() { return (
-

Current theme: {theme}

+

Güncel tema: {theme}

) } @@ -284,22 +282,22 @@ export default App = AppTSX; -This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. +Bu teknik, anlamlı bir varsayılan değeriniz olduğunda işe yarar; ancak bazen varsayılan değeriniz olmadığında `null` mantıklı gelebilir. Ancak, tip sisteminin kodunuzu anlaması için, `createContext` üzerinde açıkça `ContextShape | null` ayarlamanız gerekir. -This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the Hook do a runtime check for it's existence and throw an error when not present: +Bu, bağlam tüketicileri için tipte `| null`u ortadan kaldırmanız gerektiği sorununu doğurur. Önerimiz, Hook’un varlığını çalışma zamanında kontrol etmesi ve mevcut değilse bir hata fırlatmasıdır: ```js {5, 16-20} import { createContext, useContext, useState, useMemo } from 'react'; -// This is a simpler example, but you can imagine a more complex object here +// Bu daha basit bir örnek, ama burada daha karmaşık bir nesne hayal edebilirsiniz. type ComplexObject = { kind: string }; -// The context is created with `| null` in the type, to accurately reflect the default value. +// Context, varsayılan değeri doğru bir şekilde yansıtmak için tipte `| null` ile oluşturulmuştur. const Context = createContext(null); -// The `| null` will be removed via the check in the Hook. +// `| null` Hook’taki kontrol aracılığıyla kaldırılacaktır. const useGetComplexObject = () => { const object = useContext(Context); if (!object) { throw new Error("useGetComplexObject must be used within a Provider") } @@ -321,7 +319,7 @@ function MyComponent() { return (
-

Current object: {object.kind}

+

Mevcut nesne: {object.kind}

) } @@ -329,18 +327,15 @@ function MyComponent() { ### `useMemo` {/*typing-usememo*/} -The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook. - +[`useMemo`](/reference/react/useMemo) Hook’u, bir fonksiyon çağrısından hafızada tutulan bir değeri oluşturur veya yeniden erişir ve yalnızca ikinci parametre olarak geçirilen bağımlılıklar değiştiğinde fonksiyonu tekrar çalıştırır. Hook’un çağrılmasının sonucu, ilk parametredeki fonksiyondan dönen değerden çıkarılır. Hook’a bir tip argümanı sağlayarak daha açık olabilirsiniz. ```ts -// The type of visibleTodos is inferred from the return value of filterTodos +// visibleTodos’un tipi, filterTodos’un dönen değerinden çıkarılır. const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); ``` - ### `useCallback` {/*typing-usecallback*/} -The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the Hook. - +[`useCallback`](/reference/react/useCallback) ikinci parametre olarak geçirilen bağımlılıklar aynı olduğu sürece bir fonksiyona kararlı bir referans sağlar. `useMemo` gibi, fonksiyonun tipi ilk parametredeki fonksiyondan dönen değerden çıkarılır ve Hook’a bir tip argümanı sağlayarak daha açık olabilirsiniz. ```ts const handleClick = useCallback(() => { @@ -348,9 +343,9 @@ const handleClick = useCallback(() => { }, [todos]); ``` -When working in TypeScript strict mode `useCallback` requires adding types for the parameters in your callback. This is because the type of the callback is inferred from the return value of the function, and without parameters the type cannot be fully understood. +TypeScript strict modunda çalışırken, `useCallback` kullanırken geri çağırma fonksiyonunuzun parametreleri için tip eklemeniz gerekir. Bunun nedeni, geri çağırma fonksiyonunun tipinin dönen değerden çıkarılmasıdır ve parametreler olmadan tip tam olarak anlaşılamaz. -Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback: +Kod stili tercihlerine bağlı olarak, geri çağırmayı tanımlarken aynı anda olay işleyici için tip sağlamak amacıyla React tiplerinden `*EventHandler` fonksiyonlarını kullanabilirsiniz: ```ts import { useState, useCallback } from 'react'; @@ -371,13 +366,13 @@ export default function Form() { } ``` -## Useful Types {/*useful-types*/} +## Kullanışlı Tipler {/*useful-types*/} -There is quite an expansive set of types which come from the `@types/react` package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them [in React's folder in DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). We will cover a few of the more common types here. +`@types/react` paketinden gelen oldukça geniş bir tip seti vardır ve React ile TypeScript’in nasıl etkileşime girdiğini anladığınızda incelemeye değer. Bunları [DefinitelyTyped’teki React klasöründe](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). bulabilirsiniz. Burada daha yaygın kullanılan birkaç tipi ele alacağız. -### DOM Events {/*typing-dom-events*/} +### DOM Olayları {/*typing-dom-events*/} -When working with DOM events in React, the type of the event can often be inferred from the event handler. However, when you want to extract a function to be passed to an event handler, you will need to explicitly set the type of the event. +React’te DOM olaylarıyla çalışırken, olayın tipi genellikle olay işleyicisinden çıkarılabilir. Ancak, bir fonksiyonu olay işleyicisine geçirmek üzere ayırmak istediğinizde, olayın tipini açıkça belirtmeniz gerekir. @@ -385,7 +380,7 @@ When working with DOM events in React, the type of the event can often be inferr import { useState } from 'react'; export default function Form() { - const [value, setValue] = useState("Change me"); + const [value, setValue] = useState("Beni değiştir"); function handleChange(event: React.ChangeEvent) { setValue(event.currentTarget.value); @@ -394,7 +389,7 @@ export default function Form() { return ( <> -

Value: {value}

+

Değer: {value}

); } @@ -407,15 +402,15 @@ export default App = AppTSX; -There are many types of events provided in the React types - the full list can be found [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) which is based on the [most popular events from the DOM](https://developer.mozilla.org/en-US/docs/Web/Events). +React tiplerinde birçok olay tipi sağlanmıştır - tam listeye [buradan](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) ulaşabilirsiniz. Bu liste, [DOM’daki en popüler olaylara](https://developer.mozilla.org/en-US/docs/Web/Events). -When determining the type you are looking for you can first look at the hover information for the event handler you are using, which will show the type of the event. +Kullandığınız olay işleyici için tipi belirlerken, ilk olarak olay işleyicinin üzerine geldiğinizde görünen bilgiye bakabilirsiniz; bu, olayın tipini gösterecektir. -If you need to use an event that is not included in this list, you can use the `React.SyntheticEvent` type, which is the base type for all events. +Bu listede yer almayan bir olayı kullanmanız gerekirse, tüm olaylar için temel tip olan `React.SyntheticEvent` tipini kullanabilirsiniz. ### Children {/*typing-children*/} -There are two common paths to describing the children of a component. The first is to use the `React.ReactNode` type, which is a union of all the possible types that can be passed as children in JSX: +Bir bileşenin children prop’unu tanımlamak için iki yaygın yol vardır. İlki, JSX içinde children olarak geçebilecek tüm olası tiplerini birleşimi olan `React.ReactNode` tipini kullanmaktır: ```ts interface ModalRendererProps { @@ -424,7 +419,7 @@ interface ModalRendererProps { } ``` -This is a very broad definition of children. The second is to use the `React.ReactElement` type, which is only JSX elements and not JavaScript primitives like strings or numbers: +Bu, children için oldukça geniş bir tanımdır. İkinci yol ise, sadece JSX öğelerini ve JavaScript ilkel tipleri (string veya number gibi) içermeyen `React.ReactElement` tipini kullanmaktır: ```ts interface ModalRendererProps { @@ -433,13 +428,13 @@ interface ModalRendererProps { } ``` -Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `
  • ` children. +Dikkat edilmesi gereken bir nokta, TypeScript’i kullanarak children’ın belirli bir tipteki JSX öğeleri olduğunu tanımlayamayacağınızdır; bu nedenle yalnızca `
  • ` children’ları kabul eden bir bileşeni tanımlamak için tip sistemini kullanamazsınız. -You can see an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). +`React.ReactNode` ve `React.ReactElement` örneklerini tip denetleyicisi ile birlikte `bu TypeScript playground`(https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA)’ında görebilirsiniz.. -### Style Props {/*typing-style-props*/} +### Stil Propları {/*typing-style-props*/} -When using inline styles in React, you can use `React.CSSProperties` to describe the object passed to the `style` prop. This type is a union of all the possible CSS properties, and is a good way to ensure you are passing valid CSS properties to the `style` prop, and to get auto-complete in your editor. +React’ta inline stiller kullanırken, `style` prop’una geçirilen nesneyi tanımlamak için `React.CSSProperties` kullanabilirsiniz. Bu tip, tüm olası CSS özelliklerinin birleşimidir ve `style` prop’una geçerli CSS özellikleri sağladığınızdan emin olmak ve düzenleyicinizde otomatik tamamlama almak için iyi bir yoldur. ```ts interface MyComponentProps { @@ -447,17 +442,18 @@ interface MyComponentProps { } ``` -## Further learning {/*further-learning*/} +## Daha Fazla Öğrenme {/*further-learning*/} + +Bu rehberde, TypeScript’i React ile kullanmanın temelleri ele alındı, ancak öğrenilecek daha çok şey var. Dokümanlardaki bireysel API sayfaları, TypeScript ile nasıl kullanılacağına dair daha derinlemesine belgeler içerebilir. + +Aşağıdaki kaynakları öneriyoruz: -This guide has covered the basics of using TypeScript with React, but there is a lot more to learn. -Individual API pages on the docs may contain more in-depth documentation on how to use them with TypeScript. + - [TypeScript el kitabı](https://www.typescriptlang.org/docs/handbook/) TypeScript için resmi belgelerdir ve çoğu ana dil özelliğini ele alır. -We recommend the following resources: + - [TypeScript sürüm notları](https://devblogs.microsoft.com/typescript/) yeni özellikleri derinlemesine ele alır. - - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features. + - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) TypeScript ile React kullanımı için topluluk tarafından sürdürülen bir kılavuzdur; birçok faydalı kenar durumu kapsar ve bu belgeden daha geniş bir kapsam sunar. - - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover new features in depth. + - [TypeScript Topluluk Discord’u](https://discord.com/invite/typescript) TypeScript ve React ile ilgili sorunlar için sorular sorabileceğiniz ve yardım alabileceğiniz harika bir yerdir. - - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document. - - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.