Question

我正在努力理解将字段定义为string | undefined和string?的区别

我们当前的代码使用像这样的类型定义：

class Foo {
  public bar: string | undefined;
}

通过TSLint运行此代码时，它会引起注意并对此进行投诉：

考虑使用“？”声明该属性的语法，而不是其类型的“未定义”。

现在的问题是使用?语法会完全一样，还是我遗漏了细微的差别？

class Foo {
  public bar?: string;
}

因此，我们现在如何使用string | undefined类型在这种检查中：

if (foo.bar) {..}会改变吗？

看来打字稿文档对可选类型进行了更深入的介绍，但对于类在上下文中的表现却没有真正的了解。

Answer 1

bar: string | undefined：必须声明该属性，该属性可以是字符串或undefined。

bar?: string：无法声明该属性；如果已声明，请参阅之前。

Answer 2

bar?: string是可选属性，而bar: string | undefined是必需属性：

interface Foo { 
    prop?: string
}

interface Foo2 {
    prop: string | undefined
}

const foo: Foo = {} // ok
const foo2: Foo2 = {} // error

关于这种情况：

if (foo.bar) {..}

两种方法都可以（包括Intellisense可以以任何一种方式工作）。

Answer 3

与上述答案相同，并带有代码示例

// optional property, may be skipped
type Foo = {
    bar?: string; // i.e. string | undefined, optional
};

const a: Foo = {
    bar: undefined, // ok
};

const a2: Foo = { } // also ok

const a3: Foo = {
    bar: null, // ERROR!! Must be string OR undefined
};

const a4: Foo = {
    bar: 'sup', // ok, obviously
};

// --------------------

// property is NOT optional, must be declared
type Foo2 = {
    bar: string | undefined; // REQUIRED
}

const b: Foo2 = { } // ERROR!!

const b2: Foo2 = {
    bar: undefined, // ok
};

const b3: Foo2 = {
    bar: null, // ERROR!! Must be string OR undefined
};

const b4: Foo2 = {
    bar: 'sup', // ok, obviously
};

在运行时处理这些类型也有区别：

const a1 = { b: undefined }
Object.keys(a1).forEach(k => console.log(k))
// CONSOLE: b

const a2 = {}
Object.keys(a2).forEach(k => console.log(k))
// CONSOLE:

TypeScript可选类型和类型之间的区别未定义

3 个答案: