Почитаю простой объект JSON в машинописи

Question

Вот простая структура JSON

{ 
    "carousel": [], 
    "column-headers": [{ 
     "header": "Heading", 
     "text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.", 
     "headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", 
     "buttonText": "View details" 
    }, { 
     "header": "Heading", 
     "text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.", 
     "headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", 
     "buttonText": "View details" 
    }, { 
     "header": "Heading", 
     "text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.", 
     "headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", 
     "buttonText": "View details" 
    }] 
} 

Как я прочитал это в машинописном? Я хотел бы сделать это обычно так, как это делают другие языки высокого уровня, например загрузить его и рассматривать как словарь, который я могу запросить в любое время. В качестве альтернативы, если мне нужно это делать только с помощью методов сериализации и десериализации, я тоже в этом разбираюсь.

Answer 1

Typcript не отличается от javascript тем, как вы обрабатываете данные json.
Если вы получите JSON в виде строки, то вам нужно разобрать его:

let json = JSON.parse(JSON_STRING); 

Проанализированные данные затем просто JavaScript Object (в случае JSON является объектом JSON {...}), на котором вы можете:

let aHeader = json["column-headers][0]; 
let headerImage = aHeader.headerImage; 

Что машинопись добавляет является возможность объявить эту JSon структуру как тип:

interface ColumnHeader { 
    header: string; 
    text: string; 
    headerImage: string; 
    buttonText: string; 
} 

interface MyData { 
    carousel: any[]; 
    "column-headers": ColumnHeader[]; 
} 

let o = { 
    "carousel": [], 
    "column-headers": [{ 
     "header": "Heading", 
     "text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.", 
     "headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", 
     "buttonText": "View details" 
    }, { 
     "header": "Heading", 
     "text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.", 
     "headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", 
     "buttonText": "View details" 
    }, { 
     "header": "Heading", 
     "text": "Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.", 
     "headerImage": "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", 
     "buttonText": "View details" 
    }] 
} as MyData; 

let header = o["column-headers"][0]; // typeof header is ColumnHeader 
let image = header.headerImage; // typeof image is string 

(code in playground)