Как типизировать вложенного объекта в объекте в одну строку?

Question

[Boris007]

type Posts = {
    [key: string]: Post
}

type Post = {
    header: string;
    page: Page[]
}

type Page = {
    tag?: string;
    image_src?: string;
    image_alt?: string;
}

По отдельности это работает

const posts: Posts = blogPosts
const data: Post = posts[props.name]

Как затипизировать это выражение, чтобы получить этот же результат в одну строку?
const result = blogPosts[props.name]

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type
No index signature with a parameter of type 'string' was found on type

Comments

[Aetae]

Лол, вот нахрена ты обрезал единственную инфу имеющую значение в рамках вопроса, а именно изначальный тип blogPosts:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type <какой бъ?!>

Answer 1

[Aetae]

Тупо скастовать можно так:
const result = (blogPosts as Posts)[props.name]

Но это не правильно, по хорошему ты должен изначально убедиться, что blogPosts - нужного типа:

// тайпргард: тут проверка что posts действительно Posts; 
const isPosts = (posts: unknown): posts is Posts => !!posts 
  && typeof posts === 'object' 
//&& ... ;

if (!isPosts(blogPosts)) throw new Error('wrong blogPosts');

const result = blogPosts[props.name];

Comments

[Boris007]

Изначально я пытался сделать так
const result: Post = blogPosts[props.name]
Мне выдавало ошибку

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ 'story': { header: string; page: { tag: string; image_src: string; image_alt: string; }[]; }; }'.
  No index signature with a parameter of type 'string' was found on type '{ 'story': { header: string; page: { tag: string; image_src: string; image_alt: string; }[]; }; }'

Я подумал, что как-то не так определил тип result
С вашим примером решения стало еще сложнее, чем то, что я описал в две строки )
Хотелось узнать, где и в чем была ошибка const result: Post = blogPosts[props.name] в этом решении, почему тут Post не прокатил

[Aetae]

Boris007, ну какбэ по английски же написано: "строка" не может быть использована как индекс в типе

{ 
  'story': { 
    header: string; 
    page: { 
      tag: string; 
      image_src: string; 
      image_alt: string; 
    }[]; 
  }; 
}

У данного типа есть только один конкретный ключ - "story". Соответственно ты не можешь обращаться к нему никак иначе чем через blogPosts.story(blogPosts["story"]).
Чтоб это работало, в props.name должен лежать тип "story", а не string.
Это сделано как раз чтоб ты не получил undefined при этом уверенно думая, что у тебя там Post.

Указывая же руками тип

type Posts = {
    [key: string]: Post
}

ты говоришь тайпскрипту "при обращении по любому строковому ключу мне гарантировано вернётся Post". Т.е. ты снимаешь с тайпскрипта ответственность и берёшь её на себя.

[Boris007]

Aetae, понял, спасибо
Если это будут данные по апи, то так и надо оформлять через key: string?
Просто сейчас данные из файла и он может прочесть какие ключи есть, а по данным через апи он не сможет же этого сделать.

В прицепе это рабочее решение или так не пишут?

const posts: Posts = blogPosts
const data: Post = posts[props.name]

[Aetae]

Boris007, рабочее то рабочее, вполне обычное, как и первое из решений в ответе, но если по серьёзному - не надёжное. Если ты доверяешь серверу, что с него придёт всегда то, что надо, и доверяешь себе, что в props.name будет только то, что придёт с сервера - то можно забить и так и писать.

Иначе нужно второе решение из ответа: тайпгард, который проверит входные данные с гарантией. Так как тайпскрипт работает только на этапе компиляции, то на этапе исполнения, когда придут данные от api - никаких типов уже не будет, и вся надежда только на ручную функцию проверки.
Существуют всякие библиотеки для проверки данных по схеме(zod и др.) или генрации проверки на основе типа (typia и др.), но обычный подход - забить и верить в лучшее.:)

Answer 2

[Пес Барбос]

Тут вопрос к типизации props.name. TS считает его просто стрингом, следовательно, поля может не быть в blogPosts, а должен считать keyof typeof blogPosts. Тогда все будет хорошо, но надо видеть весь код, чтоб подсказать, как поправить. Самый же "ламерский" способ:

const result = blogPosts[props.name as keyof typeof blogPosts]

Comments

[Boris007]

Спасибо!
Как TS узнает тип blogPosts?
Или это условное значение, где мы не описываем тип данных, а просто говорим тс, чтобы он не пытался искать схожесть в полях?

[Пес Барбос]

Не совсем понял вопрос. Зависит от контекста использования. Если blogPosts объявлено заранее, как константа, то тс знает ее тип. Если это абстрактный тип данных, но нужен интерфейс для описания. Есть разные способы типизировать объекты.