在 typescript class 属性中添加可选链接后更改了变量名称

Question

Hi I have written one typescript file. What's happening when I am trying to invoke some function(ie this.details.name.fullname()) and if fullname() function is not available then I get TypeError: this.details.name.fullname is not a function in catch block. Which gives the complete information. But when I add optional chaining (ie this.details.name?.fullname()) then I get error TypeError: _a.fullname is not a function . _a is not giving any information what is object or anything.

The code I have tried is below

dummy.ts -:

type details = {
    name: {
        firstname: string;
        lastname?: any;
        fullname?: any
    }
}
class Test {
    private details: details;
    constructor(details: details) {
        this.details = details;
    }

    public async printName() {
        try {
            this.details.name?.fullname()
        } catch (err) {
            console.log(err)
        }
    }
}


const obj = new Test({ name: { firstname: 'ashish', lastname: 'butola' } })

async function xyz() {
    await obj.printName()
}

xyz()

tsconfig.json -:

  {
    "compilerOptions": {
      "module": "commonjs",
      "target": "es2015",
      "rootDir": "./src",
      "outDir": "./build",
      "inlineSourceMap": false,
      "strict": true,
      "noImplicitAny": false,
      "noImplicitThis": false,
      "strictNullChecks": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "experimentalDecorators": true,
      "lib": [
        "dom",
        "es2017"
      ]
    },
    "include": [
      "src"
    ],
    "exclude": [
      "node_modules",
      "build",
      ".vscode"
    ]
  }
  

I want the exact message ie(TypeError: this.details.name.fullname is not a function) but at the same time I want to add optional chaining so it doesn't break because name can be undefined sometime. I think I am missing some property in tsconfig.json file.

Answer 1

Your current code optionally gets the name property of the details object, and then calls the fullname function on that value, unless the entire details object is undefined. You need to optionally call the function too, to account for the case where the object exists, but the function does not:

this.details.name?.fullname?.()