Neden TypeScript 2019’da Front-end yazmanın en iyi yoludur?

Ve neden herkesi kullanmaya ikna etmelisin?

TipScript, Ön uç ortamında giderek daha popüler hale geliyor. Geliştiricilerin% 80'i, bir sonraki projelerinde TypeScript kullanmak veya öğrenmek istediklerini itiraf ediyor. Kendim, ilk defa kullandığımdan beri sevdim. Ve bundan sonraki tüm projelerimde kesinlikle kullanmaya devam edeceğim.

Bazı insanlar, TypeScript'in ön uç takım zincirinin gereksiz bir bağımlılığı olduğuna dair endişelerini dile getiriyor. Bu mu? Gerçekliğin tam tersi olduğunu öğrenmek için beni takip et.

“Dinamik olarak yazılmış diller adamının” hikayesi

Programcılık kariyerimin 18 yılı boyunca statik olarak yazılmış dillerden hiç hoşlanmamıştım. 2001'de programlamaya başladığımdan beri, tercih ettiğim diller her zaman dinamik olarak yazılmıştır: PHP, JS, Ruby, Elixir. Burada ve orada C ++ ve Java'da bazı programlar yapmıştım, ama her zaman bu ortamlardan nefret ediyordum. (“Neden türü her yere geçirmem gerekiyor? Bu çok kötü. Onları kendimle ilgilenebilirim.”)

Her şey yaklaşık 2 yıl önce değişti. TypeScript'i ilk defa kullandığım zamandı. Ancak, başından beri ona aşık olmamıştım. İlk birkaç gün beni gerçekten sinirlendirdi. Durum olsa hızla değişti. Ne kadar çok tip tanımlamalar koyduysam, o kadar çok sık sık beni konsolun aptal hatalarını manuel olarak hata ayıklamakla zaman kaybetmekten kurtardığını fark ediyordum. Türleri takdir etmeye başlamıştım.

Önümüzdeki iki yılda, ne zaman ön uç uygulamalarda işbirliği yapıyor olsam, ister Açısal isterse Tepki olsun, hangi çerçeveyi kullanırsam kullansın, tüm .js projelerinde hep özlediğim bir şey olduğunu fark ettim: TypeScript .

Şimdi itiraf etmeliyim. Artık dinamik olarak yazılmış dilleri sevmiyorum. İçlerinde hala çok etkili çalışabiliyorum, ancak IDE'de sadece tip tanımlarını arayamadığımda veya kodu prototip ederken derleyiciye güvendiğimde beni mutsuz ediyor. (Elixir'de hala özlediğim tek şey güçlü türler.)

Neyse ki, Ecma TC39 komisyonunun statik tip sistemi JavaScript'e sokmasını beklememiz gerekmez. Bunun yerine TypeScript kullanabiliriz. Özellikle yeni projelerde, kullanım zorluğu minimal olduğunda.

Anti-TypeScript bağımsız değişkenleri

Bununla birlikte, bazıları hala TypeScript'i projenize getirmenin:

  • yeni geliştiricilerin kullanım sürelerini artırmak,
  • karmaşık bakım,
  • React'le çok fazla çatışma çıkarsa,
  • gelişme süresini artırmak,
  • Projeyi bundan bir yıl sonra gelmeyen bazı yenilikçi teknolojilere kilitlemek,
  • İyi JS çalışanlarının işe alınmasını önlemek,
  • TS dışındaki kod tabanlarından kod getirmeyi imkansız kılmak,
  • Uzak gelecekte uygulamayı düzenlemek zorlaştırır.

Onların yanlış olduğunu söylemeye cüret ediyorum. TypeScript, yukarıdaki durumların tümü için size yardımcı olacaktır ve bunun neden böyle olduğu konusunda size özel argümanlar verebilirim.

Bu yüzden bu makaleyi yazmaya karar verdim. Belki sizi, arkadaşlarınızı, çalışma arkadaşlarınızı veya CTO'nuzu bu harika dile ikna etmenize yardımcı olacaktır.

Not: Bu makalede “TypeScript'in ne olduğunu” açıklamayacağım. Sadece onu kullanmanız gereken “neden” üzerine odaklanacağım. TypeScript'in gerçekte ne olduğunu bilmiyorsanız, önce aşağıdaki bağlantılardan bazılarını okumanızı öneririm:

  • “TypeScript nedir ve neden JavaScript yerine kullanmalıyım?” - Lodewijk'in Bogaards, StackOverflow
  • TypeScript dili resmi web sitesi
  • “TypeScript - Süper güçlerle JavaScript” - Indrek Lasn, Medium
  • “TypeScript Deep Dive” - Basarat Ali Syed'in E-kitabı

TypeScript avantajları

1. Kod anlamak daha kolay

Genellikle bir kod parçası üzerinde çalıştığınızda, örneğin bir işlev kodu olarak, onu tam olarak anlamak için:

  1. Hangi argümanları kabul ediyor?
  2. Hangi değeri verir?
  3. Hangi harici verileri gerektirir?
  4. Dönüş değerini üretmek için bu argümanlarla ve dış verilerle ne yapar?

Dinamik olarak yazılmış dillerde, ilk üç soruyu cevaplamak çok zordur. Bir işlev makale argümanı alırsa, tam olarak nedir? Bazı makale özelliklerine sahip bir nesne mi? Tam olarak hangi nitelikler var? Bir article.title veya article.name var mı? Makalenin her zaman var olduğunu varsayabilir miyim? Article.isPublished'a ne dersiniz? Bu özelliğin, uygulama yerlerinin çoğunda makale nesnesine birleştirildiğini biliyor olabilirim, ancak her zaman bu noktada da bulunduğundan emin olabilir miyim?

Tüm bu soruları cevaplamak için genellikle aşağıdakilerden birini yapmanız gerekir:

a) bir konsol.log (makale) koyun, betiği tarayıcınızda çalıştırın (kullanıcı arayüzünü biraz tıklayın) ve günlüğü okuyun;

b) işlevin nerede kullanıldığını ve oradan tüm verilere hangi verilerin girdiğini izleyiniz;

c) meslektaşınıza yakın zamanda bu kod üzerinde çalıştığını sorun (hala hayatta olduklarını umarken, çevrimiçi ve bu kodu hatırlayın);

d) makalenin, düşündüğünüz gibi olduğunu varsayalım ve çalışmasını ümit edin.

Bu size tanıdık geliyor mu?

Bana göre bu, JS, PHP, Ruby, Python, Elixir gibi dinamik olarak yazılmış herhangi bir dilde tipik bir web dev iş akışı gibi geliyor.

TypeScript gibi statik olarak yazılmış dillerde, IDE'nizden ve derleyicinizden derhal yukarıdaki soruların tümüne cevap alabilirsiniz. Artık tüm kod tabanına bakmanıza, iş arkadaşlarınızı soru sormaya ya da üretimde hata yapma riskine sahip olmanıza gerek yok.

2. Kod uygulaması kolay ve hızlıdır

Genellikle, yeni bir özellik veya yeni bir bileşen oluşturmanız gerektiğinde, iş akışınız muhtemelen şöyle görünür:

  1. Bileşen işlevini önyükleyin, yapıcı değişkenlerini oluşturun, kalan kodu yazın.
  2. Herhangi bir harici veya sofistike veri gerektiriyorsa (kullanıcı veya makaleler gibi), nasıl görüneceğini tahmin et, kendi belleğinde tut ve kodda bu şekilde kullan.
  3. Bileşeni uygulamanıza yerleştirin ve destek parçalarını içine alın.
  4. Manuel olarak veya birim testleriyle test edin. (Sahip olması gereken donanımları aldığından ve nasıl çalışması gerektiği konusunda çalıştığından emin olmanız gerekir.)
  5. Bir şey doğru değilse, kodunuza geri dönün, neyin yanlış olduğunu anlamaya çalışın, düzeltin ve no. Adıma geri dönün. 4.

TypeScript'te benzer, ancak daha kolay ve daha hızlı:

  1. Bileşen işlevini önyükleyin, tür tanımını tanımlayın ve uygulayın.
  2. Herhangi bir harici veya karmaşık veri gerektiriyorsa, arayüzlerine bakın ve bunları yeniden kullanın (tamamen veya kısmen).
  3. Bileşeni uygulamanıza yerleştirin ve destek parçalarını içine alın.
  4. Bu kadar. (Arayan ve arayan arasında yazılan tanımları doğru şekilde eşleştirdiyseniz, her şey kusursuz çalışmalıdır. Şimdi test etmeniz gereken tek şey, bileşeninizin gerçek iş mantığıdır.)

Böylece, ne zaman TypeScript kod yazsanız, sadece daha okunabilir ve daha az hata eğilimli olmakla kalmaz, aynı zamanda esasen mantıklı olması da daha kolaydır.

3. Kod refactor için daha kolay

Çoğu zaman yeniden düzenlemek istediğiniz pek çok şey vardır, ancak pek çok şeye ve dosyaya dokundukları için, onları değiştirmekten çok korkarsınız.

TypeScript'te bu tür şeyler IDE'nizdeki “Sembolü Yeniden Adlandır” komutunun sadece bir tıklamasıyla sık sık kırılabilir.

“Uygulamayı” “expApp” olarak yeniden adlandırmak

Dinamik olarak yazılmış dillerde, aynı anda birden fazla dosyayı yeniden düzenleme işleminde size yardımcı olacak en iyi şey Arama ve RegExp ile Değiştir'dir.

Statik olarak yazılmış dillerde, Ara ve Değiştir artık gerekli değil. “Tüm Olayları Bul” ve “Sembolü Yeniden Adlandır” gibi IDE komutlarıyla, tüm olayları verilen işlev, sınıf veya bir nesne arayüzünün özelliğinin uygulamasında görebilirsiniz.

Yapı sisteminizi biraz geliştirmek, bileşenlerinizi yeniden adlandırmak, kullanıcı nesnesini değiştirmek veya kullanımdan kaldırılmış bir özniteliği kaldırmak istediğinizde, artık bir şeyleri kırmaktan korkmanıza gerek yok. TypeScript, yeniden birleştirilen bitin tüm kullanımlarını bulmanıza, yeniden adlandırmanıza ve kodunuzun yeniden denetleyiciden sonra herhangi bir tür uyuşmazlığı olması durumunda sizi derleme hatasıyla uyarmanıza yardımcı olacaktır.

4. Daha az hata

Yıllar süren ön uç web geliştirme boyunca, hata yazarken yaklaşık ~% 50'lik bir tasarruf sağladığımı fark ettim, yanımda oturan biri, bir yazım hatası yaparken, hemen bana bağlayacak birisini hemen arayacaktı. boş olabilecek veya bir nesneyi bunun yerine bir dizi olması gereken bir yere geçiren bir değer.

Sonunda o arkadaşla tanıştığımı söylemekten mutluyum: buna TypeScript denir.

Bu sayede geçersiz kod yazmak artık çok daha zor. Derlenirse, gerçekten çalıştığından emin olabilirsiniz.

5. Daha az kazan plakası testleri

Değişkenlerinizin verilen tüm yerlere doğru şekilde iletildiğinden emin olduğunuzda, artık hepsini test etmenize gerek yok.

Basit kazan ünitesi / entegrasyon testleri yazmak yerine, işlev argümanlarınızın birbirleriyle doğru şekilde iletilip iletilmediğini test etmek yerine uygulamanızın iş mantığını test etmeye daha fazla odaklanabilirsiniz.

Daha az test, yeni özellikler geliştirmek için daha kısa süre ve daha az karmaşık, daha az hata eğilimli ve bakımı daha kolay olan daha küçük bir kod temeli anlamına gelir.

6. Kod birleştirmek daha kolay

Takımınızdaki yeni küçük geliştirici, yeni kodu tanıtan bir PR yayınladı. İlk bakışta her şey yolunda görünüyor: kod iyi görünüyor, birim testleri var, her şey yeşil renkte.

Şu anda olsa da çalıştığından emin misin? Ya uygun birim testleri yoksa? (Evet, hakikatle tanışalım millet, çoğumuz hala yeterli sayıda yazmıyoruz.) PR yaratıcısına güvenir misiniz? Yoksa kodu kendi başınıza çalıştırmak ve test etmek için değerli 5 dakikanızı odaklayacak mısınız?

Eğer alet zincirinizde TypeScript varsa, size başka bir güvence kontrolü verir: typedef compilation kontrol.

Kod iyi görünüyorsa, birim testleri oradadır ve her şey derlenir, şimdi her şeyin çalıştığından emin olabilirsiniz.

TypeScript, diğer geliştiricilere güvenmeyi kolaylaştırır. PR'ları inceleme ve birleştirme hızını artırabilir.

(Aynısı diğer tarafa da gider: tür tanımları sayesinde, yeni geliştiriciler için, başkalarının kod bölümlerinin gerçekte ne yaptığını, içine derinlemesine dalmaya veya kendi başına çalıştırmaya gerek kalmadan görmek daha kolaydır.)

7. Geliştiricinin doğru iş akışına sahip olmasına yardımcı olur

Statik olarak yazılmış dillerde kod yazarken, önce alacağınız veri türlerini ve sonra üretmek istediğiniz veri türünü düşünmeniz gerekir. Genellikle sadece bundan sonra gerçek uygulamaya oturursunuz.

Birçok insan kendi hayatına bunun doğru kodlama iş akışı olduğunu iddia edecektir.

Örneğin, ne zaman bir algoritma geliştirirseniz, önce teorik formülünü düşünmeli ve daha sonra uygulamalısınız.

Veya, ne zaman TDD yaptıysanız, ilk önce kodunuzun gerçekte nasıl çalışacağını düşünmeniz (hangi verileri alacağı ve hangi verileri üreteceği), testler olarak yazmanız ve ardından gerçek kodu uygulamanız gerekir.

Aynı şey TypeScript için de geçerlidir. Kendi iç uygulamasına geçmeden önce kodunuzun arayüzü hakkında düşünmenizi teşvik eder.

TypeScript endişeleri

1. “İşe alımımıza zarar verecek”

Olacak mı?

Düzenli JS araştırmaları, giderek daha fazla insanın TS'de programlama yaptığını veya denemeye istekli olduğunu açıkça göstermektedir.

https://2018.stateofjs.com/javascript-flavors/typescript/

Yukarıdaki anket bunu kanıtlamaktadır: 2018 itibariyle, ön uç geliştiricilerin% 80'i TypeScript'te çalışmak istiyor.

Yığınızda TypeScript olması, işe alımınıza zarar vermeyecektir. Aslında tam tersini yapabilir. Bir geliştirici, piyasadaki en iyi araçları kullandığınızı görürse, şirketinizde çalışmaya daha istekli olacaktır. Modern araçlar, modern geliştiricileri getirir.

2. “Gemiye binmek daha fazla zaman alacaktır”

Gerçek şu ki, TypeScript JavaScript'in bir üst kümesi olsa da, herkesin öğrenmesi gereken yeni bir şey. TS ile aşina olmayan bir geliştiricinin, böyle bir projede işbirliğine başlamadan önce en az bir saat veya iki saat boyunca okuması gerekecektir.

Aksine, halihazırda TypeScript'te inşa edilmiş bir projeniz varsa, yeni geliştiricilerin sığması çok kolay olacaktır. TS Sözdizimi sezgiseldir ve anlaşılması çok kolaydır (muhtemelen bu kadar popüler olmasının nedeni budur). Genel fonksiyon arayüzleri, tip korumaları, koşullu tipler? Günlük çalışmanızın% 99'unda bunlara asla dokunmak veya anlamak zorunda kalmayacaksınız. Kalan% 1, genellikle daha önce akıcı bir TS programcısı tarafından hazırlanabilen sadece başlangıçta yapılması gereken bir şeydir.

Dahası, TS avantajları sayesinde (daha önce bahsettiğim), yeni bir geliştiricinin mevcut kod tabanında iş yapmaya başlaması daha kolay olacaktır. Sadece küçük bir şeyi değiştirmesi ya da yeni bir şey yapması gerekiyorsa, hangi verilerin geçtiğini ve nerede geçtiğini anlamak için artık kod tabanının tamamına göz atması gerekmez. IDE'sinde anında okuyabilir ve verilerle oynayabilir. TS derleyicisi, kullandığı değişkenler hakkında anında geri bildirimde bulunacak ve herhangi bir hata yaptığında ona rehberlik edecektir.

3. “React / Redux ve TS birbirlerine uymuyor”

React ve TypeScript'te Button bileşeni

Yanlış. TS, uzun zamandan beri TSX desteğine sahiptir. Ayrıca React.Component gibi basit genel türler sayesinde PropTypes'den kurtulabilir ve bunun yerine gerçek tip sistemi kullanabilirsiniz.

TypeScript'in Redux eylem oluşturucularıyla çalışmasını sağlamak için bir yıl önce bir miktar kazan kodunun yazılması gerektiği doğru. Ancak TS 2.8'in Şubat 2018'de piyasaya sürülmesinden bu yana, bu artık bir durum değil. TypeScript'te hem yazılı hem de basit React / Redux koduna sahip olabilirsiniz. FYI, React Context veya Hooks, TypeScript ile kusursuz çalışır.

4. “JS kodunu bir TS uygulamasında yeniden kullanmak mümkün olmayacak”

Yine, yanlış. Herhangi bir JS kodu geçerli bir TS kodudur.

TS, katı modda (noImplicitAny) kullanıyorsanız, JS kodunu çalıştırmak için buraya ve buraya bazı türler eklemeniz gerekir. Ama bu kadar! JS React bileşenlerinizi doğrudan TS'ye otomatik olarak dönüştürebilen bir IDE eklentisi bile vardır.

Bazı garip eski satıcı js lib'i TS projenize kopyalamanız gerektiğinde: sadece yapın. TS yazımı yoksa (şimdi daha az ve daha az olur), kendiniz ekleyin veya satıcıyı referans alırken herhangi birini kullanın. Aniden, uygulamanızın tamamında tür güvenliğini kaybedeceksiniz gibi değil. Onu yalnızca yazılmamış satıcıya dokunan katmanda kaybedersiniz. Ancak bu, en azından katmanınızı kolayca yazmanızı engellemez. Ve satıcı için, ne zaman yararlı olacağına karar verdiğinizde, daha sonra bunun için typedefs ekleyebilirsiniz.

5. “TypeScript'i seçerek, gelecekte kimsenin desteklemeyeceği eski bir araçla kilitlenebiliriz”

TypeScript şu anda Microsoft, Asana, Lyft, Slack, tüm Angular 2+ geliştiricileri, çoklu React & Vue.js geliştiricileri ve binlerce başka şirket tarafından kullanılmaktadır. Diğerleri her gün onlara katılıyor. TypeScript, şu anda JS'nin en popüler üst kümesidir ve yakın zamanda hiçbir zaman aşağıya doğru gitmiyor.

Bu dilin terk edilme şansı nedir?

Sıfıra yakın diyebilirim. TS'in ölebileceği tek senaryo, JS'nin türlerini kendi dillerine getirmesidir. Fakat bu kesin olarak yakın zamanda gerçekleşmeyecek. En azından önümüzdeki ~ 5–10 yıl içinde. Gerçekten gerçekleşebilecek ender durumlarda, TS'den yazılan JS'ye kolayca geçmenizi sağlayacak araçlar olacağından emin olabilirsiniz.

Bundan yaklaşık 5-10 yıl sonra kimsenin artık Tepki, Vue veya Açısal bilmediği bir zaman olabilir. Ama sanırım bu çerçevelere sadık kalırken bir sorun görmüyorsunuz? ;)

6. “Peki ya Akış?”

TypeScript, Flow’un yaptığı şeyi ve daha fazlasını sağlar. Aynı zamanda çok daha popüler.

TS vs Flow npm son 2 yılda indirilenler (npmtrends.com)

Sadece bu Akışı hiç düşünmemeniz için zaten yeterli olmalı. Aynı şeyse, ancak daha az işlevsellik ve daha küçük topluluk desteği ile, neden bunu düşünürsünüz?

Görüşte, Flow, yaklaşık 3 yıl önce, ikisi de pazarda yeni oyuncularken TS kadar popülerdi. Bunlardan biri Microsoft ve Angular topluluğu tarafından zorlanırken, diğeri Facebook ve React topluluğunun bir kısmı tarafından tercih edildi.

TypeScript sonunda kazandı. Günümüzde, tüm ön uç çerçevelerden daha fazla geliştirici TypeScript'e geçmektedir.

Dışarıda birkaç tane da yazılı-JS alternatifi var (PureScript veya Elm gibi), fakat onları burada düşünmeyelim. Sadece birkaç hobi değil, geniş bir topluluk desteği ve üretimde zaten kullandığı birden fazla şirketten bahsetmek istiyorum. (Üzgünüm millet.)

TypeScript eksileri

1. Bir derleme adımı gerektirir

Arka uç Node.js arkadaşlarımdan bazıları bana TS'i tanıtmanın sadece değmeyeceğini söyledi çünkü Node'da çalıştırmadan önce tüm .ts dosyalarının önceden derlenmesi gerekliliği ile çok fazla güçlük çekti.

İyi bir kurulum ve geliştirme kurulumuyla başa çıkabileceğinizden emin olabileceğiniz bir şey olsa da, Node.js uygulamanıza biraz ek yük getirdiği konusunda hemfikir değilim.

Yine de Front-end ortamında buna katılıyorum. Bugünlerde herkes JS'yi ön uçta derliyor. Eski tarayıcı desteğine mi ihtiyacınız var? ES7 özellikleri? CSS-in-JS? Bunların hepsi için muhtemelen zaten babel kullanıyorsunuz. TypeScript, Babil ile aynı JS'nin (ES7 veya JSX dahil) diğer sözdizimleri gibi derlenebilir.

TypeScript'i ön uç projenize getirmek, derleme kurulumuna neredeyse hiçbir ek yük getirmez. (Yalnızca JS'nizi derlemediğiniz durumlarda ek yük getirebilir, ancak bu ön uçta çok nadiren olur.)

2. Ayarlaması biraz zor

Buna katılıyorum. Örneğin, NextScript uygulaması ile Type.js'deki Next.js uygulaması arasındaki fark nedir? İkinci durumda, Node.js sunucunuzu, web paketinizi ve jest test çalıştırıcınızı TypeScript ile çalışması için yapmanız gerekir. Ayrıca, ne zaman React, Redux, Styled-Components gibi bir kütüphane eklerseniz, npm i @ types / styled-components (lib'in içinde TS typedefs dosyası bulunmadığı sürece) için bunun için typedef eklemeniz gerekir.

Kendine cevap vermen gereken soru olsa da, böyle bir şeyi ne sıklıkla yapıyorsun? Tüm TypeScript avantajlarından istifa etmeye layık olmak bu kadar çaba mı?

özet

Hepimizin birden bire TypeScript’e geçmesi gerektiğini mi söylüyorum? Hayır! Örneğin, mevcut bir projede buna geçmek kesinlikle çok fazla iş ve kesinlikle yapmadan önce düşünülmeli.

Ancak, zaman içinde sürdürülmesi gereken yeni bir ön uç uygulaması oluşturuyorsanız, durum açıktır. TypeScript ile gidin. Dürüst olmak gerekirse, bir sonraki ön uç projelerinizde TS kullanımına karşı nedenlerin ne olduğunu duymak istiyorum.

Sadece şunu söylemek istiyorum: TypeScript kullanarak, başlangıçta biraz fazla çaba harcamak için çok sayıda güçlü avantaj elde edersiniz.

TypeScript millet yapalım

Bağlantılar

TypeScript hakkında

  • “TypeScript nedir ve neden JavaScript yerine kullanmalıyım?” - Lodewijk'in Bogaards, StackOverflow

“TS'e Geçiş” Vaka Stüdyoları

  • “Lyft'te TypeScript” - Mohsen Azimi, Orta
  • "Slack at TypeScript" - Felix Rieseberg, Orta
  • “200K + LOC projesini TypeScript'e nasıl geçirdik ve hikayeyi anlatmak için nasıl hayatta kaldık” - Kleo Petrov, Hashnode
  • “72 saatte 600K çizgileri TypeScript'e dönüştürme” - Paul Draper ve Ryan Stringham, LucidChard TechBlog

TS hakkındaki diğer yorumlar

  • “TypeScript kullanmamak için 7 kötü mazeret” - Dmitry Pashkevich, Medium
  • “Neden TypeScript, iyi ve kötü sebepler kullan” - Charly Poly, Orta
  • “JavaScript vs TypeScript ReasonML” - Dr. Axel Rauschmayer, 2alite
  • “Typescript - Neden biri kullanmalı?” - Majid, Orta
  • “Neden TypeScript Daha Çok Büyüyor” - Mary Branscombe, Yeni Yığın