JavaScript araçları Flow ve TypeScript birçok yönden benzerdir. Ancak, statik dama olarak işlevleri ve yetenekleri bakımından farklılık gösterirler.
Flow ve TypeScript'in nasıl karşılaştırıldığını ve bir sonraki projeniz için hangisinin en iyi statik denetleyici olduğunu öğrenin.
Akış Nedir?
Flow, derleme ve çalışma zamanı kod hatalarını önceden belirlemek için Facebook tarafından oluşturulmuş, JavaScript için statik bir tür denetleme aracıdır. Bunu, kodunuzun geçtiği değerleri ve veri türlerinin zaman içinde nasıl değiştiğini izleyerek yapar. Bu statik kontrol sistemi, güvenilirliği ve okunabilirliği artırır. Ayrıca, JavaScript kodunuzdaki hataların oluşumunu azaltmaya yardımcı olur.
TypeScript Nedir?
TypeScript, Flow gibi yalnızca bir tür denetleyicisi değil, kesin olarak yazılmış bir programlama dilidir. Microsoft, dili JavaScript'in üzerine inşa ederek oluşturdu.
Geleneksel olarak, .ts dosya uzantılı TypeScript dosyaları oluşturmalısınız. Bir TypeScript dosyasını JavaScript kodunda derleyebilirsiniz, böylece JavaScript'in çalıştığı her yerde TypeScript de çalışabilir.
JavaScript Uygulamanız için Akışı Yapılandırma
Flow'u, projeniz için kullanmaya karar verdiğiniz herhangi bir JavaScript çerçevesine entegre edebilirsiniz. Kodunuzdaki tüm akış türlerini işlemek ve onu normal JavaScript'te derlemek için Babel gibi bir JavaScript derleyicisi yapılandırmış olmanız gerekir.
Flow'u projenize yüklemek için aşağıdaki komutu çalıştırın:
iplik eklemek --dev akış kutusu
Ardından, genel olarak Flow komut satırı arayüzünü kurmalısınız. Bu CLI, akış uygulamaları oluşturmak için çeşitli komutlar sağlar.
macOS'ta şunu kullanın: ev yapımı bira Flow CLI'yi yüklemek için:
demlemek düzenlemek akış-cli
bilmen gerekecek Windows PowerShell nasıl kullanılır Flow'u bir Windows makinesine yüklemek için.
Flow CLI'yi Windows'a yüklemek için bu betiği PowerShell terminalinizde çalıştırın:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Akış projeleri bir .flowconfig aracın tüm gerekli yapılandırmaları için dosya.
Yeni veya mevcut bir projede bir Akış yapılandırma dosyası oluşturmak için bu komutu çalıştırın:
npm akış başlangıcını çalıştır
Belirli çerçevelerin projeleri varsayılan olarak bir Akış yapılandırma dosyasıyla gönderebileceğini unutmayın.
Yapılacak son şey, Akış komut dosyasını paket.json dosya:
"Kodlar": {
"akış": "akış"
},
Artık Flow'u JavaScript uygulamanızda çalışacak şekilde başarıyla yapılandırdınız.
Projenizde TypeScript Kurulumu
TypeScript'i projenize yüklemek için aşağıdaki komutu çalıştırın:
npm düzenlemek daktilo yazısı --save-dev
TypeScript kodunu vanilya JavaScript'te derlemek için derleyiciyi de kurmalısınız. Ayrıca ihtiyacınız olabilir daha iyi bir iş akışı için TypeScript yapılandırmasını ayarlayın deneyim.
TypeScript derleyicisini şu komutla global olarak kurun:
npm düzenlemek -g daktilo
bir başlatmak için tsconfig.json config dosyası, terminalinize aşağıdaki komutu girin:
tsc --içinde
Yukarıdaki talimatlar, projenizde TypeScript kullanmaya başlamanızı sağlayacaktır.
Akışlı Bina
Bir JavaScript dosyasına Akış kodu yazmak için, herhangi bir ifade veya ifadeden önce kodun en üstünde Akış sözdizimini bildirin:
// @akış
Ek açıklamayı kullanarak değişken ve işlev veri türlerini ayarlayabilirsiniz. Beklenen tip karşılanmazsa akış bir hata verir.
Örneğin:
// @akış
foo olsun: sayı = "Merhaba";
Akış, beklenen değer türü nedeniyle burada bir hata atar. foo bir dizi değil, bir sayıdır.
Koşmak npm çalıştırma akışı terminaldeki hata çıktısını görmek için:
Flow uzantısını seçtiğiniz herhangi bir metin düzenleyicide etkinleştirmek, siz kod yazarken düzenleyicinizdeki hataları gösterecektir.
Akış, bir ifadenin beklenen değerinin ne olması gerektiğini belirlemek için tür çıkarımını da kullanır.
Örneğin:
// @akış
işlevbir şey yap(değer) {
geri dönüş değeri * "Merhaba";
};
izin vermek sonuç = birşey yap(6);
Altı sayısı ile dizi arasında aritmetik işlemler yapamazsınız. Merhaba.
çıktısı npm çalıştırma akışı bir hata olacak:
TypeScript ile Geliştirme
TypeScript'in tür sözdizimi, Flow'unkine çok benzer. Tıpkı Flow'da yaptığınız gibi tip notu ile değişken ve fonksiyon tiplerini tanımlayabilirsiniz.
TypeScript, tür çıkarımı gibi Flow'a benzer birkaç başka özellikle birlikte gelir.
Örnek TypeScript kodunu alın:
// TypeScript.ts
yazın Sonuç = "geçmek" | "hata"
işlevdoğrulamak(sonuç: sonuç) {
eğer (sonuç "geçmek") {
konsol.log("Geçti")
} başka {
konsol.log("Arızalı")
}
}
Koşabilirsin tsc TypeScript.ts bu kodu düz vanilya JavaScript'te derlemek için.
Bu, vanilya JavaScript'te derlenen aynı TypeScript kodu olacaktır:
işlevdoğrulamak(sonuç) {
eğer (sonuç "geçmek") {
konsol.log("Geçti")
} başka {
konsol.log("Arızalı")
}
}
TypeScript ve Flow'un Artıları ve Eksileri
Artık JavaScript projenizde her iki aracı da kullanmaya nasıl başlayacağınızı biliyorsunuz. Her birini kullanmanın artılarını ve eksilerini bilmelisiniz.
Entegrasyon
Flow'u kullanmak için kurulum süreci, TypeScript'in aksine biraz daha karmaşıktır. Akış türlerini kodunuzdan çıkarmak için Babel veya flow-remove-types gibi bir JavaScript derleyicisi kurmanız gerekecek. TypeScript, TypeScript kodunu JavaScript'e dönüştürmek için bir derleyici içerir ve entegrasyonu kolaylaştırır.
TypeScript çok daha iyi araçlara sahiptir ve çoğu JavaScript çerçevesi bunu varsayılan olarak destekler. Çoğu popüler IDE, TypeScript için birinci sınıf destek sağlar. Akış da desteklenir ancak özel bir eklenti gerektirir.
Toplum
Flow'dan farklı olarak React, React Native, Vue ve Angular gibi JavaScript çerçeveleri TypeScript'i kutudan çıktığı gibi destekler.
Bu yaygın benimseme ve geniş topluluk, daha iyi öğrenme kaynakları, güncellemeler ve araç desteği sağlar.
Esneklik
Flow, potansiyel olarak hatalı kod hakkında sizi uyarmak için çalışan bir tür denetleyicisi görevi görür. TypeScript kötü kod yazmanızı engeller ve katı bir yazım sistemine sahiptir. TypeScript ayrıca destekler karmaşık kodu yönetilebilir tutmaya yardımcı olan nesne kapsülleme. Akışın bu özelliği yoktur.
Hizmetler
TypeScript, kodu yeniden düzenleme ve otomatik tamamlama gibi tüm JavaScript dil hizmetlerini sağlar. Flow, yazılı kodunuzun derinlemesine anlaşılmasını ve analiz edilmesini sağlayan statik bir tür denetleyicisidir.
Flow, projenizin içe aktarılan modüllerine ve kitaplıklarına kadar çalışabilir ve bunların kodunuzu nasıl etkilediğini ayırt edebilir. Örneğin, projenizde gerekli bir kitaplık eksik olduğunda veya var olmayan bir tanıma erişmeye çalıştığınızda bunu algılayıp uyarı verebilir.
Hangi Statik Denetleyiciyi Kullanmalısınız?
Her birinin farklı özellikleri olduğundan, her aracı kullanmak için birçok geçerli argüman vardır. Bazıları, bir geliştirici için en yüksek önceliğe sahip olabilir ve diğeri için düşük önceliğe sahip olabilir. Her iki araç da kendi açılarından iyi çalışır ve bunları kullanmak için avantajlar sunar.
Projenizin gereksinimlerini incelemeli ve bunlara göre eğitimli bir karar vermelisiniz.
