Difference between TypeScript optional type and type | undefined

Question

I am struggling to understand the difference between having a field defined as string | undefined and string?

Our current code uses type definitions like this one:

class Foo {
  public bar: string | undefined;
}

When running this code through TSLint it will take notice and complain about it:

Consider using '?' syntax to declare this property instead of 'undefined' in its type.

Now the question is will using the ? syntax work exactly the same or are there subtle differences that I am missing?

class Foo {
  public bar?: string;
}

So how we are using the string | undefined type right now is in checks like this one:

if (foo.bar) {..} Will this change?

It seems the typescript documentation goes into depth about optional types but not really into how this behaves in a class context.

Answer 1

bar?: string is an optional property, whereas bar: string | undefined is a required one:

interface Foo { 
    bar?: string
}

interface Foo2 {
    bar: string | undefined
}

const foo: Foo = {} // OK
const foo2: Foo2 = {} // error, bar is required
const foo2: Foo2 = {bar: undefined} // OK

Regarding this case:

if (foo.bar) {..}

Both approaches are OK (including that Intellisense works in either way).