javascript - typescript 检查值是否为字符串

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)然后我在 typescript 中遇到错误，例如 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

一个 type guard/predicate function :

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