在另一个函数中使用时，变量可能未定义（打字稿“错误TS2532”）

Question

So here we go, trying Typescript. I got this function for view for my automatic global component registration in Vue. To be honest I have no idea on how this would translate in Typescript. It's the fileName inside camelCase(fileName.split('/')) function.

import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'


// other code

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  // here
  const componentName = upperFirst(
    camelCase(
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  Vue.component(
    componentName,
    componentConfig.default || componentConfig
  )
})

Typescript error TS2532: Object is possibly 'undefined'

Answer 1

pop returns string | undefined string | undefined , so you can either save that in a variable to check for undefined or be bold and claim that it will always be defined using ! :

  fileName
    .split('/')
    .pop()!
    .replace(/\.\w+$/, '')

(It is not really that bold because splitting an empty string will always return at least an array containing the empty string, so pop should resolve to an element.)

---

Variable check would look something like this:

const last = fileName
    .split('/')
    .pop();
if (last == undefined)
    throw Error("This has never happened before.")

// Compiler now will 'know' that last is a string.
camelCase(last.replace(/\.\w+$/, ''));