代码之家 › 专栏 › 技术社区 › Tigraine

TypeScript可选类型和类型|未定义之间的差异

typescript2.0 typescript-typings typescript

Tigraine · 技术社区 · 6 年前

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

我们当前的代码使用如下类型定义:

class Foo {
  public bar: string | undefined;
}

当通过TSLint运行此代码时,它会注意到并抱怨:

考虑使用“?”语法来声明此属性,而不是在其类型中定义“未定义”。

? 语法的工作原理完全相同,还是我遗漏了一些细微的差异?

class Foo {
  public bar?: string;
}

那么我们是如何使用

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

typescript文档似乎深入讨论了可选类型,但并没有真正讨论它在类上下文中的行为。

2 回复 | 直到 6 年前

Nurbol Alpysbayev 3 年前

bar?: string 是可选属性,而 bar: string | undefined 是必需的:

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

关于本案:

if (foo.bar) {..}

Denis Frezzato 6 年前

bar: string | undefined :必须声明属性,它可以是字符串或 undefined .

bar?: string :无法声明该属性;如果已经声明,请参阅。

Arghya C 4 年前

// 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:

推荐文章

user3587624 · 禁用FluentUI React组件上的onClick事件

1 年前