Type Definition doesn't work

[rikusen0335]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

remark-directive@2.0.1

Link to runnable example

No response

Steps to reproduce

This problem is probably not a package issue itself, so I couldn't reproduce.

---

Quick note: I use astro to develop, so I chose vite as a build tools.

Expected behavior

Getting a type like visit(tree: Tree, (node: Node) => { ... }) (I'm not sure if these type are correct, just writing for example) and so I can use complenition like node.name ...

Actual behavior

As this image shows, like visit function won't show its type.

Runtime

Node v16

Package manager

yarn 1

OS

macOS

Build and bundle tools

Vite

[ChristianMurphy]

Could you share a runnable example of the issue? The screens hot doesn't offer enough information on what are are trying to achieve.

Some starters:

description	codesandbox	stackblitz
remark only (for markdown to markdown)	codesandbox	stackblitz
remark and rehype (for markdown to html)	codesandbox	stackblitz
react-markdown	codesandbox	stackblitz

---

From what I can gather, you're question is about the visitor types from https://github.com/syntax-tree/unist-util-visit?

And it looks like you are using TypeScript syntax (.ts file extension), but annotating it with JSDoc style TypeScript? Those to don't work together in the same file. For how to annotate a plugin use something like

const remarkCustomPlugin: Plugin<[], Root> =

(And consider looking through the code of https://github.com/remcohaszing/remark-mdx-images for a more complete TypeScript syntax example)

And for visitors, it may not need an annotation once the plugin is correctly typed. But if you need to further narrow the type see https://unifiedjs.com/learn/recipe/narrow-node-typescript/

[github-actions[bot]]

Hi! Thanks for taking the time to contribute! This has been marked by a maintainer as needing a reproduction: It’s not yet clear whether this is a problem. Here are a couple tips:

• Thoroughly document how to reproduce the problem, in steps or with code
• Don’t link to your complete project: make the repro as tiny as possible, preferrably with only the problematic project in question
• Make sure you’re on the latest versions of projects (and node/npm/yarn!)
• The best issue report is a failing test proving it

Thanks, — bb

[rikusen0335]

Thanks @ChristianMurphy !

I finally figured it out and that was not a problem of this lib as you said.

We need to do like this in .ts file:

import type { Root } from 'remark-directive';
import type { Plugin } from 'unified';

const customComponentRemarkPlugin: Plugin<[], Root> = () => {
  return (tree) => {
    visit(tree, (node) => {
      // Some code goes here ...
    }
  }
}

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[github-actions[bot]]

Hi team! I don’t know what’s up as there’s no phase label. Please add one so I know where it’s at.

Thanks, — bb

[github-actions[bot]]

Hi! Thanks for reaching out! Because we treat issues as our backlog, we close issues that are questions since they don’t represent a task to be completed.

See our support docs for how and where to ask questions.

Thanks, — bb