們在上網的時候，經常有一些登錄界面進行輸入賬號和密碼，以及我們在網上填一些信息，這些功能的實現都是通過表單來完成的，今天我們就來講講表單。

表單不是指一個標簽，而是指一類標簽。

我們表單里所有的內容都要寫在<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中的范型有了足夠的了解了，希望在今后的編碼中可以更多的使用它來簡化你的工作。