Statik analiz

Statik analiz, verilerinizin otomatik olarak kontrol edilmesini sağlayan bir test türüdür. veya otomatik test yazmak zorunda kalmadan tek bir kod yazın. Başardınız VSCode gibi bir IDE kullanıyorsanız, bu tür bir testle karşılaşmış olabilirsiniz. TypeScript tarafından gerçekleştirilen kontrol bir tür statik analizdir ve ve uyarıların altındaki kıvrımlı çizgilere dönüştürülür.

ESLint

ESLint, kurumunuzdaki olası sorunlar hakkında geri bildirim verebilecek kullanabilirsiniz. Bu sorunlar güvenli olabilir,ancak hatalar veya standart olmayan davranışlar olabilir yaşayabilirsiniz. ESLint, kontrol edilmiş çok sayıda kuralı uygulamanıza kod tabanınıza da ("önerilir" bölümündeki birçok ayarlandı.

ESLint kuralına iyi bir örnek olarak no-unsafe-finally kuralı. Bu, programınızın özelliklerini değiştiren ifadeler yazmanıza finally bloğundaki akışı kontrol edebilir. Bu harika bir kuraldır çünkü bunu yaptığınızda takip edilmesi zor olabilen JavaScript yazmanın alışılmadık bir yoludur. Ancak, aynı zamanda sağlıklı bir kod inceleme sürecinin algılayabilmesi gereken bir unsurdur.

  try {
    const result = await complexFetchFromNetwork();
    if (!result.ok) {
      throw new Error("failed to fetch");
    }
  } finally {
    // warning - this will 'overrule' the previous exception!
    return false;
  }

Bu nedenle ESLint, sağlıklı bir inceleme sürecinin (ve kılavuzudur, çünkü bu kod tabanınızın nasıl görünmesi gerektiğini tanımlayan bir kılavuzdur.) bir geliştiricinin uygulamaya çalışabileceği her türlü standart dışı yaklaşımı yakalamak için kod tabanınıza gönderebilirsiniz. Google'ın Mühendislik Uygulamaları kılavuzunda "işleri basit tutma" ile ilgili kısa bir bölüm bulunur.

ESLint, bir kuralı çiğnemenize ve koda "izin verildi" olarak ek açıklama eklemenize olanak tanır. Örneğin, aşağıdaki gibi not ekleyerek önceki mantığa izin verebilir:

  finally {
    // eslint-disable-next-line no-unsafe-finally
    return false;
  }

Bir kuralı sürekli olarak ihlal ediyorsanız onu devre dışı bırakmayı düşünebilirsiniz. Bu araçlar sizi belirli bir şekilde kod yazmanızı teşvik eder, ancak ekibiniz farklı bir şekilde kod yazmaya başlayın ve bunu yapmanın risklerinin farkında olun. bahsedeceğiz.

Son olarak, statik analiz araçlarını büyük bir kod tabanında etkinleştirmek, işe yarayan kodlar üzerinde yardımcı olmayan gürültü (ve yeniden düzenleme için yapılan yorucu çalışmalar) tamamdır. Bu nedenle proje yaşam döngüsünün erken aşamalarında etkinleştirme yapmak daha kolaydır.

Tarayıcı desteği için ESLint eklentileri

ESLint'e, geniş çapta yaygın olmayan API'lerin kullanımını işaretleyen bir eklenti ekleyebilirsiniz. hedef tarayıcı listeniz tarafından desteklenen veya desteklenmeyen bir web sitesini ziyaret edin. İlgili içeriği oluşturmak için kullanılan eslint-eklentisi-uyumlu paketinin kullanıcılarınıza API sunulmayabileceği durumlarda sizi uyarabilir. Bu nedenle, ve takip etmeniz gerekmez.

Statik analiz için tür kontrolü

JavaScript'i öğrenirken, yeni geliştiriciler genellikle yavaş şekilde yazılmış bir dil olduğundan emin olun. Yani, doğrudan bir değişkenini bir tür olarak kullanmak istiyorsanız, bir öğe için aynı konumu yardımcı olur. Bu, Python ve diğer kodlama dillerine benzer ancak C/C++ ve Rust gibi derlenen dillerdir.

Bu tür bir dil başlamak için iyi olabilir ve muhtemelen bu, JavaScript'i bu kadar popüler yapan basitlik ama genellikle bir hata veya en azından kafa karıştırıcı hatalara imkan veren bir yapılandırma olur. Örneğin, string veya nesne türünün olduğu bir number ileterek yanlış yazılan değer, birçok farklı veri kaynağına uygulanabilecek kitaplıklarını düzelterek karmaşaya neden olan bir TypeError sağlayın.

TypeScript

TypeScript, JavaScript'in yazma eksikliğine yönelik en yaygın çözümdür ekleyebilirsiniz. Bu kursta kapsamlı olarak kullanılmaktadır. Bu bir kurs almasanız da size sağladığımız için çok önemli olduğu için TypeScript, statik analize dayanır.

Örnek vermek gerekirse, bu kod, string ad ve number yaş:

const callback = (name: string, age: string): void => {
  console.info(name, 'is now', age, 'years old!');
};
onBirthday(callback);

TypeScript ile çalıştırıldığında veya fareyle üzerine gelindiğinde aşağıdaki hatayı oluşturur devreye girer:

bad.ts:4:12 - error TS2345: Argument of type '(name: string, age: string) => void' is not assignable to parameter of type '(name: string, age: number) => void'.
  Types of parameters 'age' and 'age' are incompatible.
    Type 'number' is not assignable to type 'string'.

4 onBirthday(callback);
             ~~~~~~~~

Found 1 error in bad.ts:4

Bu kod,
önceki örnek, IDE'de (Entegre Geliştirme Ortamında)
bir pop-up ile karşılaşacaksınız. — Yanlış bir yazın.

Sonuç olarak TypeScript kullanmanın amacı bunun gibi hataları önlemektir: yaşınızın string değil, number olması gerekir. Bu gibi testler, diğer test türlerini kullanarak tespit etmek zor olabilir. Ayrıca tür sistemi, daha test yazılmadan önce geri bildirimde bulunabilir. Bu, size erken geri bildirim sağlayarak kod yazma sürecini kolaylaştırabilir kod yazmak yerine yazılım geliştirirken yürütülmesidir.

TypeScript kullanmanın en zor kısmı, onu doğru şekilde ayarlamaktır. Hepsini proje, birincil olarak tsc tarafından kullanılan bir tsconfig.json dosyasına ihtiyaç duyuyor VSCode gibi IDE'ler ve diğer birçok IDE'ler tarafından da geliştirme araçları ve araçları geliştirebilirsiniz. Bu dosyada yüzlerce seçenekleri ve işaretleri bulabilirsiniz. Bu özelliği ayarlamak için yararlanabileceğiniz bazı kaynakları şurada bulabilirsiniz:

Genel TypeScript ipuçları

TypeScript'i ayarlarken ve bir tsconfig.json dosyası aracılığıyla kullanırken şunları göz önünde bulundurun:

Kaynak dosyalarınızın gerçekten dahil edildiğinden ve kontrol edildiğinden emin olun. Dosya bunun nedeni muhtemelen dosyanın kontrol edilmemesidir.
Bunun yerine, .d.ts dosyalarındaki türleri ve arayüzleri açık bir şekilde açıklamak siz fonksiyon yazarken bunların dolaylı olarak açıklanması, kod tabanını test etmek daha kolaydır. Alıştırma ve "sahte" yazmak daha kolaydır sürümleri kodunu girmeniz gerekir. .

TypeScript örtülü herhangi bir

TypeScript'in en güçlü ve değerli yapılandırma seçeneklerinden biri noImplicitAny işareti. Ancak bunu etkinleştirmek genellikle en zor olanıdır. Özellikle de büyük bir kod tabanınız varsa. (noImplicitAny işareti strict modundaysanız varsayılan olarak etkindir.)

Bu işaret, işlevin hata döndürmesini sağlar:

export function fibonacci(n) {
  if (n <= 1) {
    return 0;
  } else if (n === 2) {
    return 1;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

Yine de, okuyucu olarak n değerinin bir sayı olması gerektiği açıktır. TypeScript bunu kesin olarak onaylayamaz. VSCode kullanıyorsanız fareyle üzerine gelin işlev bu değeri şu şekilde açıklar:

function fibonacci(n: any): any

Bu işlevin çağıranları, any türünde bir değer geçirebilir (başka türlere izin veren bir tür), yalnızca number değil. noImplicitAny işaretini görüyorsanız geliştirme sırasında bu tür kodları koruyabilirsiniz. kod iletme işlemleriniz için kapsamlı iş mantığı testleri yazmanıza gerek kalmadan yanlış veri türlerini ölçebilir.

Buradaki basit çözüm hem n bağımsız değişkenini hem de fibonacci dönüş türünü number olarak işaretlemektir.

noImplicitAny işareti, any kodunu açıkça yazmanıza engel olmaz kod tabanınız içindir. Yine de alan adını kabul eden veya döndüren bir işlev yazabilirsiniz any türü. Yalnızca her değişkene bir tür vermenizi sağlar.