How to conditionally add properties to an object that was initialized already, without typing it?

Suppose the following:

const person = {
  name: 'George',
  age: 30,
  hobbies: ['art', 'gaming'],
};

if (1 + 1 === 2) {
  person.position = 'Sales Clerk'; // error here
}

I can fix this as follows:

type TPerson = {
  name: string;
  age: number;
  hobbies: string[];
  position?: string;
}
const person = {
  name: 'George',
  age: 30,
  hobbies: ['art', 'gaming'],
} as TPerson;

But is it possible to somehow circumvent this? Something along the lines of,

const person = {
  name: 'George',
  age: 30,
  hobbies: ['art', 'gaming'],
} as this { position?: string; };

An existing type can be narrowed using a function which returns a type predicate and/or an assertion function.

Below I'll explain how to use them to achieve your stated goal, but first — the idiomatic and simplest way to solve the problem is just to create a new variable with the correct type annotation and set its value to the existing object:

TS Playground

type Person = {
  name: string;
  age: number;
  hobbies: string[];
  position?: string;
};

const person = {
  name: "George",
  age: 30,
  hobbies: ["art", "gaming"],
};

const actualPerson: Person = person;

if (1 + 1 === 2) {
  actualPerson.position = "Sales Clerk"; // ok
}

This doesn't create a new object in memory — just a new variable and reference to the same object — and the assignment succeeds because the existing object lacks a position property, which is compatible with { position?: string } ("an optional string property").

Unless you've somehow already exhausted all reasonable variable names in your existing scope, this is the simplest, most readable and performant method.

Now, onward...

The existing person object doesn't have a position property — the compiler correctly infers this and helpfully emits an error diagnostic when attempting to access or set it:

TS Playground

const person = {
  name: "George",
  age: 30,
  hobbies: ["art", "gaming"],
};

person.position; /* Error
       ~~~~~~~~
Property 'position' does not exist on type '{ name: string; age: number; hobbies: string[]; }'.(2339) */

One narrowing feature that TypeScript offers is a function which returns a type predicate — you'll hear this often referred to as a user-defined type guard.

In the code below, I've created such a function which validates at runtime that the argument object either has no position property, or that — if it does — the type of the property value is either "undefined" or "string". This is an imperfect, but intuitive check to determine whether or not it is currently of a shape that might be considered compatible with { position?: string }. (See caveat here)

function hasNoPositionOrStringPosition<T extends object>(
  obj: T,
): obj is T & { position?: string } {
  if (
    !("position" in obj)
    || typeof obj.position === "undefined"
    || typeof obj.position === "string"
  ) return true;
  return false;
}

It can then be used as part of a conditional clause at runtime, like this:

const person = {
  name: "George",
  age: 30,
  hobbies: ["art", "gaming"],
};

if (hasNoPositionOrStringPosition(person)) {
  person.position = "Sales Clerk"; // ok
       //^? (property) position?: string
}

person.position; /* Error
       ~~~~~~~~
Property 'position' does not exist on type '{ name: string; age: number; hobbies: string[]; }'.(2339) */

If the function returns true, then the compiler is informed that the argument is now the type in the predicate: so the compiler now understands the person object to have an optional string property called position while inside the conditional block.

But as you can see above, that type information only applies inside the conditional block. As soon as the block scope ends, the previous type is again in effect, and the compiler no longer recognizes the position property.

This technique is safe and offers powerful, granular control. But what if you want to narrow the type for the rest of the lifetime of the variable in the outer scope?

That's where assertion functions come into play.

> By the way, be sure to read all of the linked documentation pages in this answer!

In the code below I show a generalized assertion function assert that accepts some expression expr, and optionally a message string msg:

function assert(expr: unknown, msg?: string): asserts expr {
  if (!expr) throw new Error(msg);
}

If the expression is evaluated NOT to be truthy, then the function throws an error (using the message provided). Otherwise, the function completes without any issue. In the case that the error is not thrown, the compiler will infer whatever type information is in the expression expr and apply it at the current scope.

Here are a couple of examples:

TS Playground

let value = "hello" as string | number;

value
//^? let value: string | number

assert(typeof value === "string", "Value was not a string");

// If the assertion above didn't throw an exception,
// now the compiler is certain that `value` is of type `string`:
value
//^? let value: string

console.log(value); //=> "hello"

However, in the case that value isn't a string...

TS Playground

let value = 5 as string | number;

value
//^? let value: string | number

assert(typeof value === "string", "Value was not a string");
// An exception is thrown here -> Error: Value was not a string

// The assertion above will throw an exception,
// so this code won't be evaluated at runtime:
value
//^? let value: string

console.log(value); // Also won't run because the assertion threw an exception

Now that you've seen basic usages of both function types, it's time to combine them together:

TS Playground

function assert(expr: unknown, msg?: string): asserts expr {
  if (!expr) throw new Error(msg);
}

function hasNoPositionOrStringPosition<T extends object>(
  obj: T,
): obj is T & { position?: string } {
  if (
    !("position" in obj)
    || typeof obj.position === "undefined"
    || typeof obj.position === "string"
  ) return true;
  return false;
}

const person = {
  name: "George",
  age: 30,
  hobbies: ["art", "gaming"],
};

person.position; /* Error
       ~~~~~~~~
Property 'position' does not exist on type '{ name: string; age: number; hobbies: string[]; }'.(2339) */

assert(hasNoPositionOrStringPosition(person));

person.position; // ok
console.log(person.position); //=> undefined
                 //^? (property) position?: string | undefined

if (1 + 1 === 2) {
  person.position = "Sales Clerk"; // ok
       //^? (property) position?: string
}

console.log(person.position); //=> "Sales Clerk"

In the code above, person is asserted to have either no position property or one with an undefined or string value. So — for the rest of the program scope — the compiler now thinks that the person object's position property is string | undefined.

> Technically, the property is (string | undefined) & typeof person["position"], but since person had no position property, it's just string | undefined.

Hopefully this illustrates how to accomplish your goal as stated (but also why the "new variable with type annotation" method is a better approach).

If you're allowed to change the definition of person, why not

const person = {
  name: 'George',
  age: 30,
  hobbies: ['art', 'gaming'],
  position: undefined as string | undefined,
};

It may not be the cleanest but it's simple and it works.

Playground

Just change your type assertion to type annotation and it looks good to me.

type TPerson = {
  name: string;
  age: number;
  hobbies: string[];
  position?: string;
}
const person: TPerson = {
  name: 'George',
  age: 30,
  hobbies: ['art', 'gaming'],
} 

if(1+1==2) person.position = 'Clark Kent'

Or do like this if you want position to be named anything.

type TPerson = {
  name: string;
  age: number;
  hobbies: string[];
}  & Record<string, string | number | string[]>

Or like this:

type Position = {
  position?: string
}

type TPerson = {
  name: string;
  age: number;
  hobbies: string[];
} 


type TPersonWithPosition = TPerson & Position

You can't change an object in a way that it's type does not allow.

But you can always make a new object from the old one:

const person = {
  name: 'George',
  age: 30,
  hobbies: ['art', 'gaming'],
}

const personWithPosition = {
  ...person,
  position: 'Sales Clerk',
} // this object, and it's type now has a `position` property.