Karmaşık web uygulamaları oluşturuyorsanız TypeScript muhtemelen programlama diliniz olacaktır. TypeScript, güçlü tür sistemi ve statik analiz yetenekleri nedeniyle çok sevilir ve bu da onu kodunuzun sağlam ve hatasız olmasını sağlamak için güçlü bir araç haline getirir.  Ayrıca kod düzenleyicilerle entegrasyon yoluyla geliştirme sürecini hızlandırarak geliştiricilerin kodda daha verimli bir şekilde gezinmesine, daha doğru ipuçları ve otomatik tamamlama almasına olanak tanır ve büyük miktarlarda kodun güvenli bir şekilde yeniden düzenlenmesine olanak tanır.  Derleyici, TypeScript'in kalbidir ve tür doğruluğunu kontrol etmekten ve TypeScript kodunu JavaScript'e dönüştürmekten sorumludur. Ancak TypeScript'in gücünden tam olarak yararlanmak için Derleyiciyi doğru şekilde yapılandırmak önemlidir.  Her TypeScript projesinde Derleyicinin tüm yapılandırma seçeneklerini içeren bir veya daha fazla   dosyası bulunur. tsconfig.json  Tsconfig'i yapılandırmak, TypeScript projelerinizde optimum tür güvenliği ve geliştirici deneyimi elde etmek için çok önemli bir adımdır. İlgili tüm önemli faktörleri dikkatle değerlendirmek için zaman ayırarak geliştirme sürecini hızlandırabilir ve kodunuzun sağlam ve hatasız olduğundan emin olabilirsiniz.  Standart Yapılandırmanın Dezavantajları  Tsconfig'teki varsayılan yapılandırma, geliştiricilerin TypeScript'in avantajlarının çoğunu kaçırmasına neden olabilir. Bunun nedeni, pek çok güçlü tür denetimi özelliğini etkinleştirmemesidir. "Varsayılan" yapılandırmayla, hiçbir tür denetimi derleyici seçeneğinin ayarlanmadığı bir yapılandırmayı kastediyorum.  Örneğin:   { "compilerOptions": { "target": "esnext", "module": "esnext", "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "skipLibCheck": true, }, "include": ["src"] }  Birkaç temel yapılandırma seçeneğinin bulunmaması, iki temel nedenden dolayı kod kalitesinin düşmesine neden olabilir. İlk olarak, TypeScript'in derleyicisi çeşitli durumlarda   ve   türleri hatalı şekilde işleyebilir. null undefined  İkinci olarak,   tür kod tabanınızda kontrolsüz bir şekilde görünebilir ve bu da bu türün devre dışı bırakılmasına yol açabilir. any  Neyse ki, yapılandırmadaki birkaç seçeneği değiştirerek bu sorunları düzeltmek kolaydır.  Katı Mod   { "compilerOptions": { "strict": true } }  Katı mod, çok çeşitli tür denetimi davranışlarını etkinleştirerek programın doğruluğu konusunda daha güçlü garantiler sağlayan önemli bir yapılandırma seçeneğidir.  Tsconfig dosyasında katı modun etkinleştirilmesi, maksimum tür güvenliğine ve daha iyi bir geliştirici deneyimine ulaşma yolunda önemli bir adımdır.  Tsconfig'i yapılandırmak biraz daha fazla çaba gerektirir, ancak projenizin kalitesini artırmada uzun bir yol kat edebilir.    derleyici seçeneği, diğerlerinin yanı sıra   ,   ,   dahil tüm katı mod ailesi seçeneklerini etkinleştirir. strict noImplicitAny strictNullChecks strictFunctionTypes  Bu seçenekler ayrı ayrı da yapılandırılabilir ancak hiçbirinin kapatılması önerilmez. Nedenini görmek için örneklere bakalım.  Örtülü Herhangi Bir Çıkarım   { "compilerOptions": { "noImplicitAny": true } }    tür, statik tür sisteminde tehlikeli bir boşluktur ve bunun kullanılması tüm tür denetimi kurallarını devre dışı bırakır. Sonuç olarak TypeScript'in tüm avantajları kaybolur: hatalar gözden kaçırılır, kod düzenleyici ipuçları düzgün çalışmayı durdurur vb. any    kullanılması yalnızca aşırı durumlarda veya prototip oluşturma ihtiyaçları için uygundur. En iyi çabalarımıza rağmen,   tür bazen dolaylı olarak kod tabanına gizlice girebilir. any any  Varsayılan olarak derleyici,   hatanın kod tabanında görünmesi karşılığında bizi birçok hatayı affeder. Spesifik olarak TypeScript, tür otomatik olarak çıkarılamasa bile değişkenlerin türünü belirtmememize olanak tanır. any  Sorun, yanlışlıkla bir değişkenin türünü (örneğin bir işlev argümanına) belirtmeyi unutabilmemizdir. TypeScript, bir hata göstermek yerine değişkenin türünü otomatik olarak   şekilde çıkaracaktır. any   function parse(str) { // ^? any return str.split(''); } // TypeError: str.split is not a function const res1 = parse(42); const res2 = parse('hello'); // ^? any    derleyici seçeneğinin etkinleştirilmesi, derleyicinin değişken türünün otomatik olarak   olarak çıkarıldığı tüm yerleri vurgulamasına neden olur. Örneğimizde TypeScript bizden fonksiyon argümanının tipini belirtmemizi isteyecektir. noImplicitAny any   function parse(str) { // ^ Error: Parameter 'str' implicitly has an 'any' type. return str.split(''); }  Türü belirttiğimizde TypeScript, bir sayıyı string parametresine geçirme hatasını hızlı bir şekilde yakalayacaktır.   değişkeninde saklanan fonksiyonun dönüş değeri de doğru türde olacaktır. res2   function parse(str: string) { return str.split(''); } const res1 = parse(42); // ^ Error: Argument of type 'number' is not // assignable to parameter of type 'string' const res2 = parse('hello'); // ^? string[]  Yakalama Değişkenlerinde Bilinmeyen Tür   { "compilerOptions": { "useUnknownInCatchVariables": true } }    yapılandırılması, try-catch bloklarındaki istisnaların güvenli bir şekilde işlenmesine olanak tanır. Varsayılan olarak TypeScript, catch bloğundaki hata türünün   olduğunu varsayar ve bu da hatayla ilgili her şeyi yapmamıza olanak tanır. useUnknownInCatchVariables any  Örneğin, yakalanan hatayı olduğu gibi   örneğini kabul eden bir günlük kaydı işlevine iletebiliriz. Error   function logError(err: Error) { // ... } try { return JSON.parse(userInput); } catch (err) { // ^? any logError(err); }  Ancak gerçekte hatanın türü hakkında hiçbir garanti yoktur ve gerçek türünü yalnızca hata oluştuğunda çalışma zamanında belirleyebiliriz. Günlük işlevi   olmayan bir şey alırsa, bu bir çalışma zamanı hatasıyla sonuçlanacaktır. Error  Bu nedenle,   seçeneği, hatayla ilgili   bir şey yapmadan önce hatanın türünü kontrol etmemizi bize hatırlatmak için hatanın türünü herhangi bir durumdan   değiştirir. useUnknownInCatchVariables any unknown   try { return JSON.parse(userInput); } catch (err) { // ^? unknown // Now we need to check the type of the value if (err instanceof Error) { logError(err); } else { logError(new Error('Unknown Error')); } }  Artık TypeScript,   işlevine aktarmadan önce   değişkeninin türünü kontrol etmemizi isteyecek, böylece daha doğru ve daha güvenli kod elde edeceğiz. Ne yazık ki bu seçenek,   işlevlerinde veya geri çağırma işlevlerindeki yazım hatalarında yardımcı olmaz. logError err promise.catch()  Ancak bir sonraki makalede bu gibi   başa çıkmanın yollarını tartışacağız. any  Çağrı ve Uygulama Yöntemlerini Kontrol Etme   { "compilerOptions": { "strictBindCallApply": true } }  Başka bir seçenek,   işlev içi çağrının görünümünü   ve   yoluyla düzeltir. Bu, ilk ikisine göre daha az görülen bir durumdur ancak yine de dikkate alınması önemlidir. Varsayılan olarak TypeScript bu tür yapılardaki türleri hiçbir şekilde denetlemez. any call apply  Örneğin, herhangi bir şeyi bir fonksiyona argüman olarak iletebiliriz ve sonunda her zaman   tipini alırız. any   function parse(value: string) { return parseInt(value, 10); } const n1 = parse.call(undefined, '10'); // ^? any const n2 = parse.call(undefined, false); // ^? any    seçeneğinin etkinleştirilmesi TypeScript'i daha akıllı hale getirir, böylece dönüş türü doğru bir şekilde   olarak anlaşılır. Ve yanlış türde bir argüman iletilmeye çalışıldığında TypeScript hatayı gösterecektir. strictBindCallApply number   function parse(value: string) { return parseInt(value, 10); } const n1 = parse.call(undefined, '10'); // ^? number const n2 = parse.call(undefined, false); // ^ Argument of type 'boolean' is not // assignable to parameter of type 'string'.  Yürütme Bağlamı için Katı Türler   { "compilerOptions": { "noImplicitThis": true } }  Projenizde   görünmesini engellemeye yardımcı olabilecek bir sonraki seçenek, işlev çağrılarında yürütme bağlamının işlenmesini düzeltir. JavaScript'in dinamik doğası, bir işlevin içindeki bağlamın türünü statik olarak belirlemeyi zorlaştırır. any  TypeScript, varsayılan olarak bu gibi durumlarda bağlam için   türünü kullanır ve herhangi bir uyarı sağlamaz. any   class Person { private name: string; constructor(name: string) { this.name = name; } getName() { return function () { return this.name; // ^ 'this' implicitly has type 'any' because // it does not have a type annotation. }; } }    derleyici seçeneğinin etkinleştirilmesi, bir işlevin bağlam türünü açıkça belirtmemizi isteyecektir. Böylece yukarıdaki örnekte   sınıfının   alanı yerine fonksiyon içeriğine erişme hatasını yakalayabiliriz. noImplicitThis Person name  TypeScript'te Boş ve Tanımsız Destek   { "compilerOptions": { "strictNullChecks": true } }    modda yer alan sonraki birkaç seçenek, kod tabanında   türün görünmesine neden olmaz. Ancak TS derleyicisinin davranışını daha katı hale getirirler ve geliştirme sırasında daha fazla hatanın bulunmasına izin verirler. strict any  Bu tür ilk seçenek TypeScript'te   ve   işlenmesini düzeltir. TypeScript, varsayılan olarak   ve   değerlerin herhangi bir tür için geçerli değerler olduğunu varsayar; bu da beklenmeyen çalışma zamanı hatalarına neden olabilir. null undefined null undefined    derleyici seçeneğinin etkinleştirilmesi, geliştiriciyi   ve   durumların oluşabileceği durumları açıkça ele almaya zorlar. strictNullChecks null undefined  Örneğin aşağıdaki kodu göz önünde bulundurun:   const users = [ { name: 'Oby', age: 12 }, { name: 'Heera', age: 32 }, ]; const loggedInUser = users.find(u => u.name === 'Max'); // ^? { name: string; age: number; } console.log(loggedInUser.age); // ^ TypeError: Cannot read properties of undefined  Bu kod hatasız derlenecektir ancak sistemde “Max” isimli kullanıcı mevcut değilse ve   fonksiyonu   döndürüyorsa çalışma zamanı hatası verebilir. Bunu önlemek için   derleyici seçeneğini etkinleştirebiliriz. users.find() undefined strictNullChecks  Artık TypeScript bizi,   tarafından döndürülen   veya   olasılığını açıkça ele almaya zorlayacak. users.find() null undefined   const loggedInUser = users.find(u => u.name === 'Max'); // ^? { name: string; age: number; } | undefined if (loggedInUser) { console.log(loggedInUser.age); }    ve   olasılığını açıkça ele alarak çalışma zamanı hatalarını önleyebilir ve kodumuzun daha sağlam ve hatasız olmasını sağlayabiliriz. null undefiined  Katı İşlev Türleri   { "compilerOptions": { "strictFunctionTypes": true } }    etkinleştirilmesi TypeScript'in derleyicisini daha akıllı hale getirir. Sürüm 2.6'dan önce TypeScript, işlev   değişkenlerinin çelişkisini kontrol etmiyordu. İşlev yanlış türde bir bağımsız değişkenle çağrılırsa bu, çalışma zamanı hatalarına yol açacaktır. strictFunctionTypes bağımsız  Örneğin, bir fonksiyon türü hem dizeleri hem de sayıları işleyebiliyor olsa bile, bu türe yalnızca dizeleri işleyebilen bir işlev atayabiliriz. Bu fonksiyona hala bir sayı iletebiliriz ancak çalışma zamanı hatası alırız.   function greet(x: string) { console.log("Hello, " + x.toLowerCase()); } type StringOrNumberFn = (y: string | number) => void; // Incorrect Assignment const func: StringOrNumberFn = greet; // TypeError: x.toLowerCase is not a function func(10);  Neyse ki,   seçeneğinin etkinleştirilmesi bu davranışı düzeltir ve derleyici bu hataları derleme zamanında yakalayabilir ve bize işlevlerdeki tür uyumsuzluğuna ilişkin ayrıntılı bir mesaj gösterebilir. strictFunctionTypes   const func: StringOrNumberFn = greet; // ^ Type '(x: string) => void' is not assignable to type 'StringOrNumberFn'. // Types of parameters 'x' and 'y' are incompatible. // Type 'string | number' is not assignable to type 'string'. // Type 'number' is not assignable to type 'string'.  Sınıf Özelliğini Başlatma   { "compilerOptions": { "strictPropertyInitialization": true } }  Son olarak,   seçeneği, değer olarak   içermeyen türler için zorunlu sınıf özelliği başlatma işleminin kontrol edilmesini sağlar. strictPropertyInitialization undefined  Örneğin, aşağıdaki kodda geliştirici   özelliğini başlatmayı unuttu. Varsayılan olarak TypeScript bu hatayı algılamaz ve çalışma zamanında bir sorun ortaya çıkabilir. email   class UserAccount { name: string; email: string; constructor(name: string) { this.name = name; // Forgot to assign a value to this.email } }  Ancak   seçeneği etkinleştirildiğinde TypeScript bu sorunu bizim için vurgulayacaktır. strictPropertyInitialization   email: string; // ^ Error: Property 'email' has no initializer and // is not definitely assigned in the constructor.  Güvenli Dizin İmzaları   { "compilerOptions": { "noUncheckedIndexedAccess": true } }    seçeneği   modun bir parçası değildir ancak projenizdeki kod kalitesini artırmanıza yardımcı olabilecek başka bir seçenektir. Dizin erişim ifadelerinin   veya   bir dönüş türüne sahip olup olmadığının kontrol edilmesini sağlar, bu da çalışma zamanı hatalarını önleyebilir. noUncheckedIndexedAccess strict null undefined  Önbelleğe alınmış değerleri depolamak için bir nesnemizin olduğu aşağıdaki örneği düşünün. Daha sonra anahtarlardan birinin değerini alıyoruz. Elbette istenilen anahtara ait değerin gerçekten önbellekte mevcut olduğuna dair bir garantimiz yoktur.  Varsayılan olarak TypeScript, değerin var olduğunu ve   türüne sahip olduğunu varsayar. Bu çalışma zamanı hatasına yol açabilir. string   const cache: Record<string, string> = {}; const value = cache['key']; // ^? string console.log(value.toUpperCase()); // ^ TypeError: Cannot read properties of undefined  TypeScript'te   seçeneğinin etkinleştirilmesi,   dönüş türü için dizin erişim ifadelerinin kontrol edilmesini gerektirir; bu, çalışma zamanı hatalarından kaçınmamıza yardımcı olabilir. Bu aynı zamanda bir dizideki öğelere erişim için de geçerlidir. noUncheckedIndexedAccess undefined   const cache: Record<string, string> = {}; const value = cache['key']; // ^? string | undefined if (value) { console.log(value.toUpperCase()); }  Önerilen Yapılandırma  Tartışılan seçeneklere bağlı olarak, optimum tür güvenliği için projenizin   dosyasında   ve   seçeneklerinin etkinleştirilmesi önemle tavsiye edilir. tsconfig.json strict noUncheckedIndexedAccess   { "compilerOptions": { "strict": true, "noUncheckedIndexedAccess": true, } }    seçeneğini zaten etkinleştirdiyseniz,   seçeneğinin kopyalanmasını önlemek için aşağıdaki seçenekleri kaldırmayı düşünebilirsiniz: strict strict: true   noImplicitAny   useUnknownInCatchVariables   strictBindCallApply   noImplicitThis   strictFunctionTypes   strictNullChecks   strictPropertyInitialization  Ayrıca tür sistemini zayıflatabilecek veya çalışma zamanı hatalarına neden olabilecek aşağıdaki seçeneklerin de kaldırılması önerilir:   keyofStringsOnly   noStrictGenericChecks   suppressImplicitAnyIndexErrors   suppressExcessPropertyErrors  Bu seçenekleri dikkatlice değerlendirip yapılandırarak TypeScript projelerinizde optimum tür güvenliğine ve daha iyi bir geliştirici deneyimine ulaşabilirsiniz.  Çözüm  TypeScript, derleyicisini ve yazım sistemini sürekli geliştirerek evriminde uzun bir yol kat etti. Ancak geriye dönük uyumluluğu sürdürmek için TypeScript yapılandırması, tür denetiminin kalitesini önemli ölçüde etkileyebilecek birçok seçenekle birlikte daha karmaşık hale geldi.  Bu seçenekleri dikkatlice değerlendirip yapılandırarak TypeScript projelerinizde optimum tür güvenliğine ve daha iyi bir geliştirici deneyimine ulaşabilirsiniz. Bir proje yapılandırmasında hangi seçeneklerin etkinleştirileceğini ve hangi seçeneklerin kaldırılacağını bilmek önemlidir.  Belirli seçenekleri devre dışı bırakmanın sonuçlarını anlamak, her biri için bilinçli kararlar vermenizi sağlayacaktır.  Kesin yazımın sonuçları olabileceğini akılda tutmak önemlidir. JavaScript'in dinamik doğasını etkili bir şekilde ele almak için, bir değişkenden sonra yalnızca "sayı" veya "dize" belirtmenin ötesinde TypeScript'i iyi anlamanız gerekir.  Ortaya çıkacak türle ilgili sorunları daha etkili bir şekilde çözmek için daha karmaşık yapılara ve TypeScript'in ilk kitaplık ve araç ekosistemine aşina olmanız gerekecektir.  Sonuç olarak kod yazmak biraz daha fazla çaba gerektirebilir ancak tecrübelerime dayanarak uzun vadeli projeler için bu çabaya değdiğini düşünüyorum.  Umarım bu makaleden yeni bir şeyler öğrenmişsinizdir. Bu bir serinin ilk bölümü. Bir sonraki makalede TypeScript'in standart kitaplığındaki türleri iyileştirerek daha iyi tür güvenliği ve kod kalitesine nasıl ulaşabileceğimizi tartışacağız. Bizi izlemeye devam edin ve okuduğunuz için teşekkürler!  kullanışlı bağlantılar   TSConfig referansı   Her hangi bir tür   Boş ve Tanımsız

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story will praise and/or roast a product, company, service, game, or anything else people like to review on the Internet.

TypeScript'in Gücünü Ortaya Çıkarma: tsconfig'te Önemli Hususlar

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Sulara Yelken Açmak: Data Lakes ile Üretim Sınıfında RAG Uygulamaları Geliştirme

Dijital Göçebeler Dinleyin: Tayland'ın Yeni DTV Vizesi Hakkında Bilmeniz Gerekenler

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Sulara Yelken Açmak: Data Lakes ile Üretim Sınıfında RAG Uygulamaları Geliştirme

Dijital Göçebeler Dinleyin: Tayland'ın Yeni DTV Vizesi Hakkında Bilmeniz Gerekenler

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps