TypeScript lib.dom.d.ts: HTMLInputElement::type should be more specific than just 'string'

pxyaymoc 于 7个月前发布在 TypeScript

关注(0)|答案(4)|浏览(99)

搜索词

HTMLInputElement type
HTML input type
input type
这个返回了成千上万个不相关的结果，所以诚然，我没有全部查看它们

建议

在 lib.dom.d.ts 中， HTMLInputElement::type 目前被指定为一个 string ,但它的值只能合法地是已知字符串集合(在 MDN 上指定)中的一个。我想将此属性更改为表示这些字符串集合的字符串字面量联合。

用例

目前，假设 string 可以分配给 HTMLInputElement.type 的代码是在错误的假设上操作，实际上并不安全。
通过在此属性中限制允许的字符串，我们可以获得以下好处：

严格的类型检查的好处，这样开发人员就不必担心拼写错误或其他错误导致他们的输入元素回退到类型 text
这也允许 IDE 为这些开发人员填充有效的类型。
typeof HTMLInputElement.prototype.type (作为 HTMLInputElement 在 lib.dom.d.ts 之外引用的是声明的变量，而不是接口)可以用作表达所有有效类型的方法，而无需声明另一个最终可能变得不一致或有其自身错误的类型(省略、拼写错误等)

示例

const inputElement = document.createElement('input');
inputElement.type = 'cat'; // should be illegal
inputElement.type = 123456; // already illegal (not assignable to 'string')
inputElement.type = '123456'; // should be illegal
inputElement.type = 'text'; // should be legal

检查清单

我的建议满足以下指导原则：

这不会对现有的 TypeScript/JavaScript 代码造成破坏性的变化-
这会对现有的 TypeScript 代码造成破坏性的变化，因为任何假设任意 string 可以分配给 typeof HTMLInputElement.prototype.type 的代码实际上并不是做出安全的假设。尽管如此，我还是将这个问题提交为记录这个事实的存在，并收集关于是否认为这是可以实现的破坏程度的反馈。
这不会改变现有 JavaScript 代码的运行时行为
这可以在不根据表达式的类型发出不同的 JS 的情况下实现
这不是运行时特性(例如库功能、JavaScript 输出的非 ECMAScript 语法等)
这个特性将与 TypeScript's Design Goals 的其他部分保持一致。

typescript

来源：https://github.com/microsoft/TypeScript/issues/41154

4条答案

按热度按时间

kkih6yb81#

我认为大多数动态创建输入元素的代码很可能是直接使用已知字面量设置 type ,而不是通过某种方式通过 string 传递它。
通常需要操作输入的 type 的情况似乎很常见，还有在动态创建输入时需要设置类型的能力，想象一下类似于“显示密码”按钮，可以在 type="text" 和 type="password" 之间切换。
这里的主要未知之处是如何在没有已知字面量类型的情况下尝试分配 string 的代码数量，我猜想(尽管没有任何数据来支持它)与已知字面量相比，这是一个非常不常见的用例。
参考一下，以下内容可能会受到破坏性更改的影响：

const createInput = (type: string) => {
	const inputElement = document.createElement('input);
inputElement.type = type;
// do some other setup for this element so it's not 2 lines 🤷‍♀️
	return inputElement;
};

赞(0）回复(0）举报 7个月前

ghg1uchk2#

这是一个相当古老的问题，但我也发现 type: string 已经与 React 的 JSX 冲突，因为 React 已经有了特定的 type 声明。例如，以下代码将无法编译：

import React, { HTMLProps } from 'react';

function Button({ ...props }: HTMLProps<HTMLButtonElement>)  {
    return (
        <button { ...props } />
    );
};

错误：Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'.

赞(0）回复(0）举报 7个月前

kxxlusnw3#

我对这个断点的处理有些担心，因为这可能是一开始很少通过代码设置的。不过我愿意接受更多的反馈。

赞(0）回复(0）举报 7个月前

kkbh8khc4#

它只破坏赋值(因为"button" | "color" | "checkbox" | ... 可以分配给字符串),所以如果代码从不真正设置它，那么它就不会真正是一个有影响力的破坏性更改，对吧？

赞(0）回复(0）举报 7个月前