你能解释一下为什么打字稿防护不起作用

Question

With Typescript 3.1 I have got a following piece of code

type Variable = string[] | File;

function isFile(variable: Variable): variable is File {
  return (variable as File).name !== undefined;
}

function getFileFromVariables(entity: EntityInterface) {
   return isFile(this.state.variables[entity.variable])
           ? this.state.variables[entity.variable]
           : undefined;
}

const file = getFileFromVariables(someEntity);

Unfortunately, I don't know why the file is const file: string[] | File | undefined const file: string[] | File | undefined const file: string[] | File | undefined instead of const file: File | undefined const file: File | undefined

Could someone tell me why it's like this and how may I fix it?

Answer 1

TypeScript isn't able to link together two instances of this.state.variables[entity.variable] - one that is passed into type guard and another used afterwards. For it, this is two unrelated queries into array, since entity.variable could be very well changed by some undercover process (or even by the type guard, if it is in the same scope), and type system isn't able to catch that.

A common workaround is to use the temporary variable:

type Variable = string[] | File;

function isFile(variable: Variable): variable is File {
  return (variable as File).name !== undefined;
}

function getFileFromVariables(entity: EntityInterface) {
   const variable = this.state.variables[entity.variable];
   return isFile(variable) ? variable : undefined;
}

const file = getFileFromVariables(someEntity);

---

Side note: try to provide a self-contained example, in other words, an MCVE . Your code was impossible to check, since we don't know neither what EntityInterface interface looks like nor what is this or this.state . My answer is assuming that this.state.variables is of type Variable and EnintyInterface extends {variable: number} , and it's enough for the code provided to give you the result you ask, but please, don't force us to do this assumptions.

Answer 2

Your question is pretty vague.

Other than that, all the problems you are encountering are from non-strict mode and some other poor practices. I suggest you the following:

• Add "strict": true to compilerOptions of tsconfig.json (at least temporarily, until you figure out the solution to your problem)
• Define explicitly what you want to get from a function eg getFileFromVariables(...): File | undefined getFileFromVariables(...): File | undefined
• If possible, don't use classic functions for such cases. Instead define a type type GetFileFromVariables = (ent: EntityInterface) => File | undefined type GetFileFromVariables = (ent: EntityInterface) => File | undefined , then const getFileFromVariables: GetFileFromVariables = () => ...

Then everything instantly becomes much clearer to you.