打字稿检查值是否为字符串

Question

我有一个组件：

export type IDAta = string | number | null;

interface IDAta {
  data?: string | number | null;
  verify: boolean;
}

const App: React.FC<IDAta> = ({
  data = '',
  verify = true,
}) => {

  if ((data || data === 0) {
    return (
      <div>
        {verify && isText(data) ? (
          <Child text={data} />
        ) : (
          data
        )}
      </div>
    );
  }

};

export default App;

isText 和 Child 组件期望参数仅为字符串，但这样做verify && isText(data)后我会在打字稿中遇到错误，例如Type 'number' is not assignable to type 'string'.. 这可以通过以下方式解决：

{
  verify && typeof data === 'string' && isText(data) ? ( 
  <Child text = {data as string}/>
  ) : (
    data
  )
}

我不确定这个解决方案是否可以，因为函数typeof data === 'string'的逻辑加倍isText，如下所示：

const isText = (data: string) => {
  return typeof data === 'string';
};

问题：解决上述问题的最佳解决方案是什么？

Answer 1

类型保护/谓词函数：

function isText(data: unknown): data is string {
  return typeof data === 'string';
};