Lembre-se que o TypeScript não consegue garantir, só a partir de uma definição de tipos, que um valor de fato terá aquele tipo.
Voltemo-nos ao seu tipo Themes
:
type Themes = 'light' | 'dark';
Veja que ele só aceita strings que sejam exatamente light
ou dark
. No entanto, o tipo string
(retornado pelo método localStorage.getItem
) é uma string.
E, obviamente, o tipo string, representando a infinita possibilidade de strings, é bem mais amplo que o seu tipo Themes
, que codifica somente duas dessas possibilidades.
Portanto, o TypeScript rejeita o seu código – e rejeita corretamente. Só com o que ele tem, não há como garantir que a variável storage
(do tipo string
, que veio do método getItem
) de fato é atribuível ao tipo light
ou dark
. Nada impediria que fosse uma string modified-haha
.
Esse é o caso de se utilizar um recurso do TypeScript chamado type guard. Você basicamente utiliza de mecanismos em runtime (estaticamente compreendidos pelo TypeScript) que podem afirmar, com certeza, que o valor que você está utilizando trata-se do tipo desejado.
Um exemplo simples:
type Theme = 'dark' | 'light';
const userTheme = localStorage.getItem('MY_PAGE_THEME');
if (userTheme === 'dark' || userTheme === 'light') {
// Aqui o TypeScript é capaz de determinar que o tipo de `rawTheme` é `Theme`:
const ok: Theme = userTheme; // Não dá erros.
}
Uma outra opção é negar a condição e utilizar um mecanismo disruptivo (que modifica o fluxo de código) dentro do bloco condicional, como um lançamento de exceção ou return
da função:
type Theme = 'dark' | 'light';
function normalizeTheme(raw: string | null): Theme {
if (!(userProvidedTheme === 'dark' || userProvidedTheme === 'light')) {
return 'dark'; // Valor padrão, obviamente do tipo `Theme`.
}
return userProvidedTheme; // Ok. Aqui o TypeScript tem certeza que trata-se do tipo `Theme`.
}
const userTheme = localStorage.getItem('MY_PAGE_THEME');
const theme = normalizeTheme(userTheme);
É importantíssimo entender a diferença entre as verificações estáticas feitas pelo TypeScript e a diferença entre código runtime. Eventualmente, conduto, o TypeScript precisa que você alie verificações em runtime (codificadas via guardas) para que ele possa garantir que um valor mais genérico é, realmente, de um tipo mais exclusivo.
Claro que a guarda, eventualmente, pode conter erros de lógica. Mas aí não é culpa do TypeScript, que não tem outra alternativa senão delegar esse tipo de verificação manual ao programador. Em resumo, veja guardas como um recurso extremamente poderoso, mas que deve ser utilizado com cuidado.