TypeScript 5.0'daki Yenilikler: Bildiriciler, Const Type, Enums İyileştirme, Hız ve Çok Daha Fazlası!

TypeScript 5.0, 16 Mart 2023'te resmi olarak yayınlandı ve artık herkesin kullanımına açıldı. Bu sürüm, TypeScript'i daha küçük, daha basit ve daha hızlı hale getirmek amacıyla birçok yeni özellik sunar.

Bu yeni sürüm, dekoratörleri sınıf özelleştirmesi için modernize ederek, sınıfların ve üyelerinin yeniden kullanılabilir bir şekilde özelleştirilmesine olanak tanır. Geliştiriciler artık bir tür parametre bildirimine bir const değiştirici ekleyerek, const benzeri çıkarımların varsayılan olmasını sağlayabilir. Yeni sürüm ayrıca tüm numaralandırmaları birleştirme numaralandırmaları yaparak kod yapısını basitleştirir ve TypeScript deneyimini hızlandırır.

Bu makalede, TypeScript 5.0'da sunulan değişiklikleri inceleyerek yeni özellik ve yeteneklerine derinlemesine bir bakış sunacaksınız.

TypeScript 5.0'a Başlarken

TypeScript, npm kullanarak projenize kurabileceğiniz resmi bir derleyicidir. TypeScript 5.0'ı projenizde kullanmaya başlamak istiyorsanız, projenizin dizininde aşağıdaki komutu çalıştırabilirsiniz:

 npm install -D typescript

Bu, derleyiciyi artık npx tsc komutuyla çalıştırabileceğiniz node_modules dizinine yükleyecektir.

TypeScript'in daha yeni sürümünün Visual Studio Code'da kullanılmasına ilişkin yönergeleri de bu belgede bulabilirsiniz.

TypeScript 5.0'daki Yenilikler Neler?

Bu makalede, TypeScript'e eklenen 5 büyük güncellemeyi inceleyelim. Bu özellikler şunları içerir:

Modernize Dekoratörler

Dekoratörler bir süredir TypeScript'te deneysel bir bayrak altında dolaşıyorlar, ancak yeni sürüm onları şu anda 3. aşamada olan, yani TypeScript'e eklendiği bir aşamada olduğu anlamına gelen ECMAScript önerisiyle hızlandırıyor.

Dekoratörler, sınıfların ve üyelerinin davranışlarını yeniden kullanılabilir bir şekilde özelleştirmenin bir yoludur. Örneğin, iki yöntemi olan bir sınıfınız varsa greet ve getAge :

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name}.`); } getAge() { console.log(`I am ${this.age} years old.`); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

Gerçek dünyadaki kullanım durumlarında, bu sınıfın, yöntemlerde hata ayıklamaya yardımcı olması için bazı console.log çağrılarına atmak isteyeceğiniz, bazı zaman uyumsuz mantığı işleyen ve yan etkileri vb.

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet() { console.log('LOG: Method Execution Starts.'); console.log(`Hello, my name is ${this.name}.`); console.log('LOG: Method Execution Ends.'); } getAge() { console.log('LOG: Method Execution Starts.'); console.log(`I am ${this.age} years old.`); console.log('Method Execution Ends.'); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

Bu, sık sık meydana gelen bir modeldir ve her yönteme uygulanacak bir çözüme sahip olmak uygun olacaktır.

Burada dekoratörler devreye giriyor. Aşağıdaki gibi görünen debugMethod adlı bir işlev tanımlayabiliriz:

 function debugMethod(originalMethod: any, context: any) { function replacementMethod(this: any, ...args: any[]) { console.log('Method Execution Starts.'); const result = originalMethod.call(this, ...args); console.log('Method Execution Ends.'); return result; } return replacementMethod; }

Yukarıdaki kodda, debugMethod orijinal yöntemi ( originalMethod ) alır ve aşağıdakileri yapan bir işlev döndürür:

1. "Yöntem Yürütme Başlıyor" mesajını günlüğe kaydeder.
2. Orijinal yöntemi ve tüm bağımsız değişkenlerini (bu dahil) iletir.
3. "Yöntem Yürütme Sonu" mesajını günlüğe kaydeder.
4. Orijinal yöntemin döndürdüğü her şeyi döndürür.

Dekoratörleri kullanarak, debugMethod aşağıdaki kodda gösterildiği gibi yöntemlerinize uygulayabilirsiniz:

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } @debugMethod greet() { console.log(`Hello, my name is ${this.name}.`); } @debugMethod getAge() { console.log(`I am ${this.age} years old.`); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

Bu, aşağıdaki çıktıyı verecektir:

 LOG: Entering method. Hello, my name is Ron. LOG: Exiting method. LOG: Entering method. I am 30 years old. LOG: Exiting method.

Dekoratör işlevini ( debugMethod ) tanımlarken, context adı verilen ikinci bir parametre iletilir (bu, bağlam nesnesidir - dekore edilmiş yöntemin nasıl bildirildiği ve ayrıca yöntemin adı hakkında bazı yararlı bilgiler içerir). context nesnesinden yöntem adını almak için debugMethod güncelleyebilirsiniz:

 function debugMethod( originalMethod: any, context: ClassMethodDecoratorContext ) { const methodName = String(context.name); function replacementMethod(this: any, ...args: any[]) { console.log(`'${methodName}' Execution Starts.`); const result = originalMethod.call(this, ...args); console.log(`'${methodName}' Execution Ends.`); return result; } return replacementMethod; }

Kodunuzu çalıştırdığınızda, artık çıktı, debugMethod dekoratörüyle süslenmiş her yöntemin adını taşıyacaktır:

 'greet' Execution Starts. Hello, my name is Ron. 'greet' Execution Ends. 'getAge' Execution Starts. I am 30 years old. 'getAge' Execution Ends.

Dekoratörlerle yapabileceğiniz daha çok şey var. TypeScript'te dekoratörlerin nasıl kullanılacağı hakkında daha fazla bilgi için orijinal çekme isteğini kontrol etmekten çekinmeyin.

const Tip Parametrelerine Giriş

Bu, işlevleri çağırdığınızda elde ettiğiniz çıkarımı iyileştirmek için jeneriklerle yeni bir araç sağlayan başka bir büyük sürümdür. Varsayılan olarak, değerleri const ile bildirdiğinizde, TypeScript türün değişmez değerlerini değil, türü anlar:

 // Inferred type: string[] const names = ['John', 'Jake', 'Jack'];

Şimdiye kadar, istenen çıkarımı elde etmek için const önermesini "as const" ekleyerek kullanmak zorundaydınız:

 // Inferred type: readonly ["John", "Jake", "Jack"] const names = ['John', 'Jake', 'Jack'] as const;

İşlevleri çağırdığınızda benzerdir. Aşağıdaki kodda, çıkarılan ülke türü string[] şeklindedir:

 type HasCountries = { countries: readonly string[] }; function getCountriesExactly(arg: T): T['countries'] { return arg.countries; } // Inferred type: string[] const countries = getCountriesExactly({ countries: ['USA', 'Canada', 'India'] });

Şimdiye kadar düzeltmenin bir yolunun as const iddiasını eklemek olduğu daha spesifik bir tür isteyebilirsiniz:

 // Inferred type: readonly ["USA", "Canada", "India"] const names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] } as const);

Bunu hatırlamak ve uygulamak zor olabilir. Ancak TypeScript 5.0, bir tür parametresi bildirimine bir const değiştirici ekleyebileceğiniz ve varsayılan olarak const benzeri bir çıkarımı otomatik olarak uygulayan yeni bir özellik sunar.

 type HasCountries = { countries: readonly string[] }; function getNamesExactly(arg: T): T['countries'] { return arg.countries; } // Inferred type: readonly ["USA", "Canada", "India"] const names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] });

const türü parametrelerin kullanılması, geliştiricilerin kodlarında amacı daha açık bir şekilde ifade etmelerine olanak tanır. Bir değişkenin sabit olması ve asla değişmemesi amaçlanıyorsa, const tipi bir parametrenin kullanılması onun asla yanlışlıkla değiştirilemeyeceğini garanti eder.

TypeScript'te const tür parametresinin nasıl çalıştığı hakkında daha fazla bilgi için orijinal çekme isteğini kontrol edebilirsiniz.

Numaralandırmalarda İyileştirmeler

TypeScript'teki numaralandırmalar, geliştiricilerin bir dizi adlandırılmış sabit tanımlamasına izin veren güçlü bir yapıdır. TypeScript 5.0'da, daha da esnek ve kullanışlı hale getirmek için numaralandırmalarda iyileştirmeler yapılmıştır.

Örneğin, bir işleve aşağıdaki sıralamayı geçirdiyseniz:

 enum Color { Red, Green, Blue, } function getColorName(colorLevel: Color) { return colorLevel; } console.log(getColorName(1));

TypeScript 5.0'ın kullanıma sunulmasından önce, yanlış bir düzey numarası iletebilirdiniz ve bu hiçbir hata vermezdi. Ancak TypeScript 5.0'ın kullanıma sunulmasıyla birlikte hemen bir hata verecektir.

Ayrıca, yeni sürüm, hesaplanan her üye için benzersiz bir tür oluşturarak tüm numaralandırmaları birleşim numaralandırmalarına dönüştürür. Bu geliştirme, tüm numaralandırmaların daraltılmasına ve üyelerine türler olarak atıfta bulunulmasına izin verir:

 enum Color { Red, Purple, Orange, Green, Blue, Black, White, } type PrimaryColor = Color.Red | Color.Green | Color.Blue; function isPrimaryColor(c: Color): c is PrimaryColor { return c === Color.Red || c === Color.Green || c === Color.Blue; } console.log(isPrimaryColor(Color.White)); // Outputs: false console.log(isPrimaryColor(Color.Red)); // Outputs: true

TypeScript 5.0'ın Performans İyileştirmeleri

TypeScript 5.0, kod yapısında, veri yapılarında ve algoritmik uzantılarda çok sayıda önemli değişiklik içerir. Bu, kurulumdan yürütmeye kadar tüm TypeScript deneyiminin iyileştirilmesine yardımcı olarak daha hızlı ve daha verimli hale geldi.

Örneğin, TypeScript 5.0 ile 4.9'un paket boyutu arasındaki fark oldukça etkileyici.

TypeScript kısa bir süre önce ad alanlarından modüllere taşındı ve kapsam kaldırma gibi optimizasyonlar gerçekleştirebilen modern yapı araçlarından yararlanmasına olanak sağladı. Ayrıca, kullanımdan kaldırılan bazı kodların kaldırılması, TypeScript 4.9'un 63,8 MB'lık paket boyutunun yaklaşık 26,4 MB'ını azalttı.

İşte TypeScript 5.0 ve 4.9 arasında hız ve boyut açısından birkaç ilginç kazanç daha:

Daha İyi Modül Çözünürlüğü için Bundler Çözünürlüğü

TypeScript'te bir içe aktarma ifadesi yazdığınızda, derleyicinin içe aktarmanın ne anlama geldiğini bilmesi gerekir. Bunu modül çözünürlüğünü kullanarak yapar. Örneğin, import { a } from "moduleA" yazdığınızda, derleyicinin kullanımını kontrol etmek için moduleA a tanımını bilmesi gerekir.

TypeScript 4.7'de, --module ve moduleResolution ayarları için iki yeni seçenek eklenmiştir: node16 ve nodenext .

Bu seçeneklerin amacı, Node.js'deki ECMAScript modülleri için tam arama kurallarını daha doğru bir şekilde temsil etmekti. Ancak, bu modun diğer araçlar tarafından uygulanmayan çeşitli kısıtlamaları vardır.

Örneğin, Node.js'deki bir ECMAScript modülünde, herhangi bir göreli içe aktarma işleminin düzgün çalışması için bir dosya uzantısı içermesi gerekir:

 import * as utils from "./utils"; // Wrong import * as utils from "./utils.mjs"; // Correct

TypeScript, "moduleResolution paketleyici" adlı yeni bir strateji tanıttı. Bu strateji, TypeScript yapılandırma dosyanızın "compilerOptions" bölümüne aşağıdaki kodu ekleyerek uygulanabilir:

 { "compilerOptions": { "target": "esnext", "moduleResolution": "bundler" } }

Bu yeni strateji, Vite, esbuild, swc, Webpack, Parcel gibi modern paketleyicileri kullananlar ve hibrit bir arama stratejisi kullanan diğerleri için uygundur.

moduleResolution paketleyicinin TypeScript'te nasıl çalıştığı hakkında daha fazla bilgi için orijinal çekme isteğini ve uygulanmasını kontrol edebilirsiniz.

kullanımdan kaldırmalar

TypeScript 5.0, çalışma zamanı gereksinimleri, lib.d.ts değişiklikleri ve API'yi bozan değişiklikler dahil olmak üzere bazı yıpranmalarla birlikte gelir.

1. Çalışma Zamanı Gereksinimleri: TypeScript artık ECMAScript 2018'i hedefliyor ve paket, minimum motor beklentisini 12,20 olarak belirliyor. Bu nedenle, Node.js kullanıcılarının TypeScript 5.0'ı kullanabilmeleri için en az 12.20 veya sonraki bir sürüme sahip olmaları gerekir.
2. lib.d.ts Değişiklikleri: DOM türlerinin nasıl oluşturulduğu konusunda mevcut kodu etkileyebilecek bazı değişiklikler oldu. Özellikle, belirli özellikler sayıdan sayısal hazır bilgi türlerine dönüştürüldü ve kesme, kopyalama ve yapıştırma olay işleme özellikleri ve yöntemleri arabirimler arasında taşındı.
3. API kırma değişiklikleri: Bazı gereksiz arayüzler kaldırıldı ve bazı doğruluk iyileştirmeleri yapıldı. TypeScript 5.0 da modüllere taşındı.

TypeScript 5.0, target: ES3 , out , noImplicitUseStrict , keyofStringsOnly , suppressExcessPropertyErrors , suppressImplicitAnyIndexErrors , noStrictGenericChecks , charset , importsNotUsedAsValues ​​ve preserveValueImports yanı sıra proje referanslarında başa ekleyin.

Bu yapılandırmalar TypeScript 5.5'e kadar geçerli kalırken, bunları kullanmaya devam eden kullanıcıları uyarmak için bir uyarı verilecektir.

Özet

Bu makalede, TypeScript 5.0'ın getirdiği enums, paketleyici çözünürlüğü ve const tür parametrelerindeki iyileştirmeler ile hız ve boyuttaki iyileştirmeler gibi bazı önemli özellikleri ve geliştirmeleri öğrendiniz.

Sonraki projeleriniz için TypeScript kullanmayı düşünüyorsanız, Kinsta'nın Uygulama Barındırma hizmetini ücretsiz olarak deneyin.

Şimdi senin sıran! TypeScript 5.0'da en çekici bulduğunuz özellikler veya geliştirmeler nelerdir? Gözden kaçırmış olabileceğimiz önemli şeyler var mı? Yorumlarda bize bildirin.