在input或者textarea的光標處插入內容，如果是鍵盤輸入倒是好說，直接把光標定位過去，鍵盤打字就可以了；如果在光標處插入內容呢，稍微費點事，倒是不是問題；但ts總是希望把一切弄得規范一些，所以正常寫不行，需要加一些內容規范起來，這一小節，我們來看一下。

目錄

1 在input光標插入內容

2 TS報錯解決

2.1 報錯信息?'inputBox' is possibly 'null'.ts

2.2 報錯信息??Property 'selectionStart' does not exist on type 'HTMLElement'.ts

2.3? 報錯信息?'cursorPosition' is possibly 'null'.ts

3 使用ts的好處?

---

1 在input光標插入內容

例如我們有一個輸入框，id定義為?inputBox ，有個按鈕，調用一個方法insertText()，代碼可以這樣寫：

<!-- HTML部分 -->
<input type="text" id="inputBox" value="ABCDE">
<button onclick="insertText()">插入文本</button>// javascript部分
function insertText() {var inputBox = document.getElementById("inputBox"); // 獲取輸入框元素var text = "好"; // 要插入的文本var cursorPosition = inputBox.selectionStart; // 獲取光標位置var textBeforeCursor = inputBox.value.substring(0, cursorPosition); // 獲取光標前的文本var textAfterCursor = inputBox.value.substring(cursorPosition); // 獲取光標后的文本var newText = textBeforeCursor + text + textAfterCursor; // 組合新的文本inputBox.value = newText; // 更新輸入框的值
}

這里的本質就是實用input組件的?selectionStart 屬性來獲取當前光標的位置，或者是索引，很簡單。

2 TS報錯解決

2.1 報錯信息?'inputBox' is possibly 'null'.ts

這里說的是inputBox 這個DOM元素，很可能是獲取不到的，就會是空，會是null，這在后續的代碼中就會帶來一些意想不到的問題，所以，我們后續在使用inputBox的時候，應該添加判斷，要求inputBox一定是存在的，才能繼續向下執行

function insertText() {var inputBox = document.getElementById("inputBox"); // 獲取輸入框元素if (inputBox) {var text = "好"; // 要插入的文本var cursorPosition = inputBox.selectionStart; // 獲取光標位置var textBeforeCursor = inputBox.value.substring(0, cursorPosition); // 獲取光標前的文本var textAfterCursor = inputBox.value.substring(cursorPosition); // 獲取光標后的文本var newText = textBeforeCursor + text + textAfterCursor; // 組合新的文本inputBox.value = newText; // 更新輸入框的值}
}

2.2 報錯信息??Property 'selectionStart' does not exist on type 'HTMLElement'.ts

這是因為 TypeScript 類型系統并不知道 <input> 元素具有 selectionStart 和 selectionEnd 這些屬性。要解決這個問題，你可以將輸入框的類型聲明為 HTMLInputElement，因為這個類型包含了這些屬性。修改后的代碼為：

function insertText() {var inputBox = document.getElementById("inputBox") as HTMLInputElement;; // 獲取輸入框元素if (inputBox) {var text = "好"; // 要插入的文本var cursorPosition = inputBox.selectionStart; // 獲取光標位置var textBeforeCursor = inputBox.value.substring(0, cursorPosition); // 獲取光標前的文本var textAfterCursor = inputBox.value.substring(cursorPosition); // 獲取光標后的文本var newText = textBeforeCursor + text + textAfterCursor; // 組合新的文本inputBox.value = newText; // 更新輸入框的值}
}

2.3? 報錯信息?'cursorPosition' is possibly 'null'.ts

這里呢，他又擔心獲取到的cursorPosition值是空，會是null，那這樣后續再利用它獲取光標的位置就又可能報錯了，所以繼續修改代碼為

function insertText() {var inputBox = document.getElementById("inputBox") as HTMLInputElement;; // 獲取輸入框元素if (inputBox) {var text = "好"; // 要插入的文本var cursorPosition = inputBox.selectionStart || 0; // 獲取光標位置var textBeforeCursor = inputBox.value.substring(0, cursorPosition); // 獲取光標前的文本var textAfterCursor = inputBox.value.substring(cursorPosition); // 獲取光標后的文本var newText = textBeforeCursor + text + textAfterCursor; // 組合新的文本inputBox.value = newText; // 更新輸入框的值}
}

3 使用ts的好處?

通過這么簡簡單單的一小段代碼，就發現了那么多可能會出現的問題，可以說使用ts，能夠規避非常多因為JS弱類型，或者是不確定值所帶來的問題，使用ts的好處可見一斑。但缺點也有，你越著急寫代碼，它越給你報錯，你越不熟悉，它問題越多。

這還不是重點，重點是你用了ts，團隊都熟練使用了，加班還是少不了，線上問題還是一樣的出，復盤的時候一個個的都很懂，結果下次還是外甥打燈籠。