无需TypeScript，如何在JavaScript中实现类型安全？

可以直接在JavaScript里通过JSDoc实现类似TypeScript的类型安全特性，无需编译，能直接在HTML中引用JS文件，完全规避TS的编译流程和复杂度。

实现类似示例的函数类型标注 #

你想要的export function View(canvasId: string): string[] { }对应的JSDoc写法如下：

/**
 * @param {string} canvasId
 * @returns {string[]}
 */
export function View(canvasId) {
  // 函数逻辑
}

编辑器支持 #

主流代码编辑器（如VS Code、WebStorm）会自动识别JSDoc的类型标注，在编写代码时提供：

• 实时类型错误提示
• 参数、返回值的自动补全
• 变量类型的 hover 提示

更多常用JSDoc类型标注示例 #

1. 对象类型

/**
 * @param {{id: number, title: string}} post
 */
function renderPost(post) {
  console.log(post.id, post.title);
}

2. 可选参数与默认值

/**
 * @param {string} message
 * @param {number} [duration=3000] 可选参数，默认值为3000
 */
function showToast(message, duration) {
  const toast = document.createElement('div');
  toast.textContent = message;
  setTimeout(() => toast.remove(), duration || 3000);
  document.body.appendChild(toast);
}

3. 联合类型

/**
 * @param {string|number} input
 * @returns {boolean}
 */
function isValidInput(input) {
  return typeof input === 'string' ? input.length > 0 : input > 0;
}

这种方式完全基于原生JavaScript，不需要额外的编译步骤，同时能满足你对类型安全的需求。

内容的提问来源于stack exchange，提问作者Matt Arnold