Migrate 6 files from JavaScript to TypeScript (#57884)

Author: heiskr

src/content-linter/lib/linting-rules/code-annotation-comment-spacing.js renamed to src/content-linter/lib/linting-rules/code-annotation-comment-spacing.ts

@@ -1,32 +1,38 @@
+// @ts-ignore - markdownlint-rule-helpers doesn't provide TypeScript declarations
 import { addError, filterTokens } from 'markdownlint-rule-helpers'
 
+import type { RuleParams, RuleErrorCallback, MarkdownToken } from '@/content-linter/types'
+
 export const codeAnnotationCommentSpacing = {
   names: ['GHD045', 'code-annotation-comment-spacing'],
   description:
     'Code comments in annotation blocks must have exactly one space after the comment character(s)',
   tags: ['code', 'comments', 'annotate', 'spacing'],
   parser: 'markdownit',
-  function: (params, onError) => {
-    filterTokens(params, 'fence', (token) => {
-      if (!token.info.includes('annotate')) return
+  function: (params: RuleParams, onError: RuleErrorCallback) => {
+    filterTokens(params, 'fence', (token: MarkdownToken) => {
+      if (!token.info?.includes('annotate')) return
+
+      const content = token.content
+      if (!content) return
 
-      const lines = token.content.split('\n')
+      const lines = content.split('\n')
 
-      lines.forEach((line, index) => {
+      lines.forEach((line: string, index: number) => {
         const trimmedLine = line.trim()
         if (!trimmedLine) return
 
         // Define a map of comment patterns
-        const commentPatterns = {
+        const commentPatterns: Record<string, RegExp> = {
           '//': /^(\/\/)(.*)/, // JavaScript/TypeScript/Java/C# style comments
           '#': /^(#)(.*)/, // Python/Ruby/Shell/YAML style comments
           '--': /^(--)(.*)/, // SQL/Lua style comments
         }
 
         // Check for different comment patterns
-        let commentMatch = null
-        let commentChar = null
-        let restOfLine = null
+        let commentMatch: RegExpMatchArray | null = null
+        let commentChar: string | null = null
+        let restOfLine: string | null = null
 
         // Iterate over the map to find a matching comment style
         for (const [char, pattern] of Object.entries(commentPatterns)) {
@@ -38,7 +44,7 @@ export const codeAnnotationCommentSpacing = {
           }
         }
 
-        if (commentMatch && restOfLine !== null) {
+        if (commentMatch && restOfLine !== null && commentChar !== null) {
           // Skip shebang lines (#!/...)
           if (trimmedLine.startsWith('#!')) {
             return
@@ -49,8 +55,8 @@ export const codeAnnotationCommentSpacing = {
             // If it starts with a space, make sure it's exactly one space
             if (restOfLine.startsWith(' ') && restOfLine.length > 1 && restOfLine[1] === ' ') {
               // Multiple spaces - this is an error
-              const lineNumber = token.lineNumber + index + 1
-              const fixedLine = line.replace(
+              const lineNumber: number = token.lineNumber + index + 1
+              const fixedLine: string = line.replace(
                 new RegExp(`^(\\s*${commentChar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})\\s+`),
                 `$1 `,
               )
@@ -73,9 +79,9 @@ export const codeAnnotationCommentSpacing = {
             return
           } else {
             // No space after comment character - this is an error
-            const lineNumber = token.lineNumber + index + 1
-            const leadingWhitespace = line.match(/^\s*/)[0]
-            const fixedLine = leadingWhitespace + commentChar + ' ' + restOfLine
+            const lineNumber: number = token.lineNumber + index + 1
+            const leadingWhitespace: string = line.match(/^\s*/)![0]
+            const fixedLine: string = leadingWhitespace + commentChar + ' ' + restOfLine
 
             addError(
               onError,

src/content-linter/lib/linting-rules/frontmatter-landing-recommended.js renamed to src/content-linter/lib/linting-rules/frontmatter-landing-recommended.ts

@@ -1,24 +1,26 @@
 import fs from 'fs'
 import path from 'path'
+// @ts-ignore - markdownlint-rule-helpers doesn't provide TypeScript declarations
 import { addError } from 'markdownlint-rule-helpers'
 
 import { getFrontmatter } from '../helpers/utils'
+import type { RuleParams, RuleErrorCallback } from '@/content-linter/types'
 
-function isValidArticlePath(articlePath, currentFilePath) {
+function isValidArticlePath(articlePath: string, currentFilePath: string): boolean {
   const ROOT = process.env.ROOT || '.'
 
   // Strategy 1: Always try as an absolute path from content root first
   const contentDir = path.join(ROOT, 'content')
   const normalizedPath = articlePath.startsWith('/') ? articlePath.substring(1) : articlePath
-  const absolutePath = path.join(contentDir, `${normalizedPath}.md`)
+  const absolutePath: string = path.join(contentDir, `${normalizedPath}.md`)
 
   if (fs.existsSync(absolutePath) && fs.statSync(absolutePath).isFile()) {
     return true
   }
 
   // Strategy 2: Fall back to relative path from current file's directory
-  const currentDir = path.dirname(currentFilePath)
-  const relativePath = path.join(currentDir, `${normalizedPath}.md`)
+  const currentDir: string = path.dirname(currentFilePath)
+  const relativePath: string = path.join(currentDir, `${normalizedPath}.md`)
 
   try {
     return fs.existsSync(relativePath) && fs.statSync(relativePath).isFile()
@@ -32,15 +34,18 @@ export const frontmatterLandingRecommended = {
   description:
     'Only landing pages can have recommended articles, there should be no duplicate recommended articles, and all recommended articles must exist',
   tags: ['frontmatter', 'landing', 'recommended'],
-  function: (params, onError) => {
-    const fm = getFrontmatter(params.lines)
+  function: (params: RuleParams, onError: RuleErrorCallback) => {
+    // Using any for frontmatter as it's a dynamic YAML object with varying properties
+    const fm: any = getFrontmatter(params.lines)
     if (!fm || !fm.recommended) return
 
-    const recommendedLine = params.lines.find((line) => line.startsWith('recommended:'))
+    const recommendedLine: string | undefined = params.lines.find((line) =>
+      line.startsWith('recommended:'),
+    )
 
     if (!recommendedLine) return
 
-    const lineNumber = params.lines.indexOf(recommendedLine) + 1
+    const lineNumber: number = params.lines.indexOf(recommendedLine) + 1
 
     if (!fm.layout || !fm.layout.includes('landing')) {
       addError(
@@ -55,11 +60,11 @@ export const frontmatterLandingRecommended = {
 
     // Check for duplicate recommended items and invalid paths
     if (Array.isArray(fm.recommended)) {
-      const seen = new Set()
-      const duplicates = []
-      const invalidPaths = []
+      const seen = new Set<string>()
+      const duplicates: string[] = []
+      const invalidPaths: string[] = []
 
-      fm.recommended.forEach((item) => {
+      fm.recommended.forEach((item: string) => {
         if (seen.has(item)) {
           duplicates.push(item)
         } else {

src/content-linter/lib/linting-rules/third-party-actions-reusable.js renamed to src/content-linter/lib/linting-rules/third-party-actions-reusable.ts

@@ -1,16 +1,21 @@
+// @ts-ignore - markdownlint-rule-helpers doesn't provide TypeScript declarations
 import { addError, filterTokens } from 'markdownlint-rule-helpers'
 
+import type { RuleParams, RuleErrorCallback, MarkdownToken } from '@/content-linter/types'
+
 export const thirdPartyActionsReusable = {
   names: ['GHD054', 'third-party-actions-reusable'],
   description: 'Code examples with third-party actions must include disclaimer reusable',
   tags: ['actions', 'reusable', 'third-party'],
-  function: (params, onError) => {
+  function: (params: RuleParams, onError: RuleErrorCallback) => {
     // Find all code fence blocks
-    filterTokens(params, 'fence', (token) => {
+    filterTokens(params, 'fence', (token: MarkdownToken) => {
       // Only check YAML code blocks (GitHub Actions workflows)
       if (token.info !== 'yaml' && token.info !== 'yaml copy') return
 
       const codeContent = token.content
+      if (!codeContent) return
+
       const lineNumber = token.lineNumber
 
       // Find third-party actions in the code block
@@ -41,8 +46,8 @@ export const thirdPartyActionsReusable = {
  * Third-party actions are identified by the pattern: owner/action@version
  * where owner is not 'actions' or 'github'
  */
-function findThirdPartyActions(yamlContent) {
-  const thirdPartyActions = []
+function findThirdPartyActions(yamlContent: string): string[] {
+  const thirdPartyActions: string[] = []
 
   // Pattern to match 'uses: owner/action@version' where owner is not actions or github
   const actionPattern = /uses:\s+([^{\s]+\/[^@\s]+@[^\s]+)/g
@@ -70,7 +75,11 @@ function findThirdPartyActions(yamlContent) {
  * Check if the disclaimer reusable is present before the given line number or inside the code block
  * Looks backward from the code block and also inside the code block content
  */
-function checkForDisclaimer(lines, codeBlockLineNumber, codeContent) {
+function checkForDisclaimer(
+  lines: string[],
+  codeBlockLineNumber: number,
+  codeContent: string,
+): boolean {
   const disclaimerPattern = /{% data reusables\.actions\.actions-not-certified-by-github-comment %}/
 
   // First, check inside the code block content

src/content-render/unified/code-header.js renamed to src/content-render/unified/code-header.ts

@@ -7,15 +7,25 @@ import yaml from 'js-yaml'
 import fs from 'fs'
 import { visit } from 'unist-util-visit'
 import { h } from 'hastscript'
+// @ts-ignore - no types available for @primer/octicons
 import octicons from '@primer/octicons'
 import { parse } from 'parse5'
 import { fromParse5 } from 'hast-util-from-parse5'
 import murmur from 'imurmurhash'
 import { getPrompt } from './copilot-prompt'
+import type { Element } from 'hast'
 
-const languages = yaml.load(fs.readFileSync('./data/code-languages.yml', 'utf8'))
+interface LanguageConfig {
+  name: string
+  [key: string]: any
+}
+
+type Languages = Record<string, LanguageConfig>
+
+const languages = yaml.load(fs.readFileSync('./data/code-languages.yml', 'utf8')) as Languages
 
-const matcher = (node) =>
+// Using any due to conflicting unist/hast type definitions between dependencies
+const matcher = (node: any): boolean =>
   node.type === 'element' &&
   node.tagName === 'pre' &&
   // For now, limit to ones with the copy or prompt meta,
@@ -25,28 +35,39 @@ const matcher = (node) =>
   !getPreMeta(node).annotate
 
 export default function codeHeader() {
-  return (tree) => {
-    visit(tree, matcher, (node, index, parent) => {
-      parent.children[index] = wrapCodeExample(node, tree)
+  // Using any due to conflicting unist/hast type definitions between dependencies
+  return (tree: any) => {
+    // Using any due to conflicting unist/hast type definitions between dependencies
+    visit(tree, matcher, (node: any, index: number | undefined, parent: any) => {
+      if (index !== undefined && parent) {
+        parent.children[index] = wrapCodeExample(node, tree)
+      }
     })
   }
 }
 
-function wrapCodeExample(node, tree) {
-  const lang = node.children[0].properties.className?.[0].replace('language-', '')
-  const code = node.children[0].children[0].value
+// Using any due to conflicting unist/hast type definitions between dependencies
+function wrapCodeExample(node: any, tree: any): Element {
+  const lang: string = node.children[0].properties.className?.[0].replace('language-', '')
+  const code: string = node.children[0].children[0].value
 
   const subnav = null // getSubnav() lives in annotate.js, not needed for normal code blocks
   const prompt = getPrompt(node, tree, code) // returns null if there's no prompt
-  const hasCopy = Boolean(getPreMeta(node).copy) // defaults to true
+  const hasCopy: boolean = Boolean(getPreMeta(node).copy) // defaults to true
 
   const headerHast = header(lang, code, subnav, prompt, hasCopy)
 
   return h('div', { className: 'code-example' }, [headerHast, node])
 }
 
-export function header(lang, code, subnav = null, prompt = null, hasCopy = true) {
-  const codeId = murmur('js-btn-copy').hash(code).result()
+export function header(
+  lang: string,
+  code: string,
+  subnav: Element | null = null,
+  prompt: Element | null = null,
+  hasCopy: boolean = true,
+): Element {
+  const codeId: string = murmur('js-btn-copy').hash(code).result().toString()
 
   return h(
     'header',
@@ -83,14 +104,16 @@ export function header(lang, code, subnav = null, prompt = null, hasCopy = true)
   )
 }
 
-function btnIcon() {
-  const btnIconHtml = octicons.copy.toSVG()
+function btnIcon(): Element {
+  const btnIconHtml: string = octicons.copy.toSVG()
   const btnIconAst = parse(String(btnIconHtml), { sourceCodeLocationInfo: true })
+  // @ts-ignore - fromParse5 file option typing issue
   const btnIcon = fromParse5(btnIconAst, { file: btnIconHtml })
-  return btnIcon
+  return btnIcon as Element
 }
 
-export function getPreMeta(node) {
+// Using any due to conflicting unist/hast type definitions between dependencies
+export function getPreMeta(node: any): Record<string, any> {
   // Here's why this monstrosity works:
   // https://github.com/syntax-tree/mdast-util-to-hast/blob/c87cd606731c88a27dbce4bfeaab913a9589bf83/lib/handlers/code.js#L40-L42
   return node.children[0]?.data?.meta || {}