Question

互联网。长期聆听者，等等等等。

我有一个使用Typescript的React应用程序。我在一个文件中接受一个有限范围的字符串的函数，并在另一个文件中调用该函数的函数。当我意识到–嗯-这可能是进行类型检查，提高稳定性的绝佳机会时，我已经准备好在今天早上出发。

从那时起，我一直在慢慢失去理智。我缺少一些重要的东西，但是没有更多的阅读或随机组合类型和接口让我更加接近。任何帮助表示赞赏。

ForestPage：

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可以传递任何字符串，并且一切都会正常进行。如果没有建立类型，“购物车”在做什么？

我开始将其放入代码段中，但似乎没有适当的库（包括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从接口改回类型。然后，结果保持不变-我仍然可以将任何值传递给目标。

How to require a specific string in TypeScript interface

在这里我了解到“类型推车”可以代替“枚举推车”。

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"
}

但是它仍然想被喂食某种物体，无论如何它看起来越来越不可能了。

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

关于枚举的有用文章，但没有提及参数。我放弃看枚举，很确定我在树错了树皮。返回类型。

但是，但是...他们应该起作用，对吧？ https://www.typescriptlang.org/docs/handbook/enums.html

我还尝试了根据可用数据快速生成新类型和枚举的尝试，但这使短绒毛发生了故障。我想这是有道理的。它不是在需要阅读的时候构建的。

interface pleaseWork {};

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

当然，其中的各种品种都不好。再次，从逻辑上讲，这是有道理的。但是我在这一点上感到不解。

无论如何，任何指导都是值得的。我已经看了足够长的时间，以至于没有任何意义了，而且我觉得如果没有朝着正确的方向轻轻推一下，我就不会取得进步。

Answer 1

我认为您正在集中精力解决错误的问题。您的Tree的第一个版本应该没问题。但是，在调用它的地方，您正在使用any进行调用。 e是any，因此e上的任何属性也是any。这有效地告诉打字稿不要检查您的类型。

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);
}

使用此代码，打字稿将看到target是一个字符串，因此阻止您调用Tree.toggle，因为该类型太广泛了。添加一些代码以检查它是什么字符串，并且将允许使用该字符串

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

打字稿-使用类型约束参数

1 个答案: