们在上网的时候，经常有一些登录界面进行输入账号和密码，以及我们在网上填一些信息，这些功能的实现都是通过表单来完成的，今天我们就来讲讲表单。

表单不是指一个标签，而是指一类标签。

我们表单里所有的内容都要写在<form></form>标签中 form的action属性是将表单所填的内容发送到想要发送的后台，而method属性有两个值，分别是get和post。get和post的主要区别是get表单所传的内容会在地址栏里显示出来，并且有长度限制，而post表单所传的内容不会在地址栏显示出来，并且可以视为没有长度限制。一般系统默认get。当然get和post的细区别还是有的，在这里我就不赘述了。

其中最重要的是<input>标签，input标签也是单标签。input标签的type属性值不同，其产生的作用也不同：如：<input type="text">产生的是文本框，一般都是我们登录时输入的账号那样的文本框。<input type="password">,产生的是密码框，一般都是我们登录时输入密码的那个框框。<input type="submit">产生的是提交框，一般是我们登录的那个按钮。这些标签都有value属性，但只有提交框用最合适用，因为文本框和密码框虽然也会展示出来，但效果却差强人意，我们一般都用placeholder属性替代它。

不知大家有没有在网上做过选择题，作者是做过的。网页中的选择题也是用的input。

input的type属性值还有radio，是单选框，有几个选项就写几个input，但要注意每一个input里都要写相同的name属性和属性值，这样的话浏览器才会知道这些是同一道题。

既然有单选题那一定也有多选题了，type的checked属性是多选框，其和单选的用法一样，也都要注意name一样的为一道题，还有一个属性是checked=“checked”，这个可以设定默认选择的选项。

我们也一定遇到过选择文字就能勾选而不用非得去点选框的情况，其实input选择框只有被点击的时候才能选中，但有的时候太小不容易点击甚至有的根本没有显示出来，这样的话用户体验就会非常的差，所以我们引进了一个标签：<label></label>标签，这个标签可以实现点击文字就进行选择的功能，用法就是将input标签和文字写在同一个label标签中，注意每一个选项写一起。

我们来看一下代码和结果：

作者已经尽量去说清楚了，欢迎大家批评指教，希望多多关注[送心]

介

泛型是TypeScript中的一项重要功能，它允许我们在定义函数、接口或类时，不预先指定具体的类型，而在使用的时候再指定类型。这使得代码更加灵活和可重用。

之前你可能接触或者听说过范型，可能觉得很复杂，本文试图用更简单明了的方式，在几分钟内让你对范型有一个直观的认识。

泛型的语法

function identity<T>(arg: T): T {
  return arg;
}

这个函数可以接收任何类型的参数，并返回相同类型的结果。

使用泛型的优势

• 灵活性：泛型使您的代码更灵活，因为它可以处理各种数据类型。
• 类型安全：泛型有助于维护代码的类型安全，因为它确保使用的数据是预期的类型。
• 代码重用性：通过使用泛型，您可以编写能够与不同数据类型一起使用的函数和类型，从而减少重复的模板代码。

函数中使用泛型

我们先看一个简单的函数：

const getFirstElement = (array: number[]): number => {
  return array[0]
}

const number = [1, 2, 3]
const firstNum = getFirstElement(number)
console.log(firstNum)

比如上述例子中的 getFisrtElement 函数，传入的参数是number类型的数组，返回这个数组的第一个元素。

如果我们想让 getFisrtElement 函数也能支持返回一个字符数组的第一个元素。可能会这么改写

const getFirstElement = (array: (number | string)[]): number | string => {
  return array[0]
}

如果再有更多种类型，就要不断添加，代码不够优雅也比较冗余。当然，你也可以直接指定参数array的类型为any。不过这样就失去了Typescript中最重要的类型安全的意义了。

const getFirstElement = (array: any): any => {
  return array[0]
}

这时候使用范型就会比较适合。利用范型改写一下这个函数

const getFirstElement = <T>(array: T[]): T => {
  return array[0]
}

这样，不管入参是什么类型，这个函数都支持返回第一个元素了。如果你使用如VS Code之类的IDE，会发现，使用这个函数的地方会自动推断出正确的类型。

当然，你也可以在调用 getFisrtElement 函数的时候，手动来指定传入的参数类型，这样编译器会自动做语法校验，防止传入错误类型的参数。

const firstNum = getFirstElement<number>(number)

这样，如果你传入其他类型参数，编译器会直接提示错误。避免代码中的潜在bug。

类型安全的一个应用场景

如果你取HTML页面上的一个input对象，使用下面的代码，编辑器可能会报错

这是因为编译器不知道inputEle的具体类型，所以不确定它是否有value这个属性。所以改写成下面的范型形式，就可以避免这个问题，保证了类型安全。

const inputEle = document.querySelector<HTMLInputElement>('name')

inputEle?.value

querySelector后的范型声明了这个函数将会返回的类型。

类型中使用范型

比如有下面的代码，用于保存API接口返回的数据

type ApiResp = {
  status: number
  message: string
  data: any
}

const response: ApiResp = {
  status: 200,
  message: 'OK',
  data: {
    name: 'John',
    age: 30,
  },
}

其中的data可以保存接口中返回的任意类型的数据。比如上面例子中的用户数据。但是对应使用typscript来说，这么做不够理想。

我们改造一下

type ApiResp<DataType> = {
  status: number
  message: string
  data: DataType
}

const response: ApiResp<{ name: string; age: number }> = {
  status: 200,
  message: 'OK',
  data: {
    name: 'John',
    age: 30,
  },
}

这样，如果有新的api可以返回blog的文章信息，这个范型的类型可以马上适配

type ApiResp<DataType> = {
  status: number
  message: string
  data: DataType
}

type UserResp = { name: string; age: number }
type BlogResp = { title: string; content: string }

const userResp: ApiResp<UserResp> = {
  status: 200,
  message: 'OK',
  data: {
    name: 'John',
    age: 30,
  },
}

const blogResp: ApiResp<BlogResp> = {
  status: 200,
  message: 'OK',
  data: {
    title: 'Hello',
    content: 'World',
  },
}

这样使用范型改写后，我们的代码就有了很强的扩展性。

范型的高级特性

对于上的例子，如果我们通过API得到的data里的内容始终都是一个object的话，我们可以在类型定义的时候，使用extends关键词来加强约束

type ApiResp<DataType extends object> = {
  status: number
  message: string
  data: DataType
}

这样，如果当使用这个类型的时候，使用了非object的类型，编译器就会及时报错

const userResp: ApiResp<string> = {
  status: 200,
  message: 'OK',
  data: 'abc',
}

好了，到此，您应该对TypeScript中的范型有了足够的了解了，希望在今后的编码中可以更多的使用它来简化你的工作。