The right way to import "FeedViewPost" in Typescript project?

[ajmas]

Currently in my Typescript project I am importing FeedViewPost as follows:

import { FeedViewPost } from '@atproto/api/dist/client/types/app/bsky/feed/defs';

Is there an alternative approach that doesn't require a deep import path? Maybe something like (open to alternatives):

import { FeedDefs } from '@atproto/api';

const FeedViewPost = FeedDefs.FeedViewPost

Additionally the import style upsets Typescript with the following sort of warning:

Cannot find module '@atproto/api/dist/client/types/app/bsky/feed/defs' or its corresponding type declarations.

Note, I explored a bit more, but this doesn't work either:

import { AppBskyFeedDefs } from '@atproto/api';
const FeedViewPost = AppBskyFeedDefs.FeedViewPost;

[tamish-max]

Yes — avoid the deep import.

The top-level package already exposes the generated namespaces; the important bit is to use them as types, not as runtime values:

import type { AppBskyFeedDefs } from '@atproto/api'

type FeedViewPost = AppBskyFeedDefs.FeedViewPost

or inline:

function render(post: AppBskyFeedDefs.FeedViewPost) {
  // ...
}

Why your second attempt failed:

const FeedViewPost = AppBskyFeedDefs.FeedViewPost

FeedViewPost is a TypeScript type alias/interface, not a JavaScript value, so there is nothing to assign at runtime.

So the rule of thumb is:

• use import type { AppBskyFeedDefs } from '@atproto/api'
• reference AppBskyFeedDefs.FeedViewPost in type positions
• avoid dist/... imports because they are brittle and often not part of the public package exports

[wingerter]

Hi @ajmas ,

the deep import (@atproto/api/dist/client/types/...) isn't the intended path — that's why you get the "missing declaration" warnings. The generated types are exposed as namespaces on the package root, so import the namespace and access the type as a member:

import { AppBskyFeedDefs } from '@atproto/api'

type Post = AppBskyFeedDefs.FeedViewPost

When you tried import { AppBskyFeedDefs } from '@atproto/api' earlier, the namespace itself is correct! FeedViewPost just lives inside it (AppBskyFeedDefs.FeedViewPost); it isn't a separate top-level export! So import { FeedViewPost } from '@atproto/api' won't work.

--> Runtime guards are generated the same way, e.g. AppBskyFeedDefs.isPostView(x).

This is the pattern the official tooling uses, too. E.g.: bluesky-social/ozone does import { AppBskyFeedDefs } from '@atproto/api'.

[ajmas]

Thanks.

BTW I had been basing myself on other examples I had found. The deep import wasn’t sitting well with me either, but I just needed to get something out and at that point had no counter examples. Much appreciated.