Recipes shown in "How to narrow Nodes in TypeScript" don't work (in my code at least)

[senicko]

Hello, I can't get the example from "How to narrow Nodes in TypeScript" to work in my code. I am traversing an AST and I need to check if node is a Literal of "yaml" type. I got stuck on the Literal check.

I started using unified and remark yesterday so I might be doing something totally wrong, but I can't figure out what.

  const ast = await unified()
    .use(remarkUnlink)
    .run(
      unified()
        .use(remarkParse)
        .use(remarkMDX)
        .use(remarkFrontmatter)
        .parse(rawMDX)
    );

  visit(ast, (node) => {
    if (is<Literal>(node, (node: Node): node is Literal => 'value' in node)) {}
//                        -------------------------------------------------
//    Argument of type '(node: Node) => node is Literal' is not assignable to parameter of type 'Literal'.
  });

I could just make a simple check like if (node.type === "yaml" && "value" in node) {} but I can't figure out why the recipe from unified site is not working.

[ChristianMurphy]

Welcome @senicko! 👋
Sorry you ran into a spot of trouble.
The types are confused because they don't know what type of Node ast is and it falls back to a generic Node instead of a more specific Mdast.Root https://unifiedjs.com/learn/recipe/tree-traversal-typescript/

The best way to solve this would be to parsing, transforms, and compilation in one pipeline with unified.process() and turning your logic into a plugin https://unifiedjs.com/learn/

Unified strongly encourages a plugin based approach to working with syntax trees.

[senicko]

Well, I have made a plugin as you have advised and I get exactly the same error. Here is a more complete snippet. Am I still not understanding something? :((

import { is } from "unist-util-is";
import { Heading, Paragraph, type Root } from "mdast";

function transformIntoTTS() {
  return function (ast: Root) {
    // Skipp all MDX nodes
    visit(ast, (node, index, parent) => {
      if (parent && index && node.type.startsWith("mdx")) {
        parent.children.splice(index, 1);
        return index;
      }
    });

    visit(ast, (node) => {
      if (is<Heading | Paragraph>(node, ["heading", "paragraph"])) {
        //                              ^^^^^^^^^^^^^^^^^^^^^^^^
        // Argument of type 'string[]' is not assignable to parameter of type 'Paragraph | Heading'.
      }
    });
  };
}

async function extractTTSInput(rawMDX: string) {
  const ast = await unified()
    .use(remarkParse)
    .use(remarkMDX)
    .use(remarkFrontmatter)
    .use(transformIntoTTS)
    .use(remarkStringify)
    .process(rawMDX);
}

[wooorm]

TS doesn’t know what that array means.

Use simple code and TS will get it:

visit(ast, function (node) {
  if (node.type === "heading" || node.type === "paragraph") {
    // `node` is now a heading or a paragraph.
  }
})

[senicko]

Okay, so I will do this then. I have absolutely no idea how examples from https://unifiedjs.com/learn/recipe/narrow-node-typescript/ are supposed to work :p