Microsoft'un popüler programlama dili TypeScript, en son sürümü olan TypeScript 5.1 ile etkilemeye devam ediyor. Heyecan verici yeni özellikler ve geliştirmelerle dolu bu sürüm, kodlama deneyiminizi yeni bir boyuta taşımayı vaat ediyor. yükseklikler.

Basitleştirilmiş İşlev İadeleri ve Erişimci Türleri

JavaScript'te, bir işlev oluşturduğunuzda ve bir dönüş ifadesiyle karşılaşmadan yürütün, otomatik olarak değeri döndürür Tanımsız.

TypeScript 5.1, undefined döndüren işlevlerin return deyimini tamamen atlamasına izin veren yeni bir özellik sunmuştur. Bu geliştirme, kodun okunabilirliğini ve özlülüğünü geliştirir.

işlevgünlükMesaj(İleti: sicim): Tanımsız{
konsol.log (mesaj);
// Burada dönüş ifadesine gerek yok
}

Bu örnek işlevi kullanır günlükMesaj Konsolda bir mesaj görüntülemek için. Ancak, işlev açıkça herhangi bir değer döndürmez.

TypeScript 5.1, açık tür ek açıklamaları sağladığınız sürece alıcılar ve ayarlayıcılar için ilgisiz türlerin kullanımına izin veren yeni bir özellik sunar.

Bu geliştirme, bir özelliğe erişmek ve bir özelliği değiştirmek için farklı türleri zorlamanız gereken durumlarda oldukça avantajlı olduğunu kanıtlıyor.

sınıf Kullanıcı {
özel _isim: sicim | hükümsüz = hükümsüz;
ayarlamak ad (yeniAd: sicim) {
Bu._name = yeniAd;
 }
elde etmek isim(): sicim {
geri dönmekBu._isim?? 'Bilinmeyen';
 }
}

Bu örnekte, User sınıfının özel bir _isim olabilecek bir özellik sicim veya hükümsüz. bu isim ayarlayıcı bir dize alır yeni isim ve onu atar _isim. İsim alıcısı, değerini döndürür _isim eğer değilse hükümsüz, veya Bilinmeyen Eğer öyleyse.

Bu, name özelliğinin yalnızca bir dizeyle ayarlanabileceğini zorunlu kılmanıza olanak tanır, ancak name özelliğini alırken, bu bir dize veya Bilinmeyen henüz ayarlanmamışsa.

Bu özellik, aşağıdaki örnekte gösterildiği gibi daha esnek ve anlamlı tip tanımları sağlar.

arayüz CSSStyleRule {
// Her zaman bir 'CSSStyleDeclaration' olarak okunur
elde etmek stil(): CSSStyleDeclaration;
// Buraya sadece bir `string` yazılabilir.
ayarlamak stil (yeniDeğer: sicim);
}

Yukarıdaki örnekte, style özelliği, bir CSSStyleDeclaration döndüren bir alıcıya ve bir dize kabul eden bir ayarlayıcıya sahiptir. Bu türler ilgisizdir, ancak TypeScript 5.1 bu tür bir tür tanımına izin verir.

JSX Geliştirmeleri

TypeScript 5.1, JSX için çeşitli geliştirmeler sunar. Artık JSX öğeleri ve JSX etiket türleri arasında ayrıştırılmış tip kontrolüne izin verir. redux gibi kütüphaneler için kullanışlıdır bileşenlerin yalnızca JSX öğelerinden daha fazlasını döndürmesine izin verir.

içe aktarmak * gibi Tepki itibaren"tepki";
zaman uyumsuzişlevEşzamansız Bileşen() {
geri dönmek
yüklendi</div>;
}
// Buna artık izin veriliyor:
izin vermek eleman = ;

Bu örnekte, Eşzamansız Bileşen işlevi, bir JSX öğesi döndüren eşzamansız bir işlevdir. TypeScript 5.1, önceki sürümlerde mümkün olmayan bu tür bir işlevi bir JSX bileşeni olarak kullanmanıza izin verir.

TypeScript 5.1, React 17'de tanıtılan yeni JSX Dönüşümü için de destek sunar. Bu, JSX'i React'i içe aktarmadan kullanmanıza izin verir.

// Önce
içe aktarmak Tepki itibaren"tepki";
işlevBileşen() {
geri dönmek
Merhaba dünya!/h1>;
}
// Sonrasında
işlevBileşen() {
geri dönmek
Merhaba dünya!/h1>;
}

Yukarıdaki örnekte, Bileşen işlevi bir JSX öğesi döndürür. TypeScript 5.1 ve React 17'de, JSX kullanmak için artık React'i içe aktarmanız gerekmez.

TypeScript 5.1'de Performans Artışları ve Önemli Değişiklikler

TypeScript 5.1, performansı artırmak için hız, bellek ve paket boyutu optimizasyonları dahil olmak üzere çeşitli optimizasyonlar sunar. gereksiz tür örneklemesinden kaçınma, birleşim sabit değerleri için olumsuz durum kontrolleri ve JSDoc için tarayıcıya daha az çağrı yapılması ayrıştırma

Burada, dış tür parametrelerine referanslar içermediği bilinen nesne türleri içinde gereksiz tür örneklemesinden kaçınmaya ve birleşim sabit değerleri için daha hızlı kontrollere bir örnek verilmiştir.

tip Birlik = 'A' | 'B' | 'C';
işlevkontrol etmek(değer: Birlik) {
// ...
}

Bu örnekte TypeScript 5.1, birleşimdeki her türü kontrol etmek zorunda kalmadan bir değerin Birlik türünün parçası olup olmadığını hızlı bir şekilde kontrol edebilir.

İşte başka bir örnek:

tip Nokta = {x: sayı, y: sayı };
işlevÇevirmek(nokta: Nokta, dx: sayı, gün: sayı): Nokta{
geri dönmek { x: nokta.x + dx, y: nokta.y + dy };
}
izin vermek p: Nokta = { x: 1, y: 2 };
p = çevir (p, 1, 1);

Bu örnekte Nokta tipi, herhangi bir tip parametresi içermeyen bir nesne tipidir. TypeScript 5.1, çeviri işlevini çağırdığında, tip denetimini önemli ölçüde hızlandırabilen gereksiz tür örneklemesini önleyebilir.

TypeScript 5.1'i Kucaklamak

TypeScript 5.1, JavaScript geliştirmede devrim yaratan bir dizi güçlü özellik ve optimizasyon sunar. TypeScript 5.1, basitleştirilmiş işlev geri dönüşlerinden JSX geliştirmelerine ve performans artışlarına kadar, tip denetimi ve genel performansı iyileştirirken daha temiz, daha anlamlı kod yazmanıza olanak tanır.

TypeScript 5.1'i benimseyerek, yeni olasılıkların kilidini açabilir ve JavaScript projelerinizi yeni verimlilik ve yenilik seviyelerine yükseltebilirsiniz. TypeScript 5.1'in daha gelişmiş ve kolaylaştırılmış bir JavaScript geliştirme deneyimine açılan kapınız olmasına izin verin.