«строка» относится только к типу, но здесь используется в качестве значения

# #typescript #firebase #vue.js #vuejs3 #vue-composition-api

Вопрос:

Новичок в машинописи. Я пытаюсь установить состояние, но получаю эту ошибку.

Ошибка: 'string' only refers to a type, but is being used as a value here.

 const state = reactive({
    user: {
        uid: "",
        provider: string[],
    }
});

const user = auth.currentUser;
if (user != null) {
    state.user.uid = user.uid || "";
    user.providerData.forEach(function(profile) {
        state.user.provider.push({
            providerId: profile.providerId,
            uid: profile.uid,
        })
    });
}
 

Комментарии:

1. Все в точности так, как написано в ошибке… не знаю, что тут можно объяснить

Ответ №1:

Основываясь только на этом утверждении:

 const state = reactive({
    user: {
        uid: "",
        provider: string[],
    }
});
 

Вы написали это с намерением присвоить provider свойству тип string[] , но в этом заявлении оно пытается установить значение (не тип) переменной, и поскольку string[] это не значение, оно выдает ошибку. Чтобы задать значение provider массива, который имеет тип string[] , вы бы использовали:

 const state = reactive({
    user: {
        // initialize as "", type is automatically set to string
        uid: "",

        // create array and override its type to an array of strings
        provider: [] as string[], 
    }
});
 

Однако, когда мы посмотрим, как вы используете эту state переменную:

 const user = auth.currentUser;
if (user != null) {
    state.user.uid = user.uid || "";
    user.providerData.forEach(function(profile) {
        state.user.provider.push({  // <-- this bit here is important
            providerId: profile.providerId,
            uid: profile.uid,
        })
    });
}
 

В этих строках вы помещаете объект типа { providerId: string, uid: string } в свой state.user.provider массив. Это означает, что ваш первый бит кода на самом деле должен быть:

 const state = reactive({
    user: {
        // initialize as "", the type is automatically set to string
        uid: "", 

        // create empty array and override its type to an array of { providerId: string, uid: string } objects
        provider: [] as ({ providerId: string, uid: string })[], 
    }
});
 

Вы также можете использовать интерфейс для обозначения этой формы объекта:

 interface ProviderData {
  providerId: string;
  uid: string;
}
// you could also use this similar syntax:
// type ProviderData = {
//   providerId: string;
//   uid: string;
// }

const state = reactive({
    user: {
        // initialize as "", the type is automatically set to string
        uid: "", 

        // create empty array and override its type to an array of ProviderData objects
        provider: [] as ProviderData[], 
    }
});
 

Ответ №2:

Создайте интерфейс под названием IUser , а затем введите свой реактивный элемент следующим образом :

 interface IUser {
  user: {
    uid: string;
    provider: string[];
};
        
const state = reactive<IUser>({
  user: {
    uid: '',
    provider: [],
  },
});