Question

我只是在尝试打字稿，以了解大惊小怪的事情，但是我在类型检查方面遇到了一些问题。

我故意将错误的道具传递给功能组件，以查看是否引发了错误，但似乎并没有找到原因。

按钮组件


interface Props {
  label: string;
}

const Button: React.FC<Props> = ({ label }) => {
  return (
    <TouchableOpacity
      style={tailwind(
        "rounded-full border-2 rounded-lg py-2 px-4 bg-blue-100 border-blue-600"
      )}
    >
      <Text style={tailwind("text-xl")}>{label}</Text>
    </TouchableOpacity>
  );
};

使用的按钮

    <View style={tailwind("w-full h-full flex justify-start")}>
      <View style={tailwind("w-full")}>
        <Button text={true} />
      </View>
    </View>

tsconfig.json

  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true
  }
}

Answer 1

对于将来来这里的任何人-我都知道了。似乎babel捕获了我的打字稿文件并将其编译为JS，而没有进行类型检查和其他TS东西，因此我修改了CLI命令，以同时使用npm包来并行运行TS和expo。

"ios": "concurrently -k -n TYPESCRIPT,EXPO -c yellow,green 'yarn tsc --watch' 'expo start --ios'"

传递错误类型的prop时，Typescript不会引发错误

1 个答案: