'Property does not exist on type 'never'

Question

This is similar to #40796374 but that is around types, while I am using interfaces.

Given the code below:

interface Foo {
  name: string;
}

function go() {
  let instance: Foo | null = null;
  let mutator = () => {
   instance = {
     name: 'string'
   };  
  };

  mutator();

  if (instance == null) {
   console.log('Instance is null or undefined');
  } else {
   console.log(instance.name);
  }
}

I have an error saying 'Property 'name' does not exist on type 'never'.

I don't understand how instance could ever be a 'never'. Can anyone shed some light on this?

Answer 1

If you write the component as React.FC, and use useState(), you can write it like this:

const [arr, setArr] = useState<any[]>([])

Answer 2

I had the same error and replaced the dot notation with bracket notation to suppress it.

e.g.:

obj.name -> obj['name']

Answer 3

Because you are assigning instance to null. The compiler infers that it can never be anything other than null. So it assumes that the else block should never be executed so instance is typed as never in the else block.

Now if you don't declare it as the literal value null, and get it by any other means (ex: let instance: Foo | null = getFoo();), you will see that instance will be null inside the if block and Foo inside the else block.

Never type documentation: https://www.typescriptlang.org/docs/handbook/basic-types.html#never

Edit:

The issue in the updated example is actually an open issue with the compiler. See:

https://github.com/Microsoft/TypeScript/issues/11498 https://github.com/Microsoft/TypeScript/issues/12176

Answer 4

if you're using React useRef hook with TypeScript, instead of using any you can do the following.

const ref = useRef<HTMLInputElement>(null);

Answer 5

This seems to be similar to this issue: False "Property does not exist on type 'never'" when changing value inside callback with strictNullChecks, which is closed as a duplicate of this issue (discussion): Trade-offs in Control Flow Analysis.

That discussion is pretty long, if you can't find a good solution there you can try this:

if (instance == null) {
    console.log('Instance is null or undefined');
} else {
    console.log(instance!.name); // ok now
}

Answer 6

In my own case when I was initiating the array. I used:

selectedActors: any = [];

So it makes it "dynamic" at first

Answer 7

For me the following code is working:

const [disc, setDisc] = useState<any[]>([]);

What I've seen this far is the following: When you don't specify the type you are passing to the useState() it inferes it is type never. By make it use the any[] you are able to pass the data when it is requested.

Answer 8

if you're receiving the error in parameter, so keep any or any[] type of input like below

getOptionLabel={(option: any) => option!.name}

 <Autocomplete
    options={tests}
    getOptionLabel={(option: any) => option!.name}
    ....
  />

Answer 9

For typescript developer... if you use React.useRef() hook Instead of pre-assign null, declare and use variable type any.

Example:

const initialRef: any = null;
const ref = React.useRef(initialRef);

Answer 10

In your component.ts file just declare the array as the following

public arrayName = ([] as any[]);

that's worked with me for Angular

Answer 11

It happened to me when I forgot to define a type for the variable.

Answer 12

If you use the UseState in this way, you shouldn't have a problem

const [data, setData] = useState<any>([]);

In the case of Javascript it works directly because all data types are Any by default, and this is not the case in Typescript, so you have to let the language know :)

Answer 13

In my case (I'm using typescript) I was trying to simulate response with fake data where the data is assigned later on. My first attempt was with:

let response = {status: 200, data: []};

and later, on the assignment of the fake data it starts complaining that it is not assignable to type 'never[]'. Then I defined the response like follows and it accepted it..

let dataArr: MyClass[] = [];
let response = {status: 200, data: dataArr};

and assigning of the fake data:

response.data = fakeData;

Answer 14

in useState if u've never declared the type :

it assumes it is type is never so it shows this error :"Property does not exist on type 'never'"

you can type it as :

const [datalist, setDataList] = useState<Array<Object>>([]);

Answer 15

you can type it as:

const [data, setData] = useState<Array>([]);

Answer 16

In my case it was happening because I had not typed a variable.

So I created the Search interface

export interface Search {
  term: string;
  ...
}

I changed that

searchList = [];

for that and it worked

searchList: Search[];

Answer 17

I was having problems with ? and !

This piece worked for me.

if (ref != null){
    if (ref.current != null)
        ref.current.appendChild(child);
}

Answer 18

I've came across the issue with the following expression:

const node = item ? <a href={item.link}>{item.name}</a> : item.name

And the else part item.name said Property 'name' does not exist on type 'never'.

Well this is because if there is nothing inside the item object - there can't be a name property as well.

So this warning happens when you declare something basically impossible (that's why it's never)

Answer 19

Sometimes the value could be empty initially. In that case you might want say example

let val = data.notificationId --> here it will throw an error. So we could simply write let val = data && data.notificationId

Answer 20

My issue disappeared when I DESTRUCTURED my .MAP.

ERROR - Property 'loanId' does not exist on type 'never':

    {data?.map((el) => {
        return (
            <div key={el.loanId + el.transactionDate}>{JSON.stringify(el)}</div>
        );
    })}

NO ERROR - DESTRUCTURED:

    {data?.map((el) => {
        const { loanId, transactionDate } = el;

        return <div key={loanId + transactionDate}>{JSON.stringify(el)}</div>;
    })}

Answer 21

For typescript with vue, if you want to assign a string and null value to a variable then use like this in data field: employeeType: "" || null later you can assign null or string to employeeType variable

export default defineComponent({
 data() {
    return {
        employeeType: "" || null,
    }
.........
})