Typescript - 使用類型約束參數

Question

互聯網。 長期聆聽者，嗚嗚嗚。

我有一個使用 Typescript 的 React 應用程序。 我在一個接受有限范圍字符串的文件中有一個 function，在另一個文件中有一個 function 來調用那個東西。 今天早上我已經准備好繼續前進，因為我意識到 - 呃 - 這可能是進行一些類型檢查的絕佳機會，以提高未來的穩定性。

從那以后，我慢慢地失去了理智。 我錯過了一些重要的東西，但是沒有多少閱讀或隨機組合類型和接口讓我更接近。 任何幫助表示贊賞。

森林頁面：

toggle = (e: any) => {
  const target = e.currentTarget.dataset.toggletarget;
  Tree.toggle(target);
}

樹：

type cart = "elm" | "oak" | "pine";
type Itoggle = (target: cart) => void;

const toggle: Itoggle = (target: cart) => {
  console.log('Now toggling', target);
}

這里的問題是 ForestPage 可以傳遞任何字符串，並且一切都會正常進行。 如果不建立類型，“購物車”在做什么？

我開始將它放入 Code Snippet 中，但它似乎沒有合適的庫（包括 TypeScript），而且這篇文章已經有兩頁了，現在是星期五的 4:00。

---

上面的代碼是我的代碼的最簡單版本。 我還嘗試了各種其他選擇。

https://www.tutorialsteacher.com/typescript/typescript-interface

type cart = "elm" | "oak" | "pine";
interface Itoggle = {
  (target: cart) : void
}

const realToggle = (target: cart) => {
  console.log(target);
}

const toggle: Itoggle = realToggle;

首先，tsLint 將 Itoggle 從一個接口改回了一個類型，它自己。 然后，結果沒有改變——我仍然可以將任何值傳遞給目標。

---

如何在 TypeScript 接口中要求特定字符串

在這里我了解到“類型購物車”可以替換“枚舉購物車”。

---

https://medium.com/@KevinBGreene/typescript-enums-and-polymorphism-with-type-matching-fc3dc74b031c

enum cart = elm, oak, pine;

interface elm {
  target: cart.elm
}

interface oak {
  target: cart.oak
}

type targetType = elm | oak

const toggle = (target: targetType) => {
  console.log(target)
}

我想我有這個工作，但我需要有

console.log(target.target.target)

這顯然是愚蠢的。

const toggle = (target: cart) => {

出錯了。 恐怕我不記得確切的方法，但認為這與枚舉天生就是 {[key: string]: number} 類型有關，而我只是發送一個字符串。

---

https://2ality.com/2020/01/typescript-enums.html#use-case%3A-safer-string-constants

將枚舉從之前更改為：

enum cart {
  elm: "elm",
  oak: "oak",
  pine: "pine"
}

但它仍然想喂某種 object，而且看起來越來越不可能了。

---

https://thoughtbot.com/blog/booleans-and-enums

關於枚舉的有用文章，但它沒有提到參數。 我放棄了查看枚舉，很確定我在叫錯樹。 回到類型。

---

但是，但是......他們應該工作，對吧？ https://www.typescriptlang.org/docs/handbook/enums.html

---

我還嘗試根據可用數據動態生成新類型和枚舉，但這使得 linter 崩潰了。 我想，這是有道理的。 它不是在需要閱讀的時候構建的。

interface pleaseWork {};

const options = ["elm", "oak", "pine"];
_.each(options, (option) => {
  pleaseWork[option] = option...  etc, etc

當然，里面的品種繁多，沒有一個是好的。 同樣，從邏輯上講，這是有道理的。 但我在這一點上崩潰了。

---

無論如何，任何指導都值得贊賞。 我已經看了足夠長的時間，沒有任何意義了，我覺得如果沒有至少朝着正確的方向輕輕一推，我就不會取得進展。

Answer 1

我認為您正在專注於解決錯誤的事情。 你的第一個版本的樹應該沒問題。 但是在你調用它的地方，你用any調用它。 e是any ，因此e上的任何屬性也是any 。 這有效地告訴 typescript 不要檢查您的類型。

toggle = (e: any) => {
  const target = e.currentTarget.dataset.toggletarget;
  Tree.toggle(target);
}

我不確切知道這是什么類型的事件，所以我不確定正確的類型，但舉個例子：

toggle = (e: React.MouseEvent<HTMLButtonElement>) => {
  const target = e.currentTarget.dataset.toggletarget;
  Tree.toggle(target);
}

使用此代碼，typescript 將看到target是一個字符串，從而阻止您調用 Tree.toggle，因為它的類型太寬泛了。 添加一些代碼以檢查它是什么字符串，它將被允許

toggle = (e: React.MouseEvent<HTMLButtonElement>) => {
  const target = e.currentTarget.dataset.toggletarget;
  if (target === 'elm') {
    Tree.toggle(target);
  }
}