Строка предупреждения Phpstorm не присваивается типу параметра

Question

У меня есть файл language.js, подобный этому:

if (localStorage.getItem('lang') === 'en') {
   const LANGCONVERT = {
       "accept": "Accept",
       "accept_invitation": "Accept Invitation"
   }
} else {
   const LANGCONVERT = {
       "accept": "Aceptar",
       "accept_invitation": "Aceptar la invitacion"
   }
}

И я вызываю этот скрипт из других скриптов. И используйте как:

console.log(LANGCONVERT.accept);

это работает, но phpstorm выдает предупреждение:

Неразрешенная переменная или тип LANGCONVERT

Тип аргумента строка |Строка не может быть присвоена типу параметра

Проверяет JavaScript, вызванный аргументами функции, возвращаемые значения, присвоенные выражения, чтобы иметь правильный тип. Проверка работает в файлах JavaScript, html или jsp.

Answer 1

Переменные, объявленные с let или const, имеют блочную область. Вам необходимо объявить переменную вне оператора if и затем присвоить ее в if.

let LANGCONVERT;
if (localStorage.getItem('lang') === 'en') {
   LANGCONVERT = {
       "accept": "Accept",
       "accept_invitation": "Accept Invitation"
   }
} else {
   LANGCONVERT = {
       "accept": "Aceptar",
       "accept_invitation": "Aceptar la invitacion"
   }
}

, или вы можете инициализировать ее с помощью условного выражения:

const LANGCONVERT = localStorage.getItem('lang') === 'en' ? 
    {
       "accept": "Accept",
       "accept_invitation": "Accept Invitation"
    } : {
       "accept": "Aceptar",
       "accept_invitation": "Aceptar la invitacion"
    };

Answer 2

Я бы использовал немного другой подход. То, как вы пытаетесь использовать константы, ограничено областью блоков, используемой в условных выражениях.

Почему бы не поместить все связанные с языком строки в модуль или отдельные файлы. что-то вроде translation.en.js и translation.es.js Поместите const внутри них. Загрузите только один файл в зависимости от вашей переменной localStorage.

Получить переменную lang

let lang = localStorage.getItem('lang') 

Если вы можете импортировать модули (для совместимости используйте транспортер)

import {TRANSLATIONS} from `path/to/translation.${lang}.js` 

Если нет, то идите в старую школу

let languageFile=document.createElement('script')
     languageFile.setAttribute("type","text/javascript")
     languageFile.setAttribute("src", `path/to/translation.${lang}.js`)
     document.body.appendChild(languageFile)

А затем используйте это так:

    const LANGCONVERT = {
       accept: TRANSLATIONS['accept'],
       accept_invitation: TRANSLATIONS['accept_invitation']
   }

или используйте деструктуризацию для более коротких обозначений (опять же, только с транспортом)

   let {accept, accept_invitation} = TRANSLATIONS
   const LANGCONVERT = {accept, accept_invitation}

пример языкового файла

// make sure to export the const for module usage
const TRANSLATIONS = {
    accept: 'Accept'
    accept_invitation: 'Accept Invitation'
}

Вы поняли идею. И имейте в виду, что let, const, this все связаны с областью родительского блока, вы не можете использовать их вне этого. Чтобы преодолеть это, используйте модули, если можете, и если нет, убедитесь, что вы объявляете их в глобальном контексте.

Надеюсь, я дал вам хотя бы несколько полезных советов.