1

Edit: I found an error in my testing of the Typescript code. It now shows that the Typescript version of the code and the JS version behave the same. The "= {}" is definitely required to handle the case when no options object is passed in at the function call. Sorry for any inconvenience my error may have caused anyone.

I am fairly new to Typescript, but I have done substantial studying documents and tutorials. I've run into something in someone else's code that I need to understand. It has to do with destructuring objects as function parameters. I've received some answers to my original question, but further study has revealed something that I don't believe was covered. Yes, I understand that this technique is not unique to TS, but is present in JS as well. I've also found a good article on this subject which I've linked to here: https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6

Here is the subtle part: Not only is the option member declared optional in the ServiceInitOptions interface, but the options object is optional as well as declared in the Service interface. What I found interesting is that removing the "= {}" from the function definition does not seem to throw any error when the function is called without any arguments. In JS an error is thrown under these conditions, but I'm not getting an error in TS.

const internalData = "abcd";

export interface Service {
  value: string | null;
  init(options?: ServiceInitOptions): void;
}

interface ServiceInitOptions {
  useInternalData?: boolean;
}

const service: Service = {
  value: null,
  init<ServiceInitOptions>({ useInternalData = false } = {}) {
    if (useInternalData) {
      this.value = internalData;
    } else {
      this.value = null;
    }
  }
};

export default Service;

The area I'm having difficulty understanding is "{ useInternalData = false } = {}". Any help would be appreciated. Thank you in advance.

Improve this question
2

1 Answer 1

Reset to default
1

That part isn't actually unique to typescript, it works in plain javascript as well. It's an example of destructuring, with default values. 

init({ useInternalData = false } = {}) {

}

is the same as:

init(options) {
  if (options === undefined) {
    options = {};
  }
  let useInternalData = options.useInternalData;
  if (useInternalData === undefined) {
    useInternalData = false;
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you for the fast response. I understand the part about the destructuring with default values. I had a bit of trouble seeing that it only uses that if the option was not passed in. It seems to me that { useInternalData = false } alone achieves the same results. I've tried that with all three cases (true, false, undefined). Am I missing something?
I looked at the compiled js output for both the case with the "={}" and without it. They both make sense, and I can see that for this case, the results are the same. With var _b = (_a === void 0 ? {} : _a).useInternalData, useInternalData = _b === void 0 ? false : _b; and without {} var _b = _a.useInternalData, useInternalData = _b === void 0 ? false : _b;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.