When using the TypeScript && operator, the resulting type is not determined by the second operand

Question

Several past discussions on SO have touched upon the concept that the inferred type from && is based on the last expression.

TypeScript’s failure to detect union type with an && operator
Uncovering the reason behind the && operator outputting the type of the second operand

However, TypeScript version 2.4.2 raises an error for the following code:

function isQuerySql(sql: string): boolean {
  return sql && _.trimStart(sql).toLowerCase().startsWith('select');
}

Error TS2322: Type 'boolean | ""' cannot be assigned to type 'boolean'. Type '""' cannot be assigned to type 'boolean'.

The issue at hand is unclear. The expression

_.trimStart(sql).toLowerCase().startsWith('select')

should be inferred as boolean. So, where does "" factor into this?

Answer 1

Answer №1

If the string sql is empty, the function isQuerySql will output an empty string after the &&, resulting in:

isQuerySql("") === ""
isQuerySql("select") == true
isQuerySql("foo") == false

Therefore, the return type will be either boolean or an empty string.

To ensure clarity, you can make the initial comparison explicit:

function isQuerySql(sql: string): boolean {
  return sql !== "" && _.trimStart(sql).toLowerCase().startsWith('select');
}

Alternatively, if you want to include null and undefined values:

function isQuerySql(sql: string): boolean {
  return !!sql && _.trimStart(sql).toLowerCase().startsWith('select');
}

Another approach could be:

function isQuerySql(sql: string): boolean {
  return sql? _.trimStart(sql).toLowerCase().startsWith('select') : false;
}

Answer 2

If the string sql is empty, the function isQuerySql will output an empty string after the &&, resulting in:

isQuerySql("") === ""
isQuerySql("select") == true
isQuerySql("foo") == false

Therefore, the return type will be either boolean or an empty string.

To ensure clarity, you can make the initial comparison explicit:

function isQuerySql(sql: string): boolean {
  return sql !== "" && _.trimStart(sql).toLowerCase().startsWith('select');
}

Alternatively, if you want to include null and undefined values:

function isQuerySql(sql: string): boolean {
  return !!sql && _.trimStart(sql).toLowerCase().startsWith('select');
}

Another approach could be:

function isQuerySql(sql: string): boolean {
  return sql? _.trimStart(sql).toLowerCase().startsWith('select') : false;
}