TypeScript veya JavaScript ile tepki verin: Hangisi Daha İyi?

TypeScript Nedir?

Açık kaynaklı TypeScript, TypeScript kodunu JavaScript koduna dönüştüren bir derleyici sağlar. Bu dil açık kaynaklı ve tarayıcılar arasıdır. Js dilinde neredeyse hiç mantıksal kusur olmadığını varsayalım. Bu durumda,.js komut dosyalarınızı.ts dosyaları olarak yeniden adlandırarak TypeScript'i kullanabilir ve uygun TypeScript kodunu almaya başlayabilirsiniz.

JavaScript dili, TypeScript'in özel bir sürümü olacaktır. Microsoft'ta teknik bir arkadaş olan Anders Hejlsberg, onu 2012'de tanıttı ve yarattı. JavaScript daha popüler hale geldiğinden, JS kodu daha hantal ve anlaşılması daha zor hale geldi, bu yüzden TypeScript geliştirildi. Programcılar, sunucu tarafı teknolojiler için JavaScript'i kullanmaya başladığında, bu daha net hale geldi.

JavaScript Nedir?

Bir kullanıcı sayfası, orada oturmaktan ve bakmanız için statik veriler göstermekten çok daha fazlasını yaptığında - daha iyi içerik, görselleştirmeler, çizgi film 2D/3D grafikler, video kayıt oynatıcılara göz atma vb. - JavaScript'in geçerli olduğuna bahse girebilirsiniz. muhtemelen dahil. JavaScript, web sayfalarına gelişmiş yapıları dahil etmenizi sağlayan bir komut dosyası veya kodlama dilidir. Standart web teknolojilerinden oluşan pastanın üçüncü aşamasıdır, ilk ikisi (HTML ve CSS).

JavaScript veya TypeScript ile React Daha İyi mi?

İlk incelemede, standart bir React TypeScript ile JavaScript'ten gelen kod arasında bir fark yok gibi görünüyor. TypeScript'in Kod Kümesi olduğu ve JavaScript'in atası olduğu göz önüne alındığında, bu tamamen beklenir. JavaScript ve TypeScript arasındaki farklar son birkaç yılda pek değişmedi. Onları tanıyorsan gitmeye hazırsın.

Gelecekteki teknolojik gelişmeler, yazılım üretimini hızlandırabilir ve programcılara olan talebi artırabilir. Lütfen herhangi bir dil kullanın; hem küçük hem de büyük projelerde geliştirme bekliyoruz: Uluslararası ekiplerle büyük projeler için TypeScript'i veya harika ekiplerle basit görevler için JavaScript'i seçin.

JavaScript yaygın olarak kullanılmaktadır. Onu analiz ederler ve dilin kararsız ve tahmin edilemez olduğunu bulurlar. Gerekirse, JS çerçeveleri TypeScript'e çevrilebilir. Popüler JS sistemlerini TS'ye dönüştürmek için emek gereklidir.

The.d.ts dosyaları belgelenmeli ve taşınan her kitaplık için döndürülen tüm metodolojileri içermelidir. jQuery'nin taşınması daha fazla çaba gerektiriyordu. Belki de bu o kadar da zor değildir. TypeScript, IDEA, WebStorm, Expressive, Particle ve diğerleri tarafından desteklenir.

TypeScript ve JavaScript'te React Code ve Dosya türü

İlk incelemede, standart bir React TypeScript ile JavaScript'ten gelen kod arasında bir fark yok gibi görünüyor.

TypeScript'in Kod Kümesi olduğu ve JavaScript'in atası olduğu göz önüne alındığında, bu tamamen beklenir. Bu, herhangi bir JavaScript tabanlı programlamanın TypeScript dosyalarını da çalıştırabileceği anlamına gelir. Benzer şekilde, tüm SASS dilleri meşru CSS kodu olamaz; bu fikir, tüm CSS'lerin SASS kodunda kabul edilebilir olduğunu belirtir.

Ancak, bilgisayar TypeScript dilini çalıştıramaz, bu nedenle TypeScript uygulamalarınızın çoğunda tsconfig.json bulunur. Bu yapılandırma dosyası, TypeScript derleyicisinin nasıl davrandığını değiştirecek ve TypeScript kodunu tarayıcının anlayabileceği ve kullanabileceği JavaScript'e çevirecektir.

TypeScript ve JavaScript React uygulaması arasındaki temel fark, öncekinin dosya adıdır. Örneğin, TSX, ikincisi ise.js.

TypeScript'te React Projesi Nasıl Oluşturulur?

Ortamınızda create-react-app kitaplığını kullanarak yeni bir TypeScript React projesi oluşturabilir ve şu komutu kullanabilirsiniz:

 npx create-react-app my-app --template typescript

veya,

 yarn create react-app my-app --template Typescript

TypeScript'e dönüştürmek istediğiniz mevcut bir JavaScript React projeniz varsa, bu komutu çalıştırabilirsiniz.

 npm install — save typescript @types/node @types/react @types/react-dom @types/jest

veya,

 yarn add typescript @types/node @types/react @types/react-dom @types/jest

Komutu çalıştırdıktan sonra, tüm .js dosyalarınızı .tsx olarak yeniden adlandırabilir, sunucuyu yeniden başlatabilir ve devam edebilirsiniz.

1. Hata Yakalayıcı

TypeScript'in düzeltebileceği kalan kusurların oranı, başka yollarla daha fazla ts-tespit edilemeyen hata ayarlandığında artar, ancak bu, TypeScript'in hala iyileştirebileceği toplam sorun sayısını da azaltır. Bu nedenle, oran artabilirken, keşfedilen sorunların sayısı biraz değişebilir.

2. IDE'de IntelliSense yardımcısı

Bileşenleri Listele, Parametre Bilgisi, Hızlı Bilgi ve Tüm Kelime, bir kod tamamlama aracı olan IntelliSense tarafından sunulan işlevlerden bazılarıdır. Yalnızca birkaç tuşa basarak, özniteliklere ve yöntemlere çağrı ekleyebilir, yazdığınız argümanların kaydını tutabilir ve bu yetenekler sayesinde kullanmakta olduğunuz yazılım hakkında biraz bilgi edinebilirsiniz.

3. Tip Sistemi

React TypeScript projenizin kodunun Bug Catcher ve IntelliSense'i etkinleştirebilmesi için değişkenlerinizi veya nesnelerinizi tam olarak nasıl yazacağınızı merak edebilirsiniz. Reactive TypeScript projesinde size uygun olan TypeScript Type Process'i sağlamak için akılda tutulması gereken üç şey vardır.

1. Nesneler/diziler için etkileşimi ve ilkel tür değişkenleri için alt türü bildirin.

Bir nesnedeki alanı isteğe bağlı yapmak için Operatörü kullanabilirsiniz. TypeScript'in kodunuzu kontrol ederken sizi rahatsız etmesini önleyecektir.

2. Gerektiğinde, işlevsel bileşen türünü bildirin

3. Bunu ücretsiz olarak kullanabilirsiniz. Bir özelliği bir değerle başlatmak, TypeScript'in kaliteyi sizin için hemen seçmesine olanak tanır.

React ile TypeScript Kullanmak için 5 Neden

TypeScript, son birkaç yıldır ön uç programcılar arasında yüksek talep görüyor. Başarısına katkıda bulunan birkaç faktör, geliştirilmiş yeniden kullanılabilirlik, kod tekdüzeliği ve gelecekteki platform desteğidir. Ayrıca, tepki tarafsız kaldı ve programcılara TypeScript veya JavaScript kullanma seçeneği sunuyor. Buna karşılık, diğer birçok platform ve kitaplık, varsayılan olarak TypeScript'i benimsemiştir.

Bu gönderide, React uygulamaları için TypeScript kullanımı lehine 5 zorlayıcı argümanı inceleyeceğiz.

1. Bileşenlerin okunması ve anlaşılması kolaydır

Prop türlerinin TypeScript kullanılarak tanımlanması kolaydır, bu da kodu çok daha kesin ve anlaşılır kılar. Ek olarak, IntelliSense ve statik tür denetimi desteği de dahil edilecektir.

Birlikte, bu faktörler geliştirme sürecini iyileştirir ve kusur olasılığını azaltır. Ek olarak, Prop türlerine not eklemek, bileşen tanımlarının anlaşılmasını kolaylaştırır.

2. Daha iyi JSX desteği

TypeScript + React'in bir başka avantajı, JSX için geliştirilmiş IntelliSense ve kod sentezidir. Bit, projeler arasında bağımsız bileşenleri dağıtmayı, tanımlamayı ve yeniden kullanmayı kolaylaştırır. Ölçeklenebilir uygulamalar oluşturmak, tutarlı bir tasarım sağlamak, kodun yeniden kullanımını teşvik etmek, başkalarıyla işbirliği yapmak ve teslimatı hızlandırmak için bunu kullanın.

3. Paylaşılan kitaplıklarda varsayılan olarak TypeScript desteği

Birkaç yıl önce TypeScript kullandığınızı varsayalım. Bu durumda, üçüncü taraf kitaplıkları için ortaya çıkan Kavramları aramanın ne kadar sinir bozucu olduğunu hatırlayabilirsiniz. Ama şimdi TypeScript hızla popülerlik kazanıyor; en yaygın kullanılan kitaplıklar, Tür Tanımlarını destekler. Ek olarak, Tür Tanımları React kitaplığı mimarisi tarafından desteklenir, bu nedenle artık bununla ilgilenmeniz gerekmez.

4. Mevcut projeler için kademeli uygulama

TypeScript'i seçmek basit bir açma-kapama kararı olmayacaktır. Bunun yerine, programın o andaki durumuna dayalı aşamalı bir değişikliktir. Örneğin, mevcut bir React projesi için TypeScript kullanmayı seçtiğinizi varsayalım. Bu durumda, TypeScript kullanımını aşamalı olarak genişletirken TypeScript ve JavaScript'i aynı anda nasıl çalıştıracağınızı düşünmelisiniz. Ayrıca, TypeScript derleyici parametrelerini kademeli olarak geçiş yapacak şekilde ayarlayabilirsiniz.

5. Genel olarak IntelliSense ve statik tip doğrulamanın avantajları

a. Statik türler için test

Statik tip kontrolü sayesinde hataların daha erken tespit edilmesi daha kolaydır. Daha önce bahsedilen örnek, ayrıntıları alma yöntemi için girdi olarak bir sayı değil, bir dizenin gerekli olduğunu uygun şekilde tanır.

b. Daha İyi IntelliSense

TypeScript statik veri doğrulama ve IntelliSense birleştirildiğinde IntelliSense'in %100 doğru kaldığına güvenebilirsiniz.

c. Yeniden Düzenlemeyi Geliştirme

Kesin Dilleri ve nerede değişiklik yapılacağını bildiğimiz için yeniden düzenleme, TypeScript ile oldukça basittir. Ayrıca, bir sorun hızlı bir şekilde keşfedilirse, hiçbir şeye zarar verme riskiniz de olmaz.

d. Tanımlanmayan daha az hata

TypeScript yorumlayıcısı ayrıca aktarım zamanında Tanımsız hataları tanımladığından, bunların yürütme sırasında ortaya çıkma olasılığı azalır.

e. Geliştirilmiş okunabilirlik ve bakım

Kod tabanı, Tip Tanımları kullanılarak önemli ölçüde daha anlaşılır ve sürdürülür olacaktır. Nesne yönelimli geliştirme ilkelerine bağlı kalabilir ve kodunuzu birleştirmeyi en aza indirecek şekilde düzenlemek için Arayüzler gibi yapıları kullanabilirsiniz.

f. TypeScript kullanım sorunları çözülür.

TypeScript'in avantajlarından daha önce bahsettiğimize göre, onu benimsemek için daha donanımlı olmak için dezavantajları hakkında daha fazla bilgi edelim.

g. Öğrenme eğrisi

TypeScript'i kullanmaya başlamak, özellikle işgücünüz yalnızca temel JavaScript ile deneyime sahipse, zorlu öğrenme eğrisi nedeniyle zor olabilir. Bu durumda yapılacak en iyi yol, yukarıda açıklanan aşamalı uyarlamayı benimsemektir.

Ancak grup, Java veya C#Underending TypeScript gibi dinamik olarak yazılan dillerle zaten deneyimliyse, çok zor değildir.

h. Üçüncü taraf kitaplığında Tür Tanımları eksik.

TypeScript'in artan popülaritesi göz önüne alındığında bu alışılmadık bir durumdur. Ancak, TypeScript'in resmi belgeleri, Tanımlar'ın eksik olduğu bir Kitaplık ile karşılaşırsanız yararlı tavsiyeler sunar. Bunu alıntıla.

i. hesaplama dönemi

Doğal olarak, ek bir transpiring katmanından geçmesi gerektiğinden, kaynak kodu oluşturmak birkaç milisaniye daha alacaktır. Ama çoğu zaman bu belli olmaz. Geliştirme uzmanlığı ve problemlere daha az açık olması açısından avantajları, uzun çaba gerektirmesi dezavantajına ağır basacaktır.

Toplama

Kısa vadeli ıstırap ve uzun vadeli ödül arasındaki bağlantıdır. Bir TypeScript projesine başladığınızda, tüm geliştirme araçlarını oluşturmanın çok zor ve zaman alıcı olduğunu görebilirsiniz. Yine de, uygulamanız büyüdükçe, bu ortak kalıpların çok yardımcı olduğunu keşfedecek ve hata olasılığını hızlandıracak ve azaltacaksınız. Bu makalenin sizi inanılmaz şekilde yakaladığını ve React projenizde TypeScript kullanmanın değerini anlamanıza yardımcı olduğunu umuyoruz.