Hemen hemen her veri serileştirmesi gerektirir. Bu ihtiyaç şu durumlarda ortaya çıkar: web uygulaması Ağ üzerinden veri aktarımı (örn. HTTP istekleri, WebSockets) Verileri HTML'ye gömme (örneğin nemlendirme için) Verileri kalıcı bir depolama alanında depolama (LocalStorage gibi) İşlemler arasında veri paylaşımı (web çalışanları veya postMessage gibi) Çoğu durumda, veri kaybı veya bozulması ciddi sonuçlara yol açabilir; bu da, geliştirme aşamasında mümkün olduğunca çok sayıda hatanın tespit edilmesine yardımcı olan kullanışlı ve güvenli bir serileştirme mekanizmasının sağlanmasını zorunlu hale getirir. Bu amaçlar doğrultusunda, veri aktarım formatı olarak ve geliştirme sırasında statik kod kontrolü için TypeScript'i kullanmak uygundur. JSON'u TypeScript, JavaScript'in bir üst kümesi olarak hizmet eder; bu, ve gibi işlevlerin kusursuz şekilde kullanılmasını sağlamalıdır, değil mi? Tüm avantajlarına rağmen TypeScript'in JSON'un ne olduğunu ve JSON'da serileştirme ve seri durumdan çıkarma için hangi veri türlerinin güvenli olduğunu doğal olarak anlamadığı ortaya çıktı. JSON.stringify JSON.parse Bunu bir örnekle açıklayalım. TypeScript'te JSON Sorunu Örneğin, bazı verileri LocalStorage'a kaydeden bir işlevi düşünün. LocalStorage nesneleri depolayamadığından burada JSON serileştirmesini kullanıyoruz: interface PostComment { authorId: string; text: string; updatedAt: Date; } function saveComment(comment: PostComment) { const serializedComment = JSON.stringify(comment); localStorage.setItem('draft', serializedComment); } Verileri LocalStorage'dan almak için de bir fonksiyona ihtiyacımız olacak. function restoreComment(): PostComment | undefined { const text = localStorage.getItem('draft'); return text ? JSON.parse(text) : undefined; } Bu kodun nesi yanlış? İlk sorun, yorumu geri yüklerken, alanı için yerine bir türü alacak olmamızdır. updatedAt Date string Bunun nedeni, JSON'un diziler ve nesnelerin yanı sıra yalnızca dört temel veri türüne ( , , , ) sahip olmasıdır. JSON'da bir nesnesinin yanı sıra JavaScript'te bulunan diğer nesnelerin (fonksiyonlar, Harita, Küme vb.) kaydedilmesi mümkün değildir. null string number boolean Date JSON biçiminde temsil edilemeyen bir değerle karşılaştığında tür dönüşümü gerçekleşir. nesnesi durumunda, bir dize elde ederiz çünkü nesnesi, nesnesi yerine bir dize döndüren yöntemini uygular. JSON.stringify Date Date Date toJson() const date = new Date('August 19, 1975 23:15:30 UTC'); const jsonDate = date.toJSON(); console.log(jsonDate); // Expected output: "1975-08-19T23:15:30.000Z" const isEqual = date.toJSON() === JSON.stringify(date); console.log(isEqual); // Expected output: true İkinci sorun, işlevinin, tarih alanının türünde olduğu türünü döndürmesidir. Ancak yerine tipini alacağımızı zaten biliyoruz. TypeScript bu hatayı bulmamıza yardımcı olabilir ama neden olmasın? saveComment Date PostComment Date string TypeScript'in standart kitaplığında işlevinin olarak yazıldığı ortaya çıktı. kullanımından dolayı tür kontrolü esasen devre dışı bırakılır. Örneğimizde TypeScript, fonksiyonun nesnesi içeren bir döndüreceği yönündeki sözümüzü aldı. JSON.parse (text: string) => any any Date PostComment Bu TypeScript davranışı uygunsuz ve güvensizdir. Bir dizeye nesnesi gibi davranmaya çalışırsak uygulamamız çökebilir. Örneğin, öğesini çağırırsak bozulabilir. Date comment.updatedAt.toLocaleDateString() Aslında küçük örneğimizde, nesnesini sayısal bir zaman damgasıyla değiştirebiliriz; bu, JSON serileştirmesinde işe yarar. Ancak gerçek uygulamalarda veri nesneleri kapsamlı olabilir, türler birden fazla konumda tanımlanabilir ve geliştirme sırasında bu tür bir hatayı belirlemek zorlu bir görev olabilir. Date TypeScript'in JSON anlayışını geliştirebilseydik ne olurdu? Serileştirmeyle Başa Çıkma Başlangıç olarak, TypeScript'in hangi veri türlerinin güvenli bir şekilde JSON'a serileştirilebileceğini anlamasını nasıl sağlayacağımızı bulalım. işlevini oluşturmak istediğimizi varsayalım; burada TypeScript, JSON'un serileştirilebilir olduğundan emin olmak için giriş veri biçimini kontrol edecektir. safeJsonStringify function safeJsonStringify(data: JSONValue) { return JSON.stringify(data); } Bu fonksiyonda en önemli kısım JSON formatında temsil edilebilecek tüm olası değerleri temsil eden tipidir. Uygulama oldukça basittir: JSONValue type JSONPrimitive = string | number | boolean | null | undefined; type JSONValue = JSONPrimitive | JSONValue[] | { [key: string]: JSONValue; }; Öncelikle tüm primitif JSON veri tiplerini açıklayan tipini tanımlıyoruz. Ayrıca seri hale getirildiğinde değere sahip anahtarların atlanacağı gerçeğine dayanarak türü de dahil ediyoruz. Seri durumdan çıkarma sırasında bu anahtarlar nesnede görünmez; çoğu durumda bu da aynı şeydir. JSONPrimitive undefined undefined Daha sonra tipini tanımlıyoruz. Bu tür, TypeScript'in kendilerine başvuran türler olan özyinelemeli türleri tanımlama yeteneğini kullanır. Burada bir , bir dizisi veya tüm değerlerin türünde olduğu bir nesne olabilir. Sonuç olarak, tipindeki bir değişken, sınırsız iç içe yerleştirmeye sahip diziler ve nesneler içerebilir. Bunların içindeki değerlerin JSON formatıyla uyumluluğu da kontrol edilecektir. JSONValue JSONValue JSONPrimitive JSONValue JSONValue JSONValue Artık aşağıdaki örnekleri kullanarak fonksiyonumuzu test edebiliriz: safeJsonStringify // No errors safeJsonStringify({ updatedAt: Date.now() }); // Yields an error: // Argument of type '{ updatedAt: Date; }' is not assignable to parameter of type 'JSONValue'. // Types of property 'updatedAt' are incompatible. // Type 'Date' is not assignable to type 'JSONValue'. safeJsonStringify({ updatedAt: new Date(); }); Her şey düzgün çalışıyor gibi görünüyor. Fonksiyon tarihi sayı olarak iletmemize izin veriyor ancak nesnesini iletirsek hata veriyor. Date Ancak, işleve aktarılan verilerin bir değişkende saklandığı ve tanımlanmış bir türe sahip olduğu daha gerçekçi bir örneği ele alalım. interface PostComment { authorId: string; text: string; updatedAt: number; }; const comment: PostComment = {...}; // Yields an error: // Argument of type 'PostComment' is not assignable to parameter of type 'JSONValue'. // Type 'PostComment' is not assignable to type '{ [key: string]: JSONValue; }'. // Index signature for type 'string' is missing in type 'PostComment'. safeJsonStringify(comment); Artık işler biraz çetrefilleşiyor. TypeScript, türündeki bir işlev parametresine türünde bir değişken atamamıza izin vermiyor çünkü "'PostComment' türünde 'string' türü için dizin imzası eksik". JSONValue PostComment Peki indeks imzası nedir ve neden eksik? JSON formatında serileştirilebilecek nesneleri nasıl tanımladığımızı hatırlıyor musunuz? type JSONValue = { [key: string]: JSONValue; }; Bu durumda, dizin imzasıdır. Bu, "bu nesnenin, değerleri türüne sahip olan dize biçiminde herhangi bir anahtara sahip olabileceği" anlamına gelir. türüne bir dizin imzası eklememiz gerektiği ortaya çıktı, değil mi? [key: string] JSONValue PostComment interface PostComment { authorId: string; text: string; updatedAt: number; // Don't do this: [key: string]: JSONValue; }; Bunu yapmak, yorumun herhangi bir rastgele alan içerebileceği anlamına gelir; bu, bir uygulamada veri türlerini tanımlarken genellikle istenen sonuç değildir. Dizin imzasıyla ilgili sorunun gerçek çözümü, tanımlanmış bir dizin imzası olmayan türler için bile alanlar üzerinde yinelemeli olarak yineleme yapılmasına olanak tanıyan gelir. Jeneriklerle birleştirildiğinde bu özellik, herhangi bir veri türünün JSON biçimiyle uyumlu başka bir türüne dönüştürülmesine olanak tanır. Eşlenen Türler'den T JSONCompatible<T> type JSONCompatible<T> = unknown extends T ? never : { [P in keyof T]: T[P] extends JSONValue ? T[P] : T[P] extends NotAssignableToJson ? never : JSONCompatible<T[P]>; }; type NotAssignableToJson = | bigint | symbol | Function; türü, belirli bir türünün JSON'a güvenli bir şekilde serileştirilip serileştirilmeyeceğini denetleyen eşlenmiş bir türdür. Bunu, tipindeki her özelliği yineleyerek ve aşağıdakileri yaparak yapar: JSONCompatible<T> T T koşullu tür, özelliğin türünün türüyle uyumlu olup olmadığını doğrulayarak, güvenli bir şekilde JSON'a dönüştürülebilmesini sağlar. Bu durumda mülkün türü değişmeden kalır. T[P] extends JSONValue ? T[P] : ... JSONValue koşullu tür, özelliğin türünün JSON'a atanabilir olup olmadığını doğrular. Bu durumda, özelliğin türü, özelliğin son türden etkili bir şekilde filtrelenmesi için biçimine dönüştürülür. T[P] extends NotAssignableToJson ? never : ... never Bu koşullardan hiçbiri karşılanmıyorsa, bir sonuca varılana kadar tür yinelemeli olarak kontrol edilir. Bu şekilde, türün bir dizin imzası olmasa bile çalışır. başlangıçta check türün, esasen türe eşdeğer olan boş bir nesne türü ye dönüştürülmesini önlemek için kullanılır. unknown extends T ? never :... unknown any {} Bir başka ilginç yön de türüdür. İki TypeScript temel öğesinden (bigint ve sembol) ve olası herhangi bir işlevi açıklayan türünden oluşur. türü, JSON'a atanamayan değerlerin filtrelenmesinde çok önemlidir. Bunun nedeni, JavaScript'teki herhangi bir karmaşık nesnenin Object türünü temel alması ve prototip zincirinde en az bir işleve sahip olmasıdır (örneğin, ). türü tüm bu işlevleri yineler; dolayısıyla işlevlerin kontrol edilmesi, JSON'a serileştirilemeyen herhangi bir şeyi filtrelemek için yeterlidir. NotAssignableToJson Function Function toString() JSONCompatible Şimdi bu türü serileştirme fonksiyonunda kullanalım: function safeJsonStringify<T>(data: JSONCompatible<T>) { return JSON.stringify(data); } Artık işlev genel bir parametresi kullanıyor ve bağımsız değişkenini kabul ediyor. Bu, JSON uyumlu bir tür olması gereken türünde bir bağımsız değişken aldığı anlamına gelir. Artık fonksiyonu indeks imzası olmayan veri türleriyle kullanabiliriz. T JSONCompatible<T> T data İşlev artık türünden uzanan genel bir parametresi kullanıyor. Bu, JSON uyumlu bir tür olması gereken türünde bir bağımsız değişken kabul ettiği anlamına gelir. Sonuç olarak fonksiyonu indeks imzası olmayan veri tipleriyle kullanabiliriz. JSONCompatible<T> T T data interface PostComment { authorId: string; text: string; updatedAt: number; } function saveComment(comment: PostComment) { const serializedComment = safeJsonStringify(comment); localStorage.setItem('draft', serializedComment); } Bu yaklaşım, ağ üzerinden veri aktarımı, HTML'ye veri gömme, localStorage'da veri depolama, çalışanlar arasında veri aktarımı vb. gibi JSON serileştirmenin gerekli olduğu durumlarda kullanılabilir. Ayrıca, yardımcısı, kesin olarak yazılmış bir nesne olmadan kullanılabilir. türündeki bir değişkene bir dizin imzasının atanması gerekir. toJsonValue JSONValue function toJsonValue<T>(value: JSONCompatible<T>): JSONValue { return value; } const comment: PostComment = {...}; const data: JSONValue = { comment: toJsonValue(comment) }; Bu örnekte kullanmak, türündeki eksik dizin imzasıyla ilgili hatayı atlamamızı sağlar. toJsonValue PostComment Seri durumdan çıkarmayla ilgilenme Seri durumdan çıkarma söz konusu olduğunda, zorluk aynı anda hem daha basit hem de daha karmaşıktır çünkü alınan verinin formatına yönelik hem statik analiz kontrollerini hem de çalışma zamanı kontrollerini içerir. TypeScript'in yazım sistemi açısından bakıldığında zorluk oldukça basittir. Aşağıdaki örneği ele alalım: function safeJsonParse(text: string) { return JSON.parse(text) as unknown; } const data = JSON.parse(text); // ^? unknown Bu örnekte dönüş türünü türle değiştiriyoruz. Neden seçmelisiniz? Temel olarak, bir JSON dizesi yalnızca almayı beklediğimiz verileri değil, her şeyi içerebilir. Örneğin, veri formatı farklı uygulama sürümleri arasında değişebilir veya uygulamanın başka bir kısmı aynı LocalStorage anahtarına veri yazabilir. Bu nedenle en güvenli ve en kesin seçimdir. any unknown unknown unknown Ancak türle çalışmak, yalnızca istenen veri türünü belirtmekten daha az kullanışlıdır. Tip dökümünün dışında, tipi gerekli veri tipine dönüştürmenin birden fazla yolu vardır. Bu tür yöntemlerden biri, çalışma zamanında verileri doğrulamak ve veriler geçersizse ayrıntılı hatalar atmak için kitaplığını kullanmaktır. unknown unknown Superstruct import { create, object, number, string } from 'superstruct'; const PostComment = object({ authorId: string(), text: string(), updatedAt: number(), }); // Note: we no longer need to manually specify the return type function restoreDraft() { const text = localStorage.getItem('draft'); return text ? create(JSON.parse(text), PostComment) : undefined; } Burada, işlevi bir tür koruması görevi görerek türü istenen arayüzüne . Sonuç olarak, artık dönüş türünü manuel olarak belirtmemize gerek yok. create Comment daraltır Güvenli bir seri durumdan çıkarma seçeneğinin uygulanması hikayenin yalnızca yarısıdır. Projedeki bir sonraki görevle uğraşırken onu kullanmayı unutmamak da aynı derecede önemlidir. Tüm anlaşmaların ve en iyi uygulamaların takip edilmesini sağlamak zor olabileceğinden, proje üzerinde büyük bir ekip çalışıyorsa bu özellikle zorlaşır. bu göreve yardımcı olabilir. Bu araç, güvenli olmayan kullanım örneklerinin belirlenmesine yardımcı olur. Özellikle tüm kullanımları bulunabilir ve alınan verinin formatının kontrol edilmesi sağlanabilir. Kod tabanındaki türden kurtulma hakkında daha fazla makalesinde okunabilir. TypeScript-eslint any JSON.parse any bilgi TypeScript'i Gerçekten "Kesinlikle Yazılmış" Yapma Çözüm Güvenli JSON serileştirme ve seri durumdan çıkarma işlemlerine yardımcı olmak için tasarlanmış son yardımcı program işlevleri ve türleri burada verilmiştir. Bunları hazırlanan Alanında test edebilirsiniz. TS Oyun type JSONPrimitive = string | number | boolean | null | undefined; type JSONValue = JSONPrimitive | JSONValue[] | { [key: string]: JSONValue; }; type NotAssignableToJson = | bigint | symbol | Function; type JSONCompatible<T> = unknown extends T ? never : { [P in keyof T]: T[P] extends JSONValue ? T[P] : T[P] extends NotAssignableToJson ? never : JSONCompatible<T[P]>; }; function toJsonValue<T>(value: JSONCompatible<T>): JSONValue { return value; } function safeJsonStringify<T>(data: JSONCompatible<T>) { return JSON.stringify(data); } function safeJsonParse(text: string): unknown { return JSON.parse(text); } Bunlar, JSON serileştirmesinin gerekli olduğu her durumda kullanılabilir. Bu stratejiyi birkaç yıldır projelerimde kullanıyorum ve uygulama geliştirme sırasında olası hataları anında tespit ederek etkinliğini kanıtladı. Bu makalenin size yeni bilgiler sunacağını umuyorum. Okuduğunuz için teşekkürler! kullanışlı bağlantılar TypeScript'i Gerçekten "Kuvvetle Yazılmış" Hale Getirmek TypeScript'in Standart Kitaplık Türlerini İyileştirme Üst yapı kütüphanesi TS oyun alanı

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

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

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Making security fun one episode at a time

TypeScript'te Type-Safe JSON Serileştirmesinde Uzmanlaşma

Çok uzun; Okumak

Maksim Zemskov

STORY’S CREDIBILITY

Code License

Guide

AI-assisted

About Author

ETİKETLERİ ASIN

Languages

BU YAZI...

TypeScript'te Type-Safe JSON Serileştirmesinde Uzmanlaşma

Çok uzun; Okumak

Maksim Zemskov

STORY’S CREDIBILITY

Code License

Guide

AI-assisted

About Author

ETİKETLERİ ASIN

Languages

BU YAZI...

İLGİLİ ÖYKÜLER