You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/static-type-checking.md
+23-22Lines changed: 23 additions & 22 deletions
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ next: refs-and-the-dom.html
10
10
11
11
## Flow {#flow}
12
12
13
-
[Flow](https://flow.org/), JavaScript kodunuz için bir statik tip denetleyicisidir. Facebook'ta geliştirilmiştir ve sıkça React ile birlikte kullanılır. Özel bir tip sözdizimiyle değişkenlerinizi, fonksiyonlarınızı ve React bileşenlerinizi açıklama şansı ve hataları erkenden yakalama şansı verir. [Flow'a giriş](https://flow.org/en/docs/getting-started/)i okuyarak temellerini öğrenebilirsiniz.
13
+
[Flow](https://flow.org/), JavaScript kodunuz için bir statik tip denetleyicisidir. Facebook'ta geliştirilmiştir ve sıkça React ile birlikte kullanılır. Özel bir tip sözdizimiyle değişkenlerinizi, fonksiyonlarınızı ve React bileşenlerinizi açıklama ve hataları erkenden yakalama şansı verir. [Flow'a giriş](https://flow.org/en/docs/getting-started/)i okuyarak temellerini öğrenebilirsiniz.
14
14
15
15
Flow'u kullanmak için:
16
16
@@ -22,7 +22,7 @@ Bu maddeleri aşağıda daha detaylı olarak açıklayacağız.
22
22
23
23
### Flow'u Bir Projeye Ekleme {#adding-flow-to-a-project}
24
24
25
-
Öncelikle, terminalde proje dizininize gidin. Sonra aşağıdaki komutu çalıştırmanız gerekecek:
25
+
Öncelikle, terminalde proje dizininize gidin. Ardından, aşağıdaki komutu çalıştırmanız gerekecek:
26
26
27
27
Eğer [Yarn](https://yarnpkg.com/) kullanıyorsanız, bu komutu çalıştırın:
28
28
@@ -69,21 +69,21 @@ Bu komut, sizin için commit etmeniz gereken bir Flow ayar dosyası oluşturacak
Flow, JavaScript dilini tip açıklamaları için özel bir sözdizimi ile genişletir. Ancak, tarayıcılar bu sözdiziminden haberdar değildir. Bu güzden, onun tarayıcıya yollanan JavaScript demetinde yer almadığından emin olmalıyız.
72
+
Flow, JavaScript dilini tip açıklamaları için özel bir sözdizimi yardımıyla genişletir. Ancak, tarayıcılar bu sözdiziminden haberdar değildir. Bu yüzden, onun tarayıcıya yollanan JavaScript demetinde yer almadığından emin olmalıyız.
73
73
74
74
Bunun tam olarak nasıl sağlandığı, JavaScript'i derlemek için kullandığınız araca bağlıdır.
75
75
76
76
#### Create React App {#create-react-app}
77
77
78
-
Eğer projeniz [Create React App](https://github.com/facebookincubator/create-react-app) ile oluşturulduysa, tebrikler! Flow açıklamaları zaten öntanımlı olarak saf dışı bırakılmıştır. Bu yüzden sizin bu adımda herhangi bir şey yapmanıza gerek yok.
78
+
Eğer projeniz [Create React App](https://github.com/facebookincubator/create-react-app) ile oluşturulduysa, tebrikler! Flow açıklamaları zaten öntanımlı olarak saf dışı bırakılmıştır. Bu yüzden sizin bu adımda herhangi bir şey yapmanıza gerek kalmaz.
79
79
80
80
#### Babel {#babel}
81
81
82
82
>Not:
83
83
>
84
-
>Bu talimatlar Create React App kullanıcıları için *değildir*. Create React App özünde Babel kullanıyor olsa da, o zaten Flow'u anlayacak şekilde ayarlanmıştır. Bu adımı sadece eğer Create React App *kullanmıyorsanız* takip ediniz.
84
+
>Bu talimatlar Create React App kullanıcıları için *değildir*. Create React App özünde Babel kullanıyor olsa da, zaten Flow'u anlayacak şekilde ayarlanmıştır. Bu adımı sadece eğer Create React App *kullanmıyorsanız* takip ediniz.
85
85
86
-
Eğer projenizi Babel kullanmak üzere elle ayarladıysanız, Flow için özel bir önayar yüklemeniz gerekmektedir.
86
+
Eğer projenizi Babel kullanmak üzere elle ayarladıysanız, Flow için özel bir ön ayar yüklemeniz gerekmektedir.
87
87
88
88
Eğer yarn kullanıyorsanız, bu komutu çalıştırın:
89
89
@@ -96,6 +96,7 @@ Eğer npm kullanıyorsanız, bu komutu çalıştırın:
96
96
```bash
97
97
npm install --save-dev babel-preset-flow
98
98
```
99
+
99
100
Ardından, `flow` ön ayarını [Babel ayarlarınıza](https://babeljs.io/docs/usage/babelrc/) ekleyin. Örneğin, eğer Babel'i `.babelrc` ile ayarlıyorsanız, şöyle görünebilir:
>Flow, `react` ön ayarına ihtiyaç duymaz, ancak ikisi genellikle birlikte kullanılır. Flow, JSX sözdizimini kendiliğinden anlayabilir.
115
+
>Flow, `react` ön ayarına ihtiyaç duymaz ancak ikisi genellikle birlikte kullanılır. Flow, JSX sözdizimini kendiliğinden anlayabilir.
115
116
116
117
#### Diğer İnşa Ayarları {#other-build-setups}
117
118
118
-
Eğer Create React App veya Babel'den birini kullanmıyorsanırz, [flow-remove-types](https://github.com/flowtype/flow-remove-types) kullanarak tip açıklamalarını ayırabilirsiniz.
119
+
Eğer Create React App veya Babel'den birini kullanmıyorsanırz, [flow-remove-types](https://github.com/flowtype/flow-remove-types) kullanarak tip açıklamalarını kodunuzdan ayırabilirsiniz.
119
120
120
121
### Flow'u Çalıştırmak {#running-flow}
121
122
@@ -146,9 +147,9 @@ No errors!
146
147
// @flow
147
148
```
148
149
149
-
Bu, genellike dosyanın en üstünde yer alır. Flow'un hiç sorun bulup bulmadığını görmek için, projenizdeki bazı dosyalara eklemeyi ve `yarn flow` veya `npm run flow` komutlarını çalıştırmayı deneyin.
150
+
Bu, bir dosyanın genellike en üstünde yer alır. Flow'un hiç sorun bulup bulmadığını görmek için, projenizdeki bazı dosyalara eklemeyi ve `yarn flow` veya `npm run flow` komutlarını çalıştırmayı deneyin.
150
151
151
-
Bunun yanında, Flow'u açıklamaya bağlı olmadan*tüm* dosyaları denetlemeye zorlamanın [bir yolu daha](https://flow.org/en/docs/config/options/#toc-all-boolean) var. Eski projeleriniz için biraz fazla olabilir, ancak yeni başlanan bir projelede Flow ile tip denetimi isterseniz mantıklı olur.
152
+
Bunun yanında, Flow'u açıklamadan bağımsız olarak*tüm* dosyaları denetlemeye zorlamanın [bir yolu daha](https://flow.org/en/docs/config/options/#toc-all-boolean) var. Bu eski projeleriniz için biraz fazla olabilir, ancak yeni başlanan bir projelede Flow ile tip denetimi yapmak isterseniz, bu mantıklı olur.
152
153
153
154
Artık hazırsınız! Flow hakkında daha fazla bilgi için aşağıdaki kaynaklara da bir göz atmanızı öneririz:
154
155
@@ -159,7 +160,7 @@ Artık hazırsınız! Flow hakkında daha fazla bilgi için aşağıdaki kaynakl
159
160
160
161
## TypeScript {#typescript}
161
162
162
-
[TypeScript](https://www.typescriptlang.org/), Microsoft tarafından geliştirilmiş bir yazılım dilidir. JavaScript'in bir üst kümesidir ve kendi derleyicisi vardır. TypeScript tipli bir programlama dili olduğundan, hataları ve sorunları inşa sırasında, uygulamanız canlıya geçmeden çok önce yakalayabilir. React'i TypeScript ile kullanma hakkında [buradan](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter) daha fazla bilgiye ulaşabilirsiniz.
163
+
[TypeScript](https://www.typescriptlang.org/), Microsoft tarafından geliştirilmiş bir yazılım dilidir. JavaScript'in bir üst kümesidir ve kendi derleyicisi vardır. TypeScript tipli bir programlama dili olduğundan, hataları ve sorunları inşa sırasında, uygulamanız canlıya geçmeden çok önce yakalayabilir. React'i TypeScript ile kullanmak hakkında [buradan](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter) daha fazla bilgiye ulaşabilirsiniz.
163
164
164
165
TypeScript'i kullanmak için:
165
166
* TypeScript'i projenize bir bağımlılık olarak eklemeye
@@ -200,7 +201,7 @@ Eğer [npm](https://www.npmjs.com/) kullanıyorsanız, bu komutu çalıştırın
200
201
```bash
201
202
npm install --save-dev typescript
202
203
```
203
-
Tebrikler! TypeScript'in en güncel sürümünü projenize yüklediniz. TypeScript'i yüklemek bize `tsc` komutuna erişim sağlıyor. Ayarlamadan önce, gelin `tsc`'yi `package.json`'umuzun "script" kısmına ekleyelim:
204
+
Tebrikler! TypeScript'in en güncel sürümünü projenize yüklediniz. TypeScript'i yüklemek bize `tsc` komutuna erişim sağlıyor. Ayarlamadan önce, gelin `tsc`'yi `package.json`'umuzun "scripts" kısmına ekleyelim:
204
205
205
206
```js{4}
206
207
{
@@ -233,7 +234,7 @@ Yeni oluşturduğumuz `tsconfig.json`'a baktığımızda, derleyiciyi ayarlayabi
233
234
Biz, bu birçok seçenekten `rootDir` ve `outDir`'e bakacağız. Kendinden beklendiği gibi derleyici, typescript dosyalarını javascript dosyalarına dönüştürecek. Ancak biz, kendi kaynak dosyalarımızla üretilmiş dosyaların karışmasını istemiyoruz.
234
235
235
236
Bunu iki adımda çözeceğiz:
236
-
* İlk olarak, gelin proje yapımızı şu sekilde düzenleyelim. Tüm kaynak kodlarımızı `src` dizinine koyacağız.
237
+
* İlk olarak, gelin proje yapımızı aşağıdaki şekilde düzenleyelim. Tüm kaynak kodlarımızı `src` dizinine koyacağız.
237
238
238
239
```
239
240
├── package.json
@@ -255,12 +256,12 @@ Bunu iki adımda çözeceğiz:
255
256
},
256
257
}
257
258
```
258
-
Harika! Şimdi inşa betiğimizi çalıştırdığımızda, derleyici üretilen javascript'i `build` dizinine koyacak. [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) başlangıç için iyi bir kurallar bütününü size sunuyor.
259
+
Harika! Şimdi inşa betiğimizi çalıştırdığımızda, derleyici üretilen javascript'i `build` dizinine koyacak. Ayrıca [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json), başlangıç için uygun bir kurallar bütününü size sunuyor.
259
260
260
261
Genellikle üretilen javascript'i kaynak kontrolünüzde tutmak istemezsiniz. Bu yüzden, `build` dizininizi `.gitignore` dosyanıza eklediğinizden emin olun.
261
262
262
263
### Dosya uzantıları {#file-extensions}
263
-
React'te bileşenlerinizi muhtemelen bir `.js` dosyasına yazıyorsunuz. TypeScript'te iki dosya uzantımız var:
264
+
React'te bileşenlerinizi muhtemelen bir `.js` dosyasına yazıyorsunuzdur. TypeScript'te ise iki dosya uzantımız var:
264
265
265
266
`.ts` öntanımlı dosya uzantısıyken, `.tsx` ise `JSX` içeren dosyalar için kullanılan özel bir dosya uzantısıdır.
266
267
@@ -280,11 +281,11 @@ Eğer bir çıktı görmüyorsanız kodunuz başarılı olarak derlenmiş demekt
280
281
281
282
282
283
### Tip Tanımlamaları {#type-definitions}
283
-
Derleyici, diğer paketlerdeki hataları ve ipuçlarını göstermek için beyan dosyalarına ihtiyaç duyar. Beyan dosyası, bir kütüphane hakkındaki tüm tip bilgilerini sağlar. Bu bize javascript kütüphanelerini tıpkı npm gibi kullanma imkanını sunar.
284
+
Derleyici, diğer paketlerdeki hataları ve ipuçlarını göstermek için beyan dosyalarına ihtiyaç duyar. Beyan dosyası, bir kütüphane hakkındaki tüm tip bilgilerini sağlar. Bu bize javascript kütüphanelerini tıpkı npm gibi kullanma imkanını verir.
284
285
285
286
Bir kütüphane için beyana ulaşmanın iki yolu vardır:
286
287
287
-
__Paket__ - Kütüphane kendi beyan dosyasını tanımlar. Bu, tüm yapmamız gerekenin yalnızca kütüphaneyi yüklemek olması ve onu anında kullanmamızı sağladığı için bizim için harikadır. Bir kütüphanenin tiplerinin paketli olup olmadığını denetlemek için projenizde bir `index.d.ts` dosyasının olup olmadığına bakın. Kimi kütüphaneler bunu kendi `package.json` dosyalarında, `typings` veya `types` alanında belirtirler.
288
+
__Demet__ - Kütüphaneler kendi beyan dosyasını tanımlar. Bu, tüm yapmamız gerekenin yalnızca kütüphaneyi yüklemek olması ve onu anında kullanmamızı sağladığı için bizim için harikadır. Bir kütüphanenin tiplerinin demetli olup olmadığını denetlemek için projenizde bir `index.d.ts` dosyasının olup olmadığına bakın. Kimi kütüphaneler bunu kendi `package.json` dosyalarında, `typings` veya `types` alanında belirtirler.
288
289
289
290
__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ - DefinitelyTyped, beyan dosyalarını paketli olarak ulaştırmayan kütüphaneler için kocaman bir beyan deposudur. Beyanlar, kitle kaynaklıdır ve Microsoft ve açık kaynak katkıcılar tarafından yönetilir. Örneğin React kendi beyan dosyasını paketlemez. Bunun yerine onu DefinitelyTyped'dan alabiliriz. Bunun için aşağıdaki komutu terminale girin:
290
291
@@ -297,7 +298,7 @@ npm i --save-dev @types/react
297
298
```
298
299
299
300
__Yerel Tanımlamalar__
300
-
Bazen kullanmak istediğiniz kütüphane beyanlarını ne paketli halde sunar, ne de onlar DefinitelyTyped'ta mevcuttur. Bu durumda yerel bir beyan dosyamız olabilir. Bunun için kaynak dizininizin kökünde `declarations.d.ts` dosyasını oluşturun. Basit bir beyan dosyası şöyle görünebilir:
301
+
Bazen kullanmak istediğiniz kütüphanenin beyanları ne demetli halde sunulur, ne de DefinitelyTyped'ta mevcuttur. Bu durumda yerel bir beyan dosyamız olabilir. Bunun için kaynak dizininizin kökünde `declarations.d.ts` dosyasını oluşturun. Basit bir beyan dosyası şöyle görünebilir:
[Reason](https://reasonml.github.io/) yeni bir dil değil, güvenilirliği kanıtlanmış [OCaml](https://ocaml.org/) ile güçlendirilen yeni bir sözdizimi ve araçlar zincidir. Reason, OCaml'a JavaScript programcılarına yönelik bilindik bir sözdizimi verir ve mevcut NPM/Yarn iş akışlarına hakim kişilerin ihtiyaçlarını karşılar.
317
+
[Reason](https://reasonml.github.io/) yeni bir dil değil, güvenilirliği zaten kanıtlanmış olan [OCaml](https://ocaml.org/) ile güçlendirmiş yeni bir sözdizimi ve araçlar zincidir. Reason, OCaml'a JavaScript programcılarına yönelik bilindik bir sözdizimi verir ve mevcut NPM/Yarn iş akışlarına hakim kişilerin ihtiyaçlarını karşılar.
317
318
318
-
Reason Facebook'ta geliştirilmekte ve Messenger gibi kimi ürünlerinde kullanılmaktadır. Hala biraz deneyseldir ama Facebook tarafından sürdürülen, [React'e adanmış bağlamaları](https://reasonml.github.io/reason-react/) ve [enerjik bir topluluğu](https://reasonml.github.io/docs/en/community.html) vardır.
319
+
Reason Facebook'ta geliştirilmekte ve Messenger gibi kimi ürünlerinde kullanılmaktadır. Hala biraz deneyseldir ama Facebook tarafından sürdürülen [React'e adanmış bağlamaları](https://reasonml.github.io/reason-react/) ve [enerjik bir topluluğu](https://reasonml.github.io/docs/en/community.html) vardır.
319
320
320
321
## Kotlin {#kotlin}
321
322
322
-
[Kotlin](https://kotlinlang.org/) JetBrains tarafından geliştirilmiş statik tipli bir dildir. Hedef platformları arasında JVM, Android, LLVM ve [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html) bulunur.
323
+
[Kotlin](https://kotlinlang.org/), JetBrains tarafından geliştirilmiş statik tipli bir dildir. Hedef platformları arasında JVM, Android, LLVM ve [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html) bulunur.
323
324
324
-
JetBrains React topluluğu için özel olarak kimi araçlar geliştirmekte ve bakımlarını yapmaktadır: [React bağlamaları](https://github.com/JetBrains/kotlin-wrappers) ve [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). Sonraki, Kotlin uygulamalarını hiçbir inşa ayarına ihtiyaç duymadan React ile yazmanıza yardımcı olur.
325
+
JetBrains React topluluğu için özel olarak kimi araçlar geliştirmekte ve bakımlarını yapmaktadır: [React bağlamaları](https://github.com/JetBrains/kotlin-wrappers) ve [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). Bunlardan ikincisi, Kotlin uygulamalarını hiçbir inşa ayarına ihtiyaç duymadan React ile yazmanıza yardımcı olur.
325
326
326
327
## Diğer Diller {#other-languages}
327
328
JavaScript'e derlenebilen ve dolayısıyla React'e uyumlu başka statik tipli diller diller de mevcuttur; örneğin [elmish-react](https://elmish.github.io/react)'li [F#/Fable](https://fable.io/). Daha fazla bilgi için sitelerini ziyaret edin ve React ile çalışan diğer statik tipli dilleri de bu sayfaya eklemekten çekinmeyin.
0 commit comments