Typecript'te her zaman .ts yerine .tsx kullanmanın herhangi bir dezavantajı var mı?

TypeScript ile bir React projesi üzerinde çalışmaya başlıyorum ve kendime normal sınıf dosyalarıyla ne yapmalıyım? .tsVeya .tsxfiles kullanmalı mıyım ve sonra .tsxbir React projesi olmasa bile dosyayı her zaman kullanmamak için bir neden bulamadım !

.tsxDosyaları kullanmamamız için herhangi bir sebep veya belirli bir durum var mı? hayır ise, TypeScript ekibi neden tamamen yeni uzantı ekledi?

Bunun tsxyerine tsçok az farkla kullanabilirsiniz. tsxaçık bir şekilde jsxtypecript içindeki etiketlerin kullanımına izin verir , ancak bu tsx'i biraz farklı kılan bazı ayrıştırma belirsizliklerini ortaya çıkarır. Tecrübelerime göre bu farklılıklar çok büyük değil:

<>Bir jsx etiketinin işaretçisi olduğundan, tür iddiaları çalışmaz.

Typescript, tür iddiaları için iki sözdizimine sahiptir. İkisi de aynı şeyi yapıyor ama biri tsx'de kullanılabilir, diğeri değil:

let a: any;
let s = a as string // ok in tsx and ts
let s2 = <string>a // only valid in ts

Ben kullanmak istiyorsunuz asyerine <>de tstutarlılık için de dosyalar. asçünkü aslında daktilo tanıtıldı <>içinde kullanışlı değilditsx

Kısıtlama içermeyen genel ok işlevleri doğru şekilde ayrıştırılmıyor

Aşağıdaki ok fonksiyonu içinde tamam tsama bir hata tsxolarak <T>bir etiket başlangıcı olduğu gibi yorumlanırtsx

 const fn = <T>(a: T) => a

Bir sınırlama ekleyerek veya bir ok işlevi kullanmayarak bunu aşabilirsiniz:

 const fn = <T extends any>(a: T) => a
 const fn = <T,>(a: T) => a // this also works but looks weird IMO
 const fn = function<T>(a: T) { return a;}

Not

Ts yerine tsx kullanabilirsiniz, ancak buna karşı tavsiye ederim. Konvansiyon güçlü bir şeydir, insanlar ilişki tsxkurar jsxve muhtemelen herhangi bir jsxetiketiniz olmadığına şaşıracaklar , en iyisi geliştirici sürprizini minimumda tutun.

Yukarıdaki belirsizlikler (muhtemelen tam bir liste olmasa da) büyük olmamakla birlikte, tsdosyaları geriye dönük uyumlu tutmak için yeni sözdizimi için özel bir dosya uzantısı kullanma kararında büyük bir rol oynadılar .

xJavaScript'iniz JSX Harmonymoddayken sonunda kullanmak için bir tür kuraldır. Yani, bu geçerli olduğunda:

doSomething(<div>My div</div>);

Ancak, ön işlemcileriniz kararınızdan haberdar olduğu sürece dosya uzantınızın pek bir önemi yoktur (tarayıcı doğrulama veya web paketi). Birincisi, .jstüm JavaScript'im için React olduklarında bile kullanıyorum. Aynısı TypeScript için de geçerlidir ts/tsx.

DÜZENLE

Şimdi, React sözdizimi ile Javascript için JSX ve React ile TypeScript için TSX kullanılmasını şiddetle tavsiye ediyorum çünkü çoğu editör / IDE, uzantıyı React sözdizimini etkinleştirmek veya kullanmamak için kullanacaktır. Ayrıca daha anlamlı olduğu düşünülmektedir.

.Jsx uzantısının kullanılmasının nedeni, JSX'in JS sözdiziminin bir uzantısı olması ve bu nedenle .jsx dosyalarının geçerli JavaScript içermemesidir.

TypeScript, .ts ve .tsx uzantılarını tanıtarak aynı kuralı izler. Pratik bir fark, <Type>sözdiziminin JSX etiketleriyle çakışması nedeniyle .tsx'in tür iddialarına izin vermemesidir. as Typeİddialar, <Type>hem .ts hem de .tsx'te tutarlılık nedenlerinden dolayı tercih edilen bir seçenek olarak kabul edildi ve yerine getirildi. .Ts dosyasındaki kodun .tsx dosyasında kullanılması <Type>durumunda düzeltilmesi gerekecektir.

.Tsx uzantısının kullanılması, bir modülün React ile ilişkili olduğu ve JSX sözdizimini kullandığı anlamına gelir. Aksi takdirde, uzantı modül içeriği ve projedeki rol hakkında yanlış izlenim verebilir, bu, varsayılan olarak .tsx uzantısının kullanılmasına karşı olan argümandır.

Öte yandan, bir dosya React ile ilişkiliyse ve bir noktada JSX'i içerme şansı yüksekse, daha sonra yeniden adlandırmayı önlemek için baştan .tsx olarak adlandırılabilir.

Örneğin, React bileşenleriyle birlikte kullanılan yardımcı program işlevleri, herhangi bir noktada JSX içerebilir ve bu nedenle .tsx adlarını güvenle kullanabilirken, Redux kod yapısının doğrudan React bileşenlerini kullanması beklenmez, React'ten ayrı olarak kullanılabilir ve test edilebilir. ve .ts adlarını kullanabilir.

.Tsx dosyalarıyla tüm JSX (JavaScript XML) kodunu kullanabileceğinizi düşünüyorum. Oysa .ts dosyasında yalnızca typcript kullanabilirsiniz.

.tsdosyalar <AngleBracket>, JSX dilbilgisi ile çelişen bir tür onaylama sözdizimine sahiptir. İnsanların bir ton kırma önlemek için, kullandığımız .tsxJSX için ve katma foo as Barhem izin verilir sözdizimi .tsve .tsxdosyalar.

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

Diğeri ise as-sözdizimi:

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

.Ts ile kullanabiliriz as-syntaxama <string>someValueharika!