做颜色过渡不应该用 HSL 的，Hue 在过渡的时候颜色变来变去，看起来很糟糕。用 rgb 都好点。Google 发明了一个新的颜色空间 HCT ，用来做颜色过渡更加自然： https://material.io/blog/science-of-color-design

mkcert 是个很不错的解决方案，iphone 也能用： https://github.com/FiloSottile/mkcert

说 iphone 只值几百块那位……最新的 iphone 14 Pro 光芯片 A16 一个零件的成本就是 110 美元……

看了一眼 css-js.com 上的工具都老掉牙了，还是找找最新的工具链吧。
npm trends 是一个好地方：
https://npmtrends.com/babel-minify-vs-terser-vs-uglify-js

#6 题主引用的这个“javy”就是基于 quickjs 的。
用于保护源代码也不是不行，不过从性能上看这样跑的 JS 慢了成百上千倍，还有一些本来其他虚拟机没有的问题（比如 quickjs 是用引用计数的，会循环引用造成泄漏）。quickjs 这个方案主要是用于在一个 JS 环境中安全地运行第三方的 JS 代码，不是用于加密客户端代码的。
现代 JS 工具链（比如 webpack+terser ）会把几乎所有的可读函数名、变量名全部改掉并精简代码，可读性几乎为 0 了，用另一个虚拟机只是能更大程度增加破解困难度而已。

虽然范型也不是不行：
https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgGLADYQHIHsAmEA3gL4BQoksiKA8gA5jC4gDOAPACoB8RyowMADU4GAK4QA-AC5knZOTIIWrMMgDa+OGDgAafq1oBrAIIBdZAF5kY1hAAKUXAFtgdgBRlkydwEor3MhEXt7IUBBgYlAgyI4ubhAAdOGsuBgAbhDuRBhuYNLqZiT+cKyxTq527Hy5qrLoWHiEhQrcANwhJLohfALCohKyOXkFRQpkvh1kAPTTyID45oDY5oDePoDR6oAVxoA-2oBfioBY-zCYOAQQZYAhbmuA9GaAAHKAVHJoh00ogA6mgCN+PoDOyoAr8YB7anLqAOS1MD-My+JQqNTqA6NY6sfRuYwAIQs1lsDgqCU83j8ASCIW84Ui0XK8TsyROaUy2SBo2KyFKJMqEGqyBp9xhzQsJHanW63l6IEEInEEFkLS6IQAREDJd1JmQyBAAB70XBQNQwMQgBBMFg2OxxJlcfQAaWQysgIHwZSMEAAnrgYHJkAAfGxWiAHEAQfBWd2EL0+7hY5DwHVqu2yHGWQKGhJcbh85C4RjMNiyBi6tjsM0WiBWm32x3OyR-E0WWQ8P2kJPQqgm+0yZAmuVi3NKy3W5C2h1O+SlzjqcvISv6ABGuDSEDgIAswQJESiMRAYgwGHpZRndo6JCAA

不过真不如 overloading 。

为什么一定要纠结范型呢，你这个例子用 overloading 做起来好多了：

https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgGLADYQHIHsAmEA3gL4BQoksiKA8gA5jC4gDOAPACoB8RyowMADU4GAK4QA-AC5knZOTIIWrMMgDa+OGDgAafq1oBrAIIBdZAF5kY1hAAKUXAFtgdgBRlkydwEor3MhEXt7IUBBgYlAgyI4ubhAAdOGsuBgAbhDuRBhuYNLqZiT+cKyxTq527Hy5qrLoWHiEhQrcANwhJLohfALCohKyOXkFRQpkvh1kAPTTyID45oDY5oDePoDR6oAVxoA-2oBfioBY-zCYOAQQZYAhbmuA9GaAAHKAVHJoh00ogA6mgCN+PoDOyoAr8YB7anLqAOS1MD-My+JQqNTqA6NY6sfRuYwAIQs1lsDgqCU83j8ASCIW84Ui0XK8TsyROaUy2SBo2KyFKJMqEGqyBp9xhzQsJHanW63l6IEEInEEFkLS6IQAREDJd1JmQFRAAB70XBQNQwMQgBBMFg2OxxJlcfQAaWQysgIHwZSMEAAnrgYHJuO54Dq1XbZDjLIFDQkuNx9LhGMw2LIGLq2Fx1CazIHkNCqCb7bITb4xZwY2Z9AAjXBpCBwEAWDrK1XqhNanWh-Xo0nMniuxBgD1e-w+xn+nhBkMqcO9qM8dMaTi5-NYIslshltUaquR2t+qqj5Bmi0QK02+2O51YhPN1s+du+jHLwMhYOR1j9q-R2PIAA+zqsQQl3kT0GTdpkq7lGazj5yGOBaTniBIRFEMQgGIGAYPSZRFnaHQkEAA

如果你是从 es5 过来的就会知道这些细节了。
现在知道不知道都无所谓，反正很少用了

TLDR 版：不行。

加长版：
你已经说了 interface 只是编译期存在的类型，运行时是没有类型信息的，所以不管什么工具都不可能把多余参数擦除。要擦出多余参数，这个 interface 的类型信息必须在运行时必须能拿到，这就需要别的方式辅助，一个方案是用装饰器，但这增加了不少代码量；另一个方案是用第三方工具比如 typescript-json-schema 或者 ts-json-schema-generator 在编译期把 TS 的 interface 编译成 JSON Schema ，这样在运行时你就可以读取 Schema 来过滤这个 Object 了。

范型函数里面的报错一般都不重要，就不要管了，any 吧……

第一个你需要类似这样的 helper 类型：
type Property2<P> = P extends keyof MyInterface ? {propertyName: P; propertyValue: MyInterface[P]}: never;

详见 https://www.typescriptlang.org/play?ssl=33&ssc=107&pln=33&pc=1#code/JYOwLgpgTgZghgYwgAgLIE8CS5rycgbwChlkAHKAezOjHQEEAuZAZzClAHNkAfZEAK4AbIQG4S5KjSh0AQs0EBbAEbRe-YWIkVqtdAGFmAZUqKIAeTAALaNkixEKPoJHjSO6XQAizeiErW0JY2UHa4juouWgC+RESg9ngoJmbBtjgO+MTuUnoAGsxsHCDczppukroy6ACaCgIqamWuRLHxGUnIfgEhaaEdEdmVnuiohexckeXaudUAcvWNUFMtbQD0a8gIlCBsyAJkACZwkAAKs3TIALzIADxEG6TIACoA0hDoyBAAHpAghyxkABrD6UGBoLADJAAGgem1IzwAanAhAIUD8-gCIWFMhAANpvD4AXThyAAfAAKUmkSgcTigFHmZQAKwgCDAzAwOKSsMeOSqdDmcDMzEJ6F58OGemRqIgoplaNJAEpOZDEhErmTCNTkI8AHQG1imFAJaAgFHIISUekIHVQCBgARQECEZAGvW04D081CJms9nQ5B4jx6IVmInMEPVBUoaLiR5xuKPba7MDIABuKIAjKruRrCNFkHBAXAQOh45sU3sQBAAO5Z677I4nCDnAXoCmZoRZwMAIijdHovb7LGNrAmJV7SvERDoNGQbZGACZbqctTdTl9fhB-oCQegwdioSgAPyEAfoMNyheiKXRlFo3PHvGnInRBQQdPQGcwAQgdnADsTbHGcFzABALBLhSnreoyLJshyR7qjCd5gOBLDMIuegrvuh5cseZJ4kSSoEG0VZpl2S5PshKA3KRRYlmW4jkfwdZLo2Bwga2YEQVBlGBniEhDPyIxXsw-YXAww4SCJ0oPtevajmY47FJw0mkNEsKkMJqGXsKCkXrI6lPBeMbMFmAAMWnIJpQkybpYnIBJ7b6MZsn3rKzAEBeBS9lmw66XUyBZrZGmwsRM5EEAA


第二个更复杂点，我的做法是这样的 helper 类型：
type NonNull<T> = T extends null ? never : T;
type IsSubjectObjectKey<K extends keyof MyInterface> = NonNull<MyInterface[K]> extends object ? K : never;
type GetSubjectObjectKey<K extends keyof MyInterface> = K extends IsSubjectObjectKey<K> ? K : never

const updateSubProperty = <
TTop extends GetSubjectObjectKey<keyof MyInterface>, // Should be restricted to some "object" only properties, but how?
TSub extends keyof (NonNull<MyInterface[TTop]>),
TValue extends NonNull<MyInterface[TTop]>[TSub]
>(

注意你的类型中含|null 需要去掉。

详见 https://www.typescriptlang.org/play?ssl=26&ssc=3&pln=18&pc=1#code/JYOwLgpgTgZghgYwgAgLIE8CS5rycgbwChlkAHKAezOjHQEEAuZAZzClAHNkAfZEAK4AbIQG4S5KjSh0AQs0EBbAEbRe-YWIkVqtdAGFmAZUqKIAeTAALaNkixEKPoJHjSO6XQAizeiErW0JY2UHa4juouWgC+RESg9ngoJmbBtjgO+MTuUnoAGsxsHCDczppukroy6ACaCgIqamWuRLHxGUnIfgEhaaEdEdmVnuiohexckeXaudUAcvWNUFMtbXQ0yHOUIHOaADwAKgB8yAC8yAfIEAAekCAAJiwaIsgA-PwQAG5qzAfi6yhMCwjAJlAArCAIMDmcGQsAAaQg6D28KutwgDyeAGskZQYGgsAMkCdzlsdvsMGFMhAANrwgC6Jxud0eyEosKhb2QqIUX2g-3QGwA4hAwCCOdCJYjkajmRjWTj0HiCVSkiTuWiWU8geKIVCYXqEUiUSd3jyPt8oHEENs2MgBGR7nBIOKAAqzOhnZB7CQHA7UTXyp4isWgw0GuHSvaK5WUokQI4AGmQAHoU8gjFZKMJ7shVMgoBAisAoRBc2BKKxTCgAETsw01tkgIToYa0YBF5PKARgZBZgDur194sDmOQMfxAAoybsRHs44lHDS-dRGQBKRO+gBqcCEAhQcrHM4phMXSGX-rIjOX4vpRCOk4klA4nFAu4jUOYC-CSE3pArZDulUdC-Jef6sKCQEjL84rgZ8u77r8O57hARBrmcJzENE4hEDaIB2vBQhfqeP4oOcBDRMgcBPHAIDoOIDpOi6kEeugk6EcmNYeHo+g1px3HVHkfHIDWLDVqwEwlDWa4MY6zoQG6rHsbu-GsbxqnAbUwkAEwAAwyUQjHyYpmnKUIGkjF4wlcaxqDCQA5Hp9kyUAA

第一个你需要类似

中国还是太资本主义了。
先不说社会主义欧洲，即使是后资本主义的美帝，打广告说只招 35 岁以下恐怕也会不会被告到破产……

vue2.x 写 TS 只有用 tsx （也就是说不用 SFC ）和一个第三方的 helper 库才能比较舒服（体验和写 react 差不多了）。SFC 的话只有比较有限的支持，现在 vetur 也支持在模版中 parse TS 类型所以还行，但貌似 CLI 仍不支持（可能会跟进）。
react 的话其实用了 Hook 后和 TS 结合相当完美，redux 的话就别扭一点不过也还好，最新版 redux 也有官方 hooks 了，其他的第三方库就不一定了。UI 库用 antd 的话也会很爽，毕竟现在 antd 是用 ts 写的。

不过你一定要放 url 里，把 base64 两个特殊的符号转一下即可： https://stackoverflow.com/a/5835352
当然我不觉得这种信息放 url 是个好主意（甚至包括放 query ）

只建议早点换成 vue。
只说一点：vetur 是官方支持的。

有啊，https://www.npmjs.com/package/fast-array-diff
用于浏览器需要 browserify 转一下