346

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?

7
  • 14
    It's pretty clear from your code that the else would indeed never get evaluated. The compiler is smart enough to see it. Commented May 24, 2017 at 2:32
  • This is an example, let me add some more code that shows it still has the issue. Commented May 24, 2017 at 4:50
  • 62
    It's pretty clear from your code that the else would indeed never get evaluated. It isn't obvious at all nor there is a smart compiler. There is a dumb transpiler which deviates from the established practices. In C#, for instance, one can assign null to any object... Commented Nov 14, 2018 at 19:07
  • 1
    @BozhidarStoyneff, it is established but regrettable practice: en.wikipedia.org/wiki/Null_pointer#History
    – rkuksin
    Commented Dec 21, 2020 at 13:43
  • 2
    This becomes a serious head scratching problem when using with try catch finally variables where they need to be worked on in finally block..
    – Lau
    Commented Feb 22, 2022 at 14:39

24 Answers 24

239

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

const [arr, setArr] = useState<any[]>([])
8
  • 5
    This solved my problem, where I can't assign a type to arr as arr: any.
    – cst1992
    Commented Oct 21, 2020 at 9:24
  • 1
    After 17 straight hours of working on an issue today, this was the root problem and the solution. Thank you
    – velkoon
    Commented Jun 25, 2021 at 8:43
  • 2
    Any reasoning behind why this solves the problem please? Is this just adding extra unnecessary Typescript or is it actually making he code more Type Safe?
    – Leafyshark
    Commented Dec 1, 2021 at 12:20
  • 2
    @blue-hope would also love to hear an explanatin.
    – emplo yee
    Commented Dec 3, 2021 at 15:50
  • 1
    In retrospect, from the point of view of the original question, the above example is just casting instance to any type to get a property called name and avoid never accessing. The method of avoiding null with ! (bang) or the method of making the compiler not infer the type as null (getFoo) as answered by other people are also valid. My solution is as same as console.log((instance as any).name)
    – blue-hope
    Commented Dec 4, 2021 at 12:28
173

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

e.g.:

obj.name -> obj['name']
2
146

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

4
74

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

const ref = useRef<HTMLInputElement>(null);
1
  • 8
    You saved my day. For others: if your element is not input, change what's inside <> accordingly, eg. <HTMLDivElement>.
    – Betty
    Commented Mar 16, 2023 at 11:39
26

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
}
3
  • Thanks @Nitzan. That's exactly what I'm doing in my code, Commented May 24, 2017 at 7:27
  • 1
    For some situation, I still got the same error, even If I use this method, something like a!.b!.c, and told that Property c ....
    – Tokenyet
    Commented Mar 9, 2020 at 10:41
  • 1
    Explanation for the '!' operator is in this answer: stackoverflow.com/a/42274019/1393400
    – Xpleria
    Commented Jul 27, 2021 at 12:14
12

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

selectedActors: any = [];

So it makes it "dynamic" at first

11

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.

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Sep 23, 2021 at 4:31
11

For typescript developer using React... 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);
2
  • 5
    Or const ref = useRef<any>(null); Commented Nov 9, 2022 at 21:42
  • 1
    what is the point of using any if you're writing an answer for TypeScript
    – Nivethan
    Commented Dec 10, 2022 at 13:40
9

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}
    ....
  />
2
  • 1
    In my case, annotating the parameter with any worked for me: this.state.projects.map((project: any, idx) => <Project key={idx} title={project.name}/>) Commented Nov 27, 2020 at 15:37
  • Since this also worked forme, however we're not taking advantage of the Interface resolutions. Commented Jan 25, 2021 at 22:15
5

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

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

that's worked with me for Angular

3

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

3

In React, 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 :)

1

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;
1

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>>([]);
1

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,
    }
.........
})
1

With React, you can type it as:

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

1
  • This code is incorrect because Array expects a generic...
    – mochaccino
    Commented Jan 26, 2023 at 20:27
0

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[];
0

I was having problems with ? and !

This piece worked for me.

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

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)

0

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

1
  • you can also write this as: data?.notificationId === data && data.notificationId; just fyi =)
    – fruitloaf
    Commented Mar 31, 2023 at 19:46
0

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>;
    })}
0
When showing Property 'id' does not exist on type 'never'. message

selectedMinistryDivision(selectedId) {          
        for( let i = 0; i < this.ministryDivisions.length; i++) {
            if (selectedId == this.ministryDivisions[i].id) {
                return this.ministryDivisions[i];
            }
        }
    }

Solved my problem
selectedMinistryDivision(selectedId) {          
        for( let i = 0; i < this.ministryDivisions.length; i++) {
            if (selectedId == this.ministryDivisions[i]['id']) {
                return this.ministryDivisions[i];
            }
        }
    }

I have changed from this.ministryDivisions[i].id to this.ministryDivisions[i]['id']

0

This example worked for me. Here we are using a simple custom type object (product):

export interface ProductType {
    id: number;
    name: string;
}

export const Product: FC = () => {
    const [products, setProducts] = useState<ProductType[]>([]);
0

Another reason this error can occur is if a function incorrectly returns different types based on some condition. For example:

if (!items.length) {
  return []
}

return { data: items }

I came across this issue when refactoring a function to return an object instead of an array, but I forgot to update the return value inside the if statement.

Correcting the issue looked like this:

if (!items.length) {
  return { data: [] }
}

return { data: items }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.