giriiş

Aşağıdaki örneği göz önünde bulundurun:

 const organizasyon = {}
organizasyon.name = "Logrocket"

Bu görünüşte zararsız kod parçası, organization nesnesine dinamik olarak name atandığında bir TypeScript hatası veriyor.

Bir nesneye dinamik olarak bir özellik atanırken bir hata atılıyor
Bir nesneye dinamik olarak bir özellik atanırken bir hata atılıyor

TypeScript Playground'daki bu örneğe bakın.

TypeScript'e yeni başlayan biriyseniz, belki de haklı olarak haklı olan kafa karışıklığının kaynağı şudur: Bu kadar basit görünen bir şey TypeScript'te nasıl bu kadar sorun olabilir?

Tüm bunların TL; DR'si, bildirim zamanında değişken türünü tanımlayamazsanız, bunu çözmek için Record yardımcı programı türünü veya bir nesne dizin imzasını kullanabilirsiniz. Ancak bu yazıda, sorunun kendisini inceleyeceğiz ve çoğu durumda çalışması gereken bir çözüme doğru çalışacağız.

İleri atla:

Nesnelere dinamik olarak özellik atama sorununu anlama

Genel olarak, TypeScript, bir değişken bildirildiğinde türünü belirler ve bu belirlenen tür değişmez, yani uygulamanız boyunca aynı kalır.

Bu kuralın, tür daraltmayı düşünürken veya any türle çalışırken olduğu gibi istisnaları vardır, ancak bu, aksi halde hatırlanması gereken genel bir kuraldır.

Önceki örnekte, organization nesnesi şu şekilde bildirilir:

 const organizasyon = {}

organization değişkenine atanmış açık bir tür yoktur, bu nedenle TypeScript, bildirime dayalı olarak bir organization türü çıkarsadı {} , yani, değişmez boş nesne.

Örneğin, bir tür takma adı eklerseniz, organization türünü keşfedebilirsiniz:

 type Org = typeof organizasyon
Değişmez nesne türünü keşfetme
Değişmez nesne türünü keşfetme

Bunu TypeScript Playground'da görün.

Daha sonra bu boş nesne değişmezinde prop name başvurmaya çalıştığınızda:

 kuruluş.name = ...

TypeScript bağırır.

'ad' özelliği ' {} ' türünde mevcut değil

Sorunu anladığınızda, hata uygun görünüyor.

Bunu düzeltelim.

sorunu çözme

TypeScript hatasını burada çözmenin birçok yolu vardır. Bunları düşünelim:

Çözüm 1: Nesneyi bildirim zamanında açıkça yazın

Bu, akıl yürütmenin en kolay çözümüdür. Nesneyi ilan ettiğinizde, devam edin ve yazın. Ayrıca, tüm ilgili değerleri atayın.

 kuruluş türü = {
    isim: dize
}

const organizasyon: Org = {
    isim: "Logrocket"
}

Bunu TypeScript Playground'da görün.

Bu, herhangi bir sürprizi ortadan kaldırır. Bu nesne türünün ne olduğunu açıkça belirtiyorsunuz ve nesneyi oluşturduğunuzda tüm ilgili özellikleri haklı olarak beyan ediyorsunuz.

Ancak, nesne özelliklerinin dinamik olarak eklenmesi gerekiyorsa bu her zaman mümkün değildir, bu yüzden hepimiz buradayız.

2. Çözüm: Bir nesne dizini imzası kullanın

Bazen, nesnenin özelliklerinin, bildirildikten sonra bir anda eklenmesi gerekir. Bu durumda, nesne dizini imzasını aşağıdaki gibi kullanabilirsiniz:

 type Org = {[anahtar: dize] : dize}
const organizasyon: Org = {}
organizasyon.name = "Logrocket"

Bunu TypeScript Playground'da görün.

organization değişkeni bildirildiğinde, devam edebilir ve onu açıkça şu {[key: string] : string} olarak yazabilirsiniz.

Sözdizimini daha fazla açıklamak için, sabit özellik türlerine sahip nesne türlerine alışmış olabilirsiniz:

 nesne yazın = {
  isim: dize
}

Ancak, bir "değişken türü" yerine name de koyabilirsiniz.

Örneğin, obj üzerinde herhangi bir string özelliği tanımlamak istiyorsanız:

 nesne yazın = {
 [anahtar: dize]: dize
}

Sözdiziminin, standart JavaScript'te bir değişken nesne özelliğini nasıl kullandığınıza benzer olduğunu unutmayın:

 const değişken = "ad" 
sabit nesne = {
   [değişken]: "Freecodecamp"
}

TypeScript eşdeğeri, nesne dizini imzası olarak adlandırılır. Ayrıca, key diğer temel öğelerle birlikte yazabileceğinizi unutmayın:

 // sayı 
tür Org = {[anahtar: sayı] : dize}

// sicim 
type Org = {[anahtar: dize] : dize}

// boole
type Org = {[key: boolean] : string}

3. Çözüm: Record yardımcı programı türünü kullanın

Record yardımcı programı türü , özellikleri Keys ve özellik değerleri Type olan bir nesne türünü daraltmanıza olanak tanır. Aşağıdaki imzaya sahiptir: Record<Keys, Type> .

Örneğimizde Keys , string ve Type , string de temsil eder. Buradaki çözüm, aşağıda gösterildiği gibi oldukça kısadır:

 type Org = Record<string, string>

const organizasyon: Org = {}

organizasyon.name = "Logrocket"

Bir tür takma adı kullanmak yerine, türü satır içine de yerleştirebilirsiniz:

 const organizasyonu: Record<string, string> = {}
Kayıt yardımcı programı türünü kullanma
Record yardımcı programı türünü kullanma

Bunu TypeScript Playground'da görün.

Çözüm

İlkellerin dışında, uğraşmanız gereken en yaygın türler muhtemelen nesne türleridir.
Dinamik olarak bir nesne oluşturmanız gereken durumlarda, nesne üzerinde izin verilen özellikleri tanımlamak için Record yardımcı programı türünden yararlanın veya nesne dizin imzasını kullanın.

Bu konuyla ilgili daha fazla bilgi edinmek isterseniz, Stack Overflow'ta en çok sorulan yedi TypeScript sorusuyla ilgili hile sayfama göz atmaktan veya herhangi bir soruyu tweetlemekten çekinmeyin. Şerefe!

TypeScript'te bir nesneye dinamik olarak özellikler nasıl atanır yazısı ilk olarak LogRocket Blog'da göründü.