Objects and Interfaces

Optional Properties

Optional properties allow an object to include a value only when it exists.

optional property A `?` after a property name means the property may be missing.

Optional Properties

nicknameValue
optional.ts
Replay: real traced execution (multi-file project)
interface Profile {
    name: string;
    nickname?: string;
}

const nicknameValue: string | undefined = undefined;
const profile: Profile = {
    name: "Grace"
};

if (nicknameValue !== undefined) {
    profile.nickname = nicknameValue;
}

const displayName: string = profile.nickname ?? profile.name;
console.log(`display=${displayName}`);

interface Profile {
    name: string;
    nickname?: string;
}

const nicknameValue: string | undefined = "Ace";
const profile: Profile = {
    name: "Grace"
};

if (nicknameValue !== undefined) {
    profile.nickname = nicknameValue;
}

const displayName: string = profile.nickname ?? profile.name;
console.log(`display=${displayName}`);

interface Profile {
    name: string;
    nickname?: string;
}

const nicknameValue: string | undefined = "Coder";
const profile: Profile = {
    name: "Grace"
};

if (nicknameValue !== undefined) {
    profile.nickname = nicknameValue;
}

const displayName: string = profile.nickname ?? profile.name;
console.log(`display=${displayName}`);

  1. nicknameValue ← undefined, profile ← [object Object], displayName ← Grace

    3    nickname?: string;4}56const nicknameValue→ undefined: string | undefined = undefined;  //@nicknameValue="Ace", "Coder"7const profile→ [object Object]: Profile = {8    name: "Grace"9};1011if (nicknameValue !== undefined) {12    profile.nickname = nicknameValue;13}1415const displayName→ Grace: string = profile.nickname→ undefined ?? profile.nameGrace;16console.log(`display=${displayNameGrace}`);
    outputdisplay=Grace

  1. nicknameValue ← Ace, profile ← [object Object]

    3    nickname?: string;4}56const nicknameValue→ Ace: string | undefined = "Ace";7const profile→ [object Object]: Profile = {8    name: "Grace"9};

  2. if (nicknameValue !== undefined)

    8    name: "Grace"9};1011if (nicknameValueAce !== undefined) {12    profile.nickname = nicknameValueAce;13}

  3. displayName ← Ace, profile.nickname ← Ace

    12    profile.nickname = nicknameValue;13}1415const displayName→ Ace: string = profile.nickname→ Ace ?? profile.nameGrace;16console.log(`display=${displayNameAce}`);
    outputdisplay=Ace

  1. nicknameValue ← Coder, profile ← [object Object]

    3    nickname?: string;4}56const nicknameValue→ Coder: string | undefined = "Coder";7const profile→ [object Object]: Profile = {8    name: "Grace"9};

  2. if (nicknameValue !== undefined)

    8    name: "Grace"9};1011if (nicknameValueCoder !== undefined) {12    profile.nickname = nicknameValueCoder;13}

  3. displayName ← Coder, profile.nickname ← Coder

    12    profile.nickname = nicknameValue;13}1415const displayName→ Coder: string = profile.nickname→ Coder ?? profile.nameGrace;16console.log(`display=${displayNameCoder}`);
    outputdisplay=Coder

Pick the Display Name

  1. profile always has name.
  2. nickname may be missing.
  3. When nicknameValue exists, the code adds profile.nickname.
  4. profile.nickname ?? profile.name uses the nickname first, then falls back to the name. | nicknameValue | Display name | | --- | --- | | undefined | "Grace" | | "Ace" | "Ace" |

Exercise: optional.ts

Add an optional nickname to a profile and fall back to the name when no nickname is set