TypeScript'in JavaScript ile ilişkisi
TypeScript, düz JavaScript'e derlenen türden bir JavaScript üst kümesidir - typescriptlang.org .
JavaScript, EMCA'nın birçok farklı paydaştan oluşan bir grup insan olan Teknik Komitesi 39 tarafından geliştirilen bir programlama dilidir . TC39, ECMA tarafından barındırılan bir komitedir : bir iç standartlar organizasyonu. JavaScript, birçok farklı tedarikçi tarafından (ör. Google, Microsoft, Oracle vb.) Birçok farklı uygulamaya sahiptir. JavaScript'in amacı web'in ortak dili olmaktır.
TypeScript, tek bir açık kaynak derleyicisine sahip JavaScript dilinin bir üst kümesidir ve temel olarak tek bir satıcı tarafından geliştirilmiştir: Microsoft. TypeScript'in amacı, bir yazım sistemi aracılığıyla hataları erken yakalamaya yardımcı olmak ve JavaScript geliştirmeyi daha verimli hale getirmektir.
Temelde TypeScript hedeflerine üç şekilde ulaşır:
Modern JavaScript özellikleri için destek - JavaScript dili (çalışma zamanı değil) ECMAScript standartları ile standartlaştırılmıştır. Tüm tarayıcılar ve JavaScript çalışma zamanları tüm ECMAScript standartlarının tüm özelliklerini desteklemez (bu genel bakışa bakın ). TypeScript, en son ECMAScript özelliklerinin çoğunun kullanılmasına izin verir ve bunları seçtiğiniz eski ECMAScript hedeflerine dönüştürür ( derleyici seçeneğinin altındaki derleme hedefleri listesine bakın --target). Bu, eski tarayıcılar ve JavaScript çalışma zamanlarıyla geriye dönük olarak uyumlu kalırken, modüller, lambda işlevleri, sınıflar, forma operatörü ve yıkım gibi yeni özellikleri güvenle kullanabileceğiniz anlamına gelir.
Gelişmiş tip sistemi - Tür desteği ECMAScript standardının bir parçası değildir ve büyük olasılıkla JavaScript'in derlenmiş doğası yerine yorumlanmış doğadan kaynaklanmayacaktır. TypeScript tip sistemi inanılmaz derecede zengindir ve şunları içerir: arayüzler, numaralandırmalar, hibrit tipler, jenerikler, birleşim / kavşak tipleri, erişim değiştiricileri ve çok daha fazlası. Resmi web sitesi typescript bu özelliklerin bir bilgi verir. Daktilo yazının türü sistemi diğer yazım dillerinin çoğuna eşittir ve bazı durumlarda tartışmasız daha güçlüdür.
Geliştirici araç desteği - TypeScript derleyici, daha kolay gezinmek, sorunları tanımlamak, olasılıkları incelemek ve kod tabanınızı yeniden düzenlemek için artımlı derleme ve IDE entegrasyonunu desteklemek için arka plan işlemi olarak çalışabilir.
TypeScript'in diğer JavaScript hedefleme dilleriyle ilişkisi
TypeScript, JavaScript ile derlenen diğer dillerle karşılaştırıldığında benzersiz bir felsefeye sahiptir. JavaScript kodu geçerli bir TypeScript kodudur; TypeScript, JavaScript'in bir üst kümesidir. .jsDosyalarınızı dosyalara neredeyse yeniden adlandırabilir .tsve TypeScript kullanmaya başlayabilirsiniz (aşağıdaki "JavaScript birlikte çalışabilirliği" konusuna bakın). TypeScript dosyaları okunabilir JavaScript'e derlenir, böylece geri taşıma mümkündür ve derlenen TypeScript'i anlamak hiç de zor değildir. TypeScript, zayıf yönlerini geliştirirken JavaScript'in başarılarına dayanır.
Bir yandan, modern ECMAScript standartlarını alan ve eski JavaScript sürümleriyle derleyen Babel'in en popüler olanı olacak gelecekteki kanıt araçlarına sahipsiniz. Öte yandan, CoffeeScript, Clojure, Dart, Elm, Haxe, Scala.js gibi JavaScript'i hedefleyen JavaScript'ten tamamen farklı olabilecek diller ve daha fazlası (bu listeye bakın)). Bu diller, JavaScript'in geleceğinin öncülük edebileceği yerlerden daha iyi olsalar da, geleceklerinin garanti altına alınması için yeterince kabul görmeme riski daha fazladır. Bu dillerden bazıları için deneyimli geliştiriciler bulmakta daha fazla sorun yaşayabilirsiniz, ancak bulacağınız diller genellikle daha hevesli olabilir. JavaScript ile birlikte çalışma da biraz daha dahil olabilir, çünkü JavaScript'in gerçekte olduğundan daha fazla kaldırılırlar.
TypeScript bu iki uç arasında yer alır ve böylece riski dengeler. TypeScript herhangi bir standart için riskli bir seçim değildir. Tamamen farklı bir dil olmadığından, mükemmel JavaScript birlikte çalışabilirlik desteğine sahip olduğu ve son zamanlarda çok fazla kabul gördüğü için JavaScript'e aşina iseniz alışmak çok az çaba gerektirir.
İsteğe bağlı olarak statik yazım ve tür çıkarımı
JavaScript dinamik olarak yazılmıştır. Bu, JavaScript'in çalışma zamanında somutlaştırılana kadar bir değişkenin ne tür olduğunu bilmediği anlamına gelir. Bu aynı zamanda çok geç olabileceği anlamına gelir. TypeScript, JavaScript'e tür desteği ekler. Belirli bir türdeki bazı değişkenlerin yanlış varsayımlarının neden olduğu hatalar, kartlarınızı doğru oynarsanız (kodunuzu ne kadar katı yazdığınızda veya kodunuzu yazdığınızda tamamen size bağlıysa) tamamen ortadan kaldırılabilir.
TypeScript, tür çıkarımı kullanımı ile yazmayı biraz daha kolay ve çok daha az belirgin hale getirir. Örneğin: var x = "hello"TypeScript'teki ile aynıvar x : string = "hello" . Tip, kullanımından basitçe çıkarılmaktadır. Türleri açıkça yazmasanız bile, aksi takdirde çalışma zamanı hatasına neden olacak bir şey yapmanıza engel olmak için hala oradalar.
TypeScript isteğe bağlı olarak varsayılan olarak yazılır. Örneğin function divideByTwo(x) { return x / 2 }, TypeScript'te, herhangi bir parametre ile çağrılabilen geçerli bir işlevdir , ancak bir dize ile çağrılmak açıkça bir çalışma zamanı hatasına neden olacaktır . Tıpkı JavaScript'te alışık olduğunuz gibi. Bu çalışır, çünkü hiçbir tür açıkça atanmadığında ve tür divideByTwo örneğinde olduğu gibi çıkartılamadığında, TypeScript türü örtük olarak atayacaktır any. Bu, divideByTwo işlevinin tür imzasının otomatik olarak olacağı anlamına gelir function divideByTwo(x : any) : any. Bu davranışa izin vermeyecek bir derleyici bayrağı vardır:--noImplicitAny . Bu bayrağı etkinleştirmek size daha fazla güvenlik sağlar, ancak aynı zamanda daha fazla yazma yapmanız gerekeceği anlamına gelir.
Türlerin kendileriyle ilişkili bir maliyeti vardır. Her şeyden önce, bir öğrenme eğrisi var ve ikincisi, elbette, uygun katı yazmayı kullanarak bir kod tabanı oluşturmak için biraz daha zamana mal olacak. Deneyimlerime göre, bu maliyetler başkalarıyla paylaştığınız ciddi bir kod tabanında tamamen buna değer. Github içinde Diller ve Kod Kalitesini Programlama A Büyük Ölçekli Çalışma düşündürmektedir "statik olarak yazılan diller, genel olarak, daha az kusur dinamik türlerinden daha yatkındır ve güçlü yazarak daha iyi aynı konuda zayıf yazarak daha olduğunu".
Bu aynı makalenin TypeScript'in JavaScript'ten daha az hataya açık olduğunu bulduğunu belirtmek ilginçtir:
Pozitif katsayıları olanlar için dilin ceteris paribus, daha fazla sayıda kusur düzeltmesiyle ilişkili olmasını bekleyebiliriz. Bu diller C, C ++, JavaScript , Objective-C, Php ve Python'u içerir. Clojure, Haskell, Ruby, Scala ve TypeScript dillerinin hepsinde , bu dillerin hata düzeltme işlemlerine yol açması için ortalamadan daha az olası olduğunu gösteren negatif katsayılar vardır.
Gelişmiş IDE desteği
TypeScript ile geliştirme deneyimi, JavaScript'e göre büyük bir gelişmedir. IDE, zengin tip bilgileri hakkında TypeScript derleyicisi tarafından gerçek zamanlı olarak bilgilendirilir. Bu birkaç önemli avantaj sağlar. Örneğin, TypeScript ile, kod tabanınızın tamamında yeniden adlandırma gibi yeniden düzenleme işlemleri yapabilirsiniz. Kod tamamlama sayesinde, bir kütüphanenin sunabileceği işlevler hakkında yerinde yardım alabilirsiniz. Artık onları hatırlamanıza veya çevrimiçi referanslarda aramanıza gerek yok. Derleme hataları, kodlama ile meşgulken doğrudan IDE'de kırmızı dalgalı bir çizgi ile bildirilir. Sonuç olarak, bu JavaScript ile çalışmaya kıyasla önemli bir verimlilik kazancı sağlar. Kodlama için daha fazla zaman ve hata ayıklama için daha az zaman harcanabilir.
Visual Studio Code, WebStorm, Atom ve Sublime gibi TypeScript için mükemmel desteği olan çok çeşitli IDE'ler vardır.
Sıkı boş denetimler
Formdaki cannot read property 'x' of undefinedveya undefined is not a functionJavaScript kodundaki hatalardan kaynaklanan çalışma zamanı hataları çok yaygın. Kullanıma hazır TypeScript, bu tür hataların oluşma olasılığını zaten azaltır, çünkü TypeScript derleyicisi tarafından bilinmeyen bir değişkeni kullanamazsınız ( anyyazılan değişkenlerin özellikleri hariç ). Yanlışlıkla olarak ayarlanmış bir değişkeni kullanmak yine de mümkündür undefined. Ancak, TypeScript'in 2.0 sürümünde, null edilemeyen türlerin kullanılmasıyla bu tür hataları birlikte ortadan kaldırabilirsiniz. Bu şu şekilde çalışır:
Sıkı null denetimleri etkinleştirildiğinde ( --strictNullChecksderleyici bayrağı), undefinedaçıkça null olabilecek türde olduğunu bildirmedikçe , TypeScript derleyicisinin bir değişkene atanmasına izin vermez . Örneğin, let x : number = undefinedderleme hatasına neden olur. Bu undefinedbir sayı olmadığı için tip teorisine mükemmel uyum sağlar . Bir tanımlayabilir xbir miktar türü olduğu numberve undefinedbu durumu düzeltmek için: let x : number | undefined = undefined.
Bir tür null olabilecek bir kez bilindiği zaman, yani değeri de olabilen bir türdendir nullveya undefinedTypeScript derleyicisi, kodunuzun güvenli bir şekilde bir değişken kullanıp kullanamayacağını kontrol akışı tabanlı tür analizi ile belirleyebilir. Diğer bir deyişle, bir değişkenin undefinedörneğin bir ifdeyimden geçip geçmediğini kontrol ettiğinizde , TypeScript derleyicisi kodunuzun kontrol akışının o dalındaki türün artık boş bırakılamayacağı ve bu nedenle güvenle kullanılabileceği sonucuna varır. İşte basit bir örnek:
let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.
Yapım sırasında, TypeScript 2016 konferansı ortak tasarımcı Anders Hejlsberg bu özelliğin ayrıntılı bir açıklamasını ve tanıtımını yaptı: video (44:30 - 56:30).
Derleme
TypeScript kullanmak için JavaScript kodunu derlemek için bir derleme işlemine ihtiyacınız vardır. Derleme süreci, elbette projenizin boyutuna bağlı olarak genellikle sadece birkaç saniye sürer. TypeScript derleyicisi art arda derlemeyi ( --watchderleyici bayrağı) destekler, böylece sonraki tüm değişiklikler daha yüksek hızda derlenebilir.
TypeScript derleyicisi, oluşturulan .js dosyalarındaki kaynak harita bilgilerini satır içine alabilir veya ayrı .map dosyaları oluşturabilir. Kaynak harita bilgileri, JavaScript'teki satırları TypeScript'te oluşturanlarla ilişkilendirmek için Chrome DevTools ve diğer IDE'ler gibi yardımcı programlarda hata ayıklayarak kullanılabilir. Bu, kesme noktalarını ayarlamanıza ve çalışma zamanı sırasında değişkenleri doğrudan TypeScript kodunuzda denetlemenize olanak tanır. Kaynak harita bilgileri oldukça iyi çalışıyor, TypeScript'ten çok önce gelmişti, ancak TypeScript hata ayıklaması genellikle JavaScript'i doğrudan kullanırken olduğu kadar büyük değil. Örneğin thisanahtar kelimeyi ele alalım. thisES2015'ten bu yana anahtar kelimelerin kapanışların etrafında değişen anlambilimi nedeniyle , thisçalışma zamanı sırasında aslında çağrılan bir değişken olarak bulunabilir _this(bkz. bu cevaba). Bu, hata ayıklama sırasında sizi şaşırtabilir, ancak genellikle biliyorsanız veya JavaScript kodunu incelerseniz sorun olmaz. Babel'in aynı türden bir sorun yaşadığına dikkat edilmelidir.
TypeScript derleyicisinin dekoratörlere dayalı yakalama kodu üretmek, farklı modül sistemleri için modül yükleme kodu oluşturmak ve JSX'i ayrıştırmak gibi birkaç püf noktası daha vardır . Ancak, muhtemelen Typcript derleyicisinin yanında bir derleme aracına ihtiyacınız olacaktır. Örneğin, kodunuzu sıkıştırmak istiyorsanız, bunu yapmak için derleme işleminize başka araçlar eklemeniz gerekir.
Webpack , Gulp , Grunt ve hemen hemen tüm diğer JavaScript derleme araçları için kullanılabilen TypeScript derleme eklentileri vardır. TypeScript belgelerinde, tümünü kapsayan derleme araçlarıyla entegrasyon hakkında bir bölüm vardır . Daha fazla inşa süresi kontrolü istemeniz durumunda bir linter de mevcuttur. Ayrıca, Angular 2, React, Ember, SystemJS, Webpack, Gulp, vb.
JavaScript ile birlikte çalışabilirlik
TypeScript, JavaScript ile çok yakından ilişkili olduğundan, birlikte çalışabilirlik özellikleri mükemmeldir, ancak TypeScript'teki JavaScript kitaplıklarıyla çalışmak için bazı ekstra çalışmalar gerekir. Typescript tanımları typescript derleyici gibi bu işlev çağrıları anlaması için gerekli olan _.groupByveya angular.copyveya $.fadeOutaslında yasadışı tablolara değildir. Bu işlevlerin tanımları .d.tsdosyalara yerleştirilir .
Bir tanımın alabileceği en basit biçim, tanımlayıcının herhangi bir şekilde kullanılmasına izin vermektir. Örneğin, Lodash kullanırken , tek bir hat tanım dosyası declare var _ : anyistediğiniz herhangi bir işlevi çağırmanıza izin verir _, ancak elbette yine de hatalar yapabilirsiniz: _.foobar()yasal bir TypeScript çağrısı olur, ancak elbette , çalışma zamanında yasa dışı bir çağrı. Doğru tip desteği ve kod tamamlama istiyorsanız tanım dosyanızın daha kesin olması gerekir ( örnek için sadakat tanımlarına bakın ).
Kendi tip tanımlarıyla önceden paketlenmiş olarak gelen Npm modülleri , TypeScript derleyicisi tarafından otomatik olarak anlaşılır ( belgelere bakın ). Kendi tanımlarını içermeyen diğer yarı popüler JavaScript kitaplıkları için, birileri zaten başka bir npm modülü aracılığıyla tür tanımlarını kullanıma sunmuştur. Bu modüllerin önüne "@ türleri /" gelir ve DefinitelyTyped adlı bir Github deposundan gelir .
Bir uyarı var: tür tanımları, çalışma zamanında kullandığınız kitaplığın sürümüyle eşleşmelidir. Yoksa, TypeScript, bir işlevi çağırmanıza veya var olan bir değişkeni kayıttan çıkarmanıza izin vermeyebilir veya yalnızca türler derleme zamanında çalışma zamanı ile eşleşmediği için bir işlevi veya var olmayan bir değişkeni çağırmanıza izin verebilir. . Bu nedenle, kullandığınız kütüphanenin doğru sürümü için tür tanımlarının doğru sürümünü yüklediğinizden emin olun.
Dürüst olmak gerekirse, bunun hafif bir güçlüğü var ve bu, TypeScript'i seçmemenizin nedenlerinden biri olabilir, bunun yerine Babel gibi tür tanımları almak zorunda kalmayan bir şeyi tercih edin. Öte yandan, ne yaptığınızı biliyorsanız, yanlış veya eksik tanım dosyalarının neden olduğu her türlü sorunun kolayca üstesinden gelebilirsiniz.
JavaScript'ten TypeScript'e dönüştürme
Herhangi bir .jsdosya yeniden adlandırılabilir .tsve sözdizimsel olarak çıktıyla aynı JavaScript kodunu almak için TypeScript derleyicisinden geçirilebilir (ilk etapta sözdizimsel olarak doğruysa). TypeScript derleyici derleme hataları alsa bile, yine de bir .jsdosya oluşturur. Hatta bayrak .jsile girdi olarak kabul edebilir --allowJs. Bu, TypeScript ile hemen başlamanıza olanak tanır. Ne yazık ki, başlangıçta derleme hataları oluşması muhtemeldir. Bunların, diğer derleyicilerle alışkın olabileceğiniz gibi, gösterileri durdurma hataları olmadığını hatırlamak gerekir.
Bir JavaScript projesini bir TypeScript projesine dönüştürürken başlangıçta oluşan derleme hataları TypeScript'in doğası gereği kaçınılmazdır. TypeScript tüm kodun geçerliliğini kontrol eder ve bu nedenle kullanılan tüm fonksiyonlar ve değişkenler hakkında bilgi sahibi olması gerekir. Bu nedenle, hepsi için tür tanımlarının mevcut olması gerekir, aksi takdirde derleme hataları meydana gelebilir. Yukarıdaki bölümde belirtildiği gibi, hemen hemen her JavaScript çerçevesi .d.tsiçin DefinitelyTyped paketlerinin kurulumu ile kolayca elde edilebilen dosyalar vardır. Bununla birlikte, herhangi bir TypeScript tanımı bulunmayan bazı gizli kitaplık kullanmış veya bazı JavaScript ilkellerini çoklu doldurmuş olabilirsiniz. Bu durumda, derleme hatalarının kaybolması için bu bitler için tür tanımları sağlamanız gerekir. Bir .d.tsdosya oluşturun ve tsconfig.json filesdizisine ekleyin , böylece her zaman TypeScript derleyicisi tarafından dikkate alınır. İçinde TypeScript'in tür olarak bilmediği bitleri bildirir any. Tüm hataları ortadan kaldırdıktan sonra, yavaş yavaş bu parçalara ihtiyaçlarınıza göre yazmayı başlatabilirsiniz.
Ayrıca, BuildScript'in derleme boru hattına alınması için derleme boru hattınızı yapılandırmaya (yeniden) yönelik bazı çalışmalar da gerekecektir. Derleme bölümünde belirtildiği gibi, orada çok sayıda iyi kaynak var ve birlikte çalışmak istediğiniz araçların kombinasyonunu kullanan tohum projelerini aramanızı tavsiye ediyorum.
En büyük engel öğrenme eğrisidir. İlk başta küçük bir proje ile oynamaya teşvik ediyorum. Nasıl çalıştığını, nasıl oluşturulduğunu, hangi dosyaları kullandığını, nasıl yapılandırıldığını, IDE'nizde nasıl çalıştığını, nasıl yapılandırıldığını, hangi araçları kullandığını vb. Bakın. Büyük bir JavaScript kod tabanını TypeScript'e dönüştürmek biliyorsunuz. ne yapıyorsun. Örneğin, 600k satırı 72 saat içinde daktiloya dönüştürme hakkında bu blogu okuyun ). Atlamadan önce dili iyi anladığınızdan emin olun.
Benimseme
Typescript (Apache 2, bkz lisanslı açık kaynak olan GitHub ) ve Microsoft tarafından desteklenen. C #'ın baş mimarı Anders Hejlsberg projeye öncülük ediyor. Çok aktif bir proje; TypeScript ekibi son birkaç yıldır birçok yeni özellik yayınlamaktadır ve hala birçok harika özellik gelmesi planlanmaktadır (bkz. yol haritası ).
Evlat edinme ve popülerlik hakkında bazı gerçekler:
- In 2017 StackOverflow geliştirici anketine typescript (genel 9. sıra) en popüler JavaScript transpiler ve en sevilen programlama dili kategorisinde üçüncü oldu.
- Gelen js 2018 devlet anket (ES6 diğer olmak) typescript JavaScript tatlar kategorisinde iki büyük kazanan biri olarak ilan edildi.
- In 2019 StackOverlow deverloper anketine typescript C ve C ++ hem sollama, profesyonel geliştiriciler arasında en popüler dillerin 9 sıraya yükseldi. Yine en çok sevilen diller arasında üçüncü oldu.