Ne typescript ve niye JavaScript yerde kullanırsınız?

oy
1k

Eğer typescript dili ne tarif edebilir misin?

JavaScript veya mevcut kütüphaneler yapamam ne yapabilirim, bu bana bunu düşünmek sebep verecek?

Oluştur 02/10/2012 saat 17:37
kaynak kullanıcı
Diğer dillerde...                            


5 cevaplar

oy
979

Typescript hala sıcak-off presler yaşımdayken başlangıçta bu cevabı yazdım. Beş yıl sonra, bu ok bakıştır, ancak bakmak Lodewijk cevabı daha derinlemesine için aşağıya

1000ft görünümü ...

Typescript öncelikle isteğe bağlı statik yazarak, sınıflar ve arayüzler sağlar JavaScript bir üst kümesidir. Büyük faydalarından biri yaygın hataları tespit için daha zengin bir ortam sağlamak için IDE sağlamaktır kodu yazarken .

Ne demek istediğimi bir fikir edinmek için, seyretmek Microsoft'un tanıtım videosunu diline.

Düzenli JavaScript uygulaması aday olacağını nerede hala konuşlandırılabilir olurken büyük bir JavaScript proje için typescript benimseyerek, daha sağlam yazılım neden olabilir.

Bu açık kaynak olmakla Yazarken desteklenen bir IDE kullanan eğer sadece zeki IntelliSense olsun. Başlangıçta, bu (ayrıca gelen blog yazısında belirtildiği sadece Microsoft'un Visual Studio oldu Miguel de Icaza ). Bugünlerde diğer IDE çok typescript desteği sunuyoruz .

bunun gibi orada diğer teknolojileri mı?

Orada CoffeeScript , ama bu gerçekten farklı bir amaca hizmet eder. IMHO, CoffeeScript insanlar için okunabilirliği sağlar, ancak typescript da derin okunabilirliği sağlamaktadır araçları onun isteğe bağlı statik yazarak yoluyla (bu bkz son blog yazısı biraz daha eleştirisi için). Orada da var Dart ama bu JavaScript için yerine bir dolu (olsa JavaScript kodu üretebilir )

Örnek

Bir örnek olarak, burada bazı typescript var (eğer bu oynayabilirsiniz typescript Playground )

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}  

Ve işte üretecektir JavaScript var

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

Typescript üye değişkenleri ve sınıf yöntemi parametrelerinin türünü tanımlar nasıl dikkat edin. Bu JavaScript çeviri yaparken kaldırıldı, ancak yapıcı bir sayısal türünü geçirerek gibi hataları noktaya IDE ve derleyici tarafından kullanılır.

Aynı zamanda, örneğin, açıkça beyan edilmez türlerini çıkarım yapabilen, öyle belirleyecek greet()yöntem bir dize döndürür.

Hata ayıklama typescript

Birçok tarayıcı ve IDE sourcemaps üzerinden doğrudan ayıklama desteği sunuyoruz. Bu fazla ayrıntı için yığın taşması soruya bakın Visual Studio ile hata ayıklama typescript kodu

Daha fazla bilgi edinmek ister misiniz?

Typescript hala sıcak-off presler yaşımdayken başlangıçta bu cevabı yazdım. Check out Lodewijk yanıtını biraz daha güncel ayrıntı için bu soruya.

Cevap 02/10/2012 saat 17:41
kaynak kullanıcı

oy
674

Kabul cevabı gayet rağmen, bu gerçekten bu noktada typescript adalet yapmaz hissetti. Artık erken günler değildir. Typescript birçok popüler çerçeveler daktilo yazılıyor ile artık çok daha fazla benimsenmesi bulmaktır. yerine JavaScript typescript seçmeliyim nedenleri artık çoktur.

JavaScript İlişkisi

JavaScript ECMAScript standartlara aracılığıyla standardize edilmiştir. Değil kullanımı desteği tüm tarayıcılar yeni ECMAScript standartların tüm özellikleri (bu bkz tablo ). Typescript yeni ECMAScript standartlarını destekler ve sizin seçtiğiniz (eski) ECMAScript hedeflerine onları derler (güncel hedeflerdir 3, 5 ve 6 [aka 2015]). Bu ve ES2015 özelliklerini kullanmak anlamına gelir ötesinde, modüllerin, lambda fonksiyonları, sınıflar, yayılma operatörü, strüktür kırıcı, bugün gibi. Aynı zamanda herhangi bir ECMAScript standardının parçası değildir ve muhtemelen yerine JavaScript derlenmiş doğanın yorumlanır doğası gereği asla olabilir elbette destek, yazın ekler. Typescript tipi sistem nispeten zengin ve şunları içerir: arayüzleri, çeteleler, hibrit çeşitleri, jenerikler, birlik ve kavşak tipleri, erişim değiştiricileri ve çok daha fazlası. resmi web sitesi typescript bu özelliklerin bir bilgi verir.

diğer JavaScript hedefleme dillere İlişkisi

Typescript JavaScript derlemek diğer dillere göre daha değişik bir felsefesi var. JavaScript kodu geçerli typescript kodudur; Typescript JavaScript bir üst kümesidir. Neredeyse senin yeniden adlandırabilir .jsdosya .tsdosya ve typescript kullanmaya başlayın. Bu göç geri mümkündür ve derlenen typescript anlamak hiç de zor değil yani typescript dosyaları, JavaScript Okunabilir için derlenmiştir. Zayıflıklarına üzerinde geliştirirken Bu şekilde typescript JavaScript başarıların üzerine kurulmuştur.

Bir yandan, modern ECMAScript standartlarını alıp Babel en popüler biri olma yaşlı JavaScript sürümleri için aşağı derlemek geleceğe uyumlu araçlar bulunmaktadır. Öte yandan, sen CoffeeScript, Clojure, Dart, Elm, Haxe, ScalaJs ve bir bütün ana daha (bunu görmek gibi JavaScript, hedef tamamen JavaScript farklı olabilir dilleri var liste). onlar JavaScript'in geleceği hiç yol açabilir yerden daha iyi olabilir gerçi Bu diller, onların ilerideki garanti edilmesi için yeterli kabul görmediklerine daha büyük bir riski vardır. Ayrıca daha fazla sorun bulacaksınız olanlar genellikle daha istekli olabilir ama bu dillerin bazıları için deneyimli geliştiriciler bulmakta olabilir. onlar öteye JavaScript'imiz ne kaldırılır beri JavaScript Interop'un da biraz daha karmaşık olabilir.

Typescript böylece riski dengeleme, bu iki uç arasında oturur. Typescript tarafından herhangi bir standart riskli bir seçim değildir. Bu tamamen farklı bir dil olmadığından, JavaScript aşina iseniz alışmak çok az çaba gerektirir mükemmel JavaScript çalışabilirlik desteği vardır ve yakın zamanda kabulünün çok gördü.

İsteğe bağlı olarak statik yazarak ve tip çıkarsama

JavaScript dinamik yazılır. Bu, JavaScript aslında çalışma zamanında örneği kadar bir değişkendir ne tür bilmiyor demektir. Bu aynı zamanda çok geç olabileceği anlamına gelir. Typescript JavaScript desteğini yazın ekler. Eğer kartlarını doğru oynarsan belirli türdeki bazı değişken varlığın yanlış varsayımlar kaynaklanır Bugs tamamen yok edilebilir; Eğer kodu yazın ya da tüm adresinden kodunu yazarsanız size kalmış ne kadar sıkı.

Typescript tür kesmesi kullanımı ile biraz daha kolay ve çok daha az açık yazmayı sağlayan. Örneğin: var x = "hello"daktilo aynıdır var x : string = "hello". Tip basitçe kullanımı anlaşılmaktadır. Açıkça türlerini yazmayın bile o başka türlü bir çalışma zamanı hatasına neden bir şey yapmaktan sizi kurtarmak için hala orada.

Typescript isteğe varsayılan olarak yazılır. Örneğin function divideByTwo(x) { return x / 2 }ile çağrılabilir daktilo geçerli bir fonksiyonudur herhangi bir dize ile çağırarak belli ki sonuçlanacaktır rağmen parametrenin tür çalışma zamanı hatası. Sadece JavaScript için kullanılır gibi. Hiçbir türünün açıkça atandı ve tip divideByTwo örnekte olduğu gibi, anlaşılamadı zaman typescript örtülü türü atar çünkü bu, işleri any. Bu divideByTwo işlevin tip imzası otomatik hale gelir function divideByTwo(x : any) : any. Bu davranışı izin vermemek için bir derleyici bayrağı vardır: --noImplicitAny. Bu işaretin etkinleştirilmesi size daha büyük bir güvenlik derecesini verir, ama aynı zamanda daha fazla yazarak yapmak zorunda olacağı anlamına gelir.

Türleri kendileriyle ilişkili bir maliyeti var. Her şeyden önce bir öğrenme eğrisi ve tüm ikinci orada, tabii ki, bu size çok uygun sıkı yazarak kullanarak bir kod temeli kurmak için biraz daha zaman mal olacak. Tecrübelerime göre, bu maliyetler başkalarıyla paylaşıyorsunuz herhangi bir ciddi kodu tabanında tamamen değer. Github Programlama Dilleri ve Kod Kalite Bir Büyük Ölçekli Çalışma düşündürmektedir "genel olarak bu statik olarak yazılan diller dinamik türlerinden daha eğilimli az kusur olduğunu ve güçlü yazarak aynı konuda zayıf yazarak daha iyidir".

Çok aynı kağıt typescript JavaScript sonra eğilimli az hata olarak bulduğunu ilginçtir:

Pozitif katsayılı olanlar için biz dil diğer şartlar sabitken, kusur düzeltmeleri daha fazla sayıda, ile ilişkili olduğunu bekleyebilirsiniz. Bu diller C, C ++, dahil JavaScript , Objective-C, PHP ve Python. Dil Clojure, Haskell, Yakut, Scala ve typescript , tüm negatif katsayılar bu diller kusur sabitleme taahhüt ortalama sonuçlanma daha az olası olduğunu ima var.

Geliştirilmiş IDE desteği

Typescript ile geliştirme deneyimi JavaScript üzerinde büyük bir gelişme. IDE zengin tip bilgilere typescript derleyici tarafından gerçek zamanlı olarak bildirilir. Bu önemli avantaj bir çift verir. Örneğin, typescript ile güvenle tüm kod temeli üzerinde yeniden adlandırır gibi refactorings yapabilirsiniz. Kod tamamlama aracılığıyla bir kütüphane teklif ne olursa olsun fonksiyonları üzerinde satır içi yardım alabilirsiniz. Artık onları hatırlamak veya online başvurular bunları aramak gerekir. Meşgul kodlama iken Derleme hataları Kırmızı kırık çizgi ile IDE doğrudan rapor edilir. Tüm bu JavaScript ile çalışan kıyasla verimlilikte önemli kazanç sağlar. Bir kez daha kodlaması ve daha az zaman hata ayıklama geçirebilirsiniz.

Visual Studio & VS kodu, Atom, Yüce ve IntelliJ / WebStorm gibi typescript için mükemmel destek var IDE geniş bir yelpazesi vardır.

Sıkı boş çekler

Süre formunun hataları cannot read property 'x' of undefinedveya undefined is not a functionçok sık JavaScript kodu hataların kaynaklanır. Kutu typescript dışında zaten bir (özelliklerine hariç typescript derleyiciye bilinmemektedir bir değişken kullanamazsınız çünkü hatalar bu tür olasılığı ortaya çıkan azaltır anyYazılan değişkenler). Yanlışlıkla ayarlandığında bir değişken kullanmaya rağmen hala mümkündür undefined. Ancak, typescript 2.0 sürümü ile olmayan null türlerinin kullanımı yoluyla bir arada Bu tür hatalar ortadan kaldırabilir. Aşağıdaki gibi çalışır:

Sıkı boş çekler (etkinken --strictNullChecksderleyici bayrağı) typescript derleyici izin vermez undefinedaçıkça olabilen türün olmasını beyan sürece bir değişkene atanacak. Örneğin, let x : number = undefinedbir derleme hatasına neden olur. Bu durum, tip teorisi ile mükemmel bir uyum undefinedbir sayı değil. Bir tanımlayabilir xbir miktar türü olduğu numberve undefinedbu durumu düzeltmek için: let x : number | undefined = undefined.

Bir tür, yani null olduğu bilinir kez de değer olabilen bir tiptedir nullya undefined, typescript derleyici kodunuzu güvenle bir değişkeni kullanıp kullanmayacağına olup olmadığını kontrol akış tabanlı tip analizi yoluyla belirleyebilir. Başka bir deyişle bir değişkendir kontrol ederken undefinedörneğin bir içinden iftypescript derleyici sizin kodun kontrol akışının olduğu dalında tipi artık null olmadığı sonucuna varırlar edecektir beyanı ve bu nedenle güvenle kullanılabilir. İş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.

: Typescript Anders Hejlsberg oluşumunu 2016 konferans co-designer sırasında bu özelliğin ayrıntılı bir açıklama ve gösteri verdi videoyu (44:30 dan 56:30 kadar).

Derleme

Typescript kullanmak için JavaScript koduna derlemek için bir derleme işlemi gerekir. Inşa süreci genellikle projenizin büyüklüğüne tabii bağlı saniye sadece bir çift alır. Typescript derleyici artan derleme (destekleyen --watchtüm sonraki değişiklikler daha hızla derlenmiş böylece, derleyici bayrak).

Typescript derleyici js oluşturulan dosyalarda kaynak harita bilgilerini satır içi veya ayrı .map dosyaları oluşturabilirsiniz. Kaynak harita bilgisi typescript onları oluşturulan olanları JavaScript satırlarını ilişkilendirmek Chrome Geliştirme Araçları ve diğer IDE en gibi araçları ayıklama tarafından kullanılabilir. Eğer kesme noktaları ve sizin typescript kod üzerinde doğrudan çalışma zamanı sırasında değişkenleri incelemek için bu mümkün kılar. Kaynak harita bilgisi o typescript geçmeden etrafında oldukça iyi çalışır, ancak ayıklama typescript genellikle doğrudan JavaScript kullanırken kadar büyük değildir. Al thisörneğin anahtar kelime. Nedeniyle değişen semantik için thisES2015 beri kapanışları etrafında anahtar kelime, thismay aslında adında bir değişken olarak çalışma zamanı sırasında mevcut _this(bkz bu cevabı). Bu hata ayıklama sırasında size şaşırtmak olabilir, ancak bunu bilmek veya JavaScript kodlarını incelemek eğer genellikle bir sorun değildir. Babil konunun tam olarak aynı tür uğrar unutulmamalıdır.

Dayalı kod müdahale üretme gibi typescript derleyici yapabileceğiniz birkaç diğer hile vardır dekoratörler , farklı modül sistemleri için modül yükleme kodunu oluşturma ve ayrıştırma JSX . Ancak, büyük olasılıkla typescript derleyici yanında bir yapı aracını gerektirecektir. Kodunuzu sıkıştırmak istiyorsanız Örneğin bunu yapmak için inşa sürecine diğer araçları eklemek gerekir.

Için kullanılabilir daktilo versiyonunda derleme eklentileri vardır WebPack , Gulp , Grunt ve hemen hemen diğer tüm JavaScript inşa aracı orada. Typescript belgeleri bir bölüm vardır Yapım araçları ile entegre hepsini kapsayan. Bir linter durumda daha da fazla gibi kontrol zaman kuracağına da mevcuttur. Eğer Açısal 2, Tepki, Ember, SystemJs, WebPack, Gulp vb gibi diğer teknolojilerin bir grup ile kombinasyon halinde typescript ile başladı alacak orada tohum projeleri çok sayıda da vardır

JavaScript birlikte çalışabilirlik

Typescript çok yakından JavaScript ile ilgili olduğundan büyük çalışabilirlik yeteneklere sahiptir, ancak bazı ekstra çalışma typescript JavaScript kütüphaneleri ile çalışmak için gereklidir. Typescript tanımları typescript derleyici anlar söz konusu işlev gibi çağırır böylece ihtiyaç vardır _.groupByya angular.copyya $.fadeOutaslında yasadışı tablolara değildir. Bu işlevler için tanımları yerleştirilir .d.tsdosyaları.

Bir tanım, en basit bir şekilde, bir tanımlayıcı, herhangi bir şekilde kullanılmasına olanak sağlamaktır. Kullanırken Örneğin, Lodash , tek bir çizgi tanım dosyası declare var _ : anysize üzerinde istediğiniz herhangi işlevi çağırmak sağlayacak _, ama sonra elbette yine de hata yapma edebiliyoruz: _.foobar()Yasal bir typescript çağrı olurdu ama yasadışı çağrı elbette işlem esnasında. Doğru tip destek ve kod tamamlama istiyorsanız sizin tanım dosyası (daha fazla tam olarak gereken lodash tanımlarını bir örnek için).

NPM modülleri kendi tip tanımlarıyla önceden paketlenmiş gelip otomatik typescript derleyici (bkz anlaşıldığına göre belgeler ). Zaten başka npm modülü aracılığıyla kullanılabilir tip tanımları var yapmıştır dışarı kendi tanımları birini içermez hemen hemen herhangi bir başka yarı popüler JavaScript kitaplığının. Bu modüller "@ türleri /" öneki ve adında bir Github deposundan geliyorsun DefinitelyTyped .

tip tanımları Eğer çalışma anında kullandığınız kütüphanenin sürümüyle eşleşmesi gerekir: bir ihtar vardır. Onlar yoksa, typescript bir işlevi çağırmak ya yok veya bir işlevi çağırmak için veya tipleri derleme sırasında çalışma süresini uyuşmuyor çünkü bir değişken KQUEUE o yok, izin bir değişken çözümleyecek yapmanıza izin olabilir . Yani kullandığınız kütüphaneye doğru sürümüne ilişkin tip tanımları doğru sürümünü yüklemek emin olun.

Dürüst olmak gerekirse, bu hafif bir güçlük yoktur ve sizin typescript seçmeyin nedenlerinden biri olabilir, ama bunun yerine hiç tip tanımlarını almak zorunda değil acı Babel gibi bir şey gidebilir. Eğer ne yaptığınızı biliyorsanız Öte yandan, kolayca yanlış veya eksik tanım dosyalarını kaynaklanan sorunların her türlü üstesinden gelebilir.

JavaScript dönüştürme typescript için

Herhangi .jsdosyası için yeniden adlandırılabilir .tsve (o sözdizimsel ilk etapta doğru ise) sözdizimsel bir çıkışla aynı JavaScript kodu almak için typescript derleyici geçti. Typescript derleyici derleme hataları alıyor bile hala bir üretecek .jsdosyayı. Hatta kabul edebileceği .jsile giriş olarak dosyaları --allowJsbayrak. Bu hemen typescript ile başlamasını sağlar. Maalesef derleme hatası başlangıçta meydana gelmesi muhtemeldir. Bunlardan biri göstermek durdurma olmadığını, diğer derleyiciler ile kullanılabilir gibi hataları hatırlamak gerek yoktur.

Daktilo projeye bir JavaScript projesi dönüştürürken tek başında alır derleme hatası typescript en doğası gereği kaçınılmazdır. Typescript denetler tüm geçerliliği için kod ve böylece kullanılan tüm fonksiyonlar ve değişkenler hakkında bilmesi gerekir. Böylece tip tanımları aksi derleme hataları meydana bağlanmıştır hepsi için yerde olması gerekir. Yukarıdaki bölümde belirtildiği gibi, hemen hemen herhangi bir JavaScript framework için vardır .d.tskolayca yüklemesiyle elde edilebilir dosyalar DefinitelyTyped paketleri. Ancak hiçbir typescript tanımları mevcuttur veya bazı JavaScript ilkeller polyfilled ettik kendisi için bazı karanlık kütüphane kullandım o olabilir. Bu durumda aşmaya derleme hataları için bu bit tip tanımları sağlamalısınız. Sadece bir oluşturmak .d.tsdosyayı ve tsconfig.json en dahil filesher zaman typescript derleyici tarafından kabul edilir, böylece dizinin. İçinde typescript türü olarak bilmediği bu bit beyan any. Tüm hataları ortadan kaldırdıktan sonra yavaş yavaş senin ihtiyaçlarına göre parçalara yazarak tanıtabilirsiniz.

Oluşturduğunuz yapı boru hattı yapılandırılması (tekrar) Bazı çalışmalar da inşa boru hattına typescript almak gerekli olacaktır. derleme ile ilgili bölümde belirtildiği gibi başkaları da mı var iyi kaynakları bol olan ve sana çalışmaktan isteyen araçların kombinasyonunu kullanabilirsiniz tohum projeleri için bakmak için teşvik ediyoruz.

En büyük engel öğrenme eğridir. İlk başta küçük bir proje ile uğraşmak için teşvik ediyoruz. o buna typescript için büyük bir JavaScript kod temeli dönüştürme vb kullandığı araçları nasıl yapılandırıldığını IDE'nizde,, hangi işlevde kullanıldığını, bunun nasıl yapılandırıldığını, kullandığı hangi dosyaları, inşa çok yapılabilir, nasıl çalıştığını Bak nasıl sizi ne yaptığınızı biliyorum, ama bilmiyorsun zaman sinir bozucu olabilir.

Benimseme

Typescript (Apache 2, bkz lisanslı açık kaynak GitHub ) ve Microsoft tarafından desteklenen. Anders Hejlsberg , C # kurşun mimar projesini öncülük etmektedir. Bu çok aktif bir proje; typescript ekibi son birkaç yıl içinde yeni bir çok özellik çıkarıyordu ve büyük olanlar hala bir sürü gelip (bkz planlanmaktadır yol haritası ).

In 2017 StackOverflow geliştirici anket typescript en popüler JavaScript transpiler (9. sıra genel) olduğu ve en sevilen programlama dili kategorisinde üçüncü oldu.

Cevap 27/01/2016 saat 21:23
kaynak kullanıcı

oy
49

Typescript küçük veya küstahlık CSS ne benzer bir şey yapar. Onlar yazdığınız her JS kod geçerli typescript kodu olduğu anlamına gelir bunun süper setleri vardır. Artı bunun dile ekler diğer güzellikler kullanabilir ve transpiled kod geçerli js olacaktır. Hatta üzerinde çıkan kodu istiyor JS sürümünü ayarlayabilirsiniz.

Şu typescript ES2015 süper dizi, bu nedenle proje için gerekli standarda js özellikleri ve transpile yeni öğrenmeye başlamak için iyi bir seçim olabilir.

Cevap 11/02/2016 saat 20:32
kaynak kullanıcı

oy
29

" Typescript Temelleri " - bir Pluralsight video ders Dan Wahlin ve John Papa gerçekten iyi, halen (25 Mart 2016) typescript 1.8 yansıtacak şekilde güncellenir, giriş typescript etmektir.

Gerçekten iyi özelliklere Benim için intellisense için güzel olasılıklar yanında, olan sınıflar , arabirimler , modüller , AMD uygulanmasının kolaylığı ve IE ile çağrıldığında Visual Studio typescript ayıklayıcısını kullanma imkanı.

Özetlemek gerekirse : amaçlandığı gibi kullanılırsa, typescript JavaScript programlama daha güvenilir ve kolay hale getirebilir. Önemli ölçüde tam SGYD'nin ziyade JavaScript programcısı üretkenliğini artırabilir.

Cevap 27/12/2015 saat 04:18
kaynak kullanıcı

oy
7

Ecma komut 5 (ES5) Tüm tarayıcı desteği ve önceden derlenmiş. ES6 / ES2015 ve ES / 2016 yüzden typescript hakkında umurunda almalı hangi arada bir şey yani bu değişiklikleri açılır değişiklikler dolu bu yıl geldi. • typescript Türleri olduğunu -> her özellik ve yöntemlerin veri türünü tanımlamak zorunda anlamına gelir. C # biliyorsanız o zaman typescript anlamak kolaydır. • typescript Big avantajı biz kimlik Tipi erken üretime gitmeden önce sorunları ile ilgili olduğunu. Bu tür eşleşme varsa ünite testleri başarısız olmasına izin verir.

Cevap 06/06/2016 saat 12:14
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more