I’m trying to create a boolean ref called isLoggedIn
that I can use to narrow my user ref’s type. I can’t get typescript to stop complaining. I think this is possible with typescript conditional types. Is this a issue with the ref not being unwrapped?
Playground
test.ts
<code>
import { ref } from 'vue'
type User = {
id: number;
email: string;
};
const user = ref<User | null>(null);
type IsLoggedInType = typeof user.value extends User ? true : false;
const isLoggedIn = ref<IsLoggedInType>(false);
export {
user,
isLoggedIn
}
// Attempt 2
// const user = ref<User | null>(null);
// type IsLoggedInType<T extends User | null> = T extends User ? true : false;
// const isLoggedIn = ref<IsLoggedInType<typeof user.value>>(false);
// Attempt 3 - Invert
// type IsLoggedInType = typeof user.value extends null ? false : true;
</code>
<code>
import { ref } from 'vue'
type User = {
id: number;
email: string;
};
const user = ref<User | null>(null);
type IsLoggedInType = typeof user.value extends User ? true : false;
const isLoggedIn = ref<IsLoggedInType>(false);
export {
user,
isLoggedIn
}
// Attempt 2
// const user = ref<User | null>(null);
// type IsLoggedInType<T extends User | null> = T extends User ? true : false;
// const isLoggedIn = ref<IsLoggedInType<typeof user.value>>(false);
// Attempt 3 - Invert
// type IsLoggedInType = typeof user.value extends null ? false : true;
</code>
import { ref } from 'vue'
type User = {
id: number;
email: string;
};
const user = ref<User | null>(null);
type IsLoggedInType = typeof user.value extends User ? true : false;
const isLoggedIn = ref<IsLoggedInType>(false);
export {
user,
isLoggedIn
}
// Attempt 2
// const user = ref<User | null>(null);
// type IsLoggedInType<T extends User | null> = T extends User ? true : false;
// const isLoggedIn = ref<IsLoggedInType<typeof user.value>>(false);
// Attempt 3 - Invert
// type IsLoggedInType = typeof user.value extends null ? false : true;
App.vue
<code><script setup>
import { user, isLoggedIn } from './test.ts';
if(isLoggedIn.value === false){
console.log(user.value.id + 1);
}
</script>
</code>
<code><script setup>
import { user, isLoggedIn } from './test.ts';
if(isLoggedIn.value === false){
console.log(user.value.id + 1);
}
</script>
</code>
<script setup>
import { user, isLoggedIn } from './test.ts';
if(isLoggedIn.value === false){
console.log(user.value.id + 1);
}
</script>