marko 的类型检查完全依赖 marko-tag.json 文件,所有属性类型约束在编译阶段完成;未声明的属性被忽略,属性值需为无引号的 js 表达式,default-value 必须是 json 可序列化静态值,data-* 属性不参与类型检查。

Marko 的 marko-tag.json 是属性类型检查的唯一入口
Marko 不靠运行时断言或 PropTypes 那类库做校验,所有类型约束都发生在编译阶段,依赖 marko-tag.json 文件声明。没这个文件,或者字段没在 "attributes" 里定义,就等于放弃类型保护——哪怕你传了 object={...},编译器也完全不拦。
常见错误现象:组件接收了错误类型(比如该传 number 却传了 "123" 字符串),但开发时无报错,直到运行时出逻辑异常。
-
marko-tag.json必须和组件文件同目录,文件名不能改、大小写不能错 - 属性名必须和模板中使用的完全一致(包括连字符处理:若定义为
"user-name",模板中用user-name="xxx";若设"remove-dashes": true,则按userName解析) - 未声明的属性默认被忽略,不会透传给组件内部 —— 这和 React 的
...props行为完全不同
属性值是 JavaScript 表达式,不是字符串字面量
很多人把 Marko 当成 HTML 写法,写 count="5" 就以为传了个数字,结果实际收到的是字符串 "5"。Marko 要求显式表达类型意图:
-
count=5→ 数字(无引号) -
isActive=true→ 布尔true -
items=[1,2,3]→ 数组 -
config={ timeout: 3000, retry: true }→ 对象 -
onClick=handleClick→ 函数引用(不是字符串"handleClick")
如果用了引号,比如 count="5",Marko 就当它是字符串,即使 marko-tag.json 声明了 "count": "number",编译期也会直接报错:Type error: Expected number but received string。
默认值与 required 的组合行为容易误解
"required": false 并不等于“可不传”,它只表示编译器不强制要求模板中出现该属性;但若同时设了 "default-value",那组件内部拿到的就是默认值——哪怕你传了 undefined 或空值。
- 没设
"default-value"且"required": false→ 组件内该属性为undefined - 设了
"default-value": 0→ 即使模板里完全没写count,组件内input.count就是0 -
"required": true且没设默认值 → 模板中必须出现该属性,否则编译失败
注意:"default-value" 必须是 JSON 可序列化的静态值(不能是函数调用或变量),否则编译报错。
data-* 属性不参与类型检查,但能被组件读取
Marko 允许你在自定义组件上写 data-id="abc" 或 data-tracking="true",这些会被原样透传到最终渲染的 DOM 元素上,但 marko-tag.json 不管它们——既不校验类型,也不出现在 input 对象里。
如果你需要让组件逻辑感知这些值,得手动从 input 中提取:const dataId = input['data-id'],且无法享受类型提示或编译检查。真正要类型安全,就得显式声明为普通属性,比如 "dataId": "string",然后模板中用 data-id="abc"(配合 "remove-dashes": true)或直接 dataId="abc"。
这种隐式透传机制适合快速加埋点或调试标记,但别把它当正式 API 用——容易漏文档、难维护、零类型保障。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











