Happy types, happy life

Author: jamesdaniels

frontend/components/CategoryCard.vue

@@ -32,10 +32,7 @@
 const {
   category,
   categoryIndex,
-} = defineProps({
-  category: { required: true, type: Object as Category },
-  categoryIndex: { required: true, type: Number },
-})
+} = defineProps<{ category: Category, categoryIndex: number }>();
 
 const route = useRoute()
 

frontend/components/HeaderBar.vue

@@ -79,12 +79,12 @@ const {
   enableSubheader,
   subheaderTabs,
   subheaderTabSelection,
-} = defineProps({
-  subheaderTitle: { type: String },
-  enableSubheader: { type: Boolean },
-  subheaderTabs: { type: Array as Array<object> },
-  subheaderTabSelection: { type: String },
-})
+} = defineProps<{
+  subheaderTitle?: string|null,
+  enableSubheader?: Boolean|null,
+  subheaderTabs?: Array<HeaderTab>|Readonly<Array<HeaderTab>>|null,
+  subheaderTabSelection?: string|null,
+}>();
 
 const headers = [{ id: 0 }, { id: 1, spacer: true }]
 </script>

frontend/components/HomePage.vue

@@ -27,7 +27,7 @@
             <div class="releases flexible-columns">
               <div
                 v-for="release in recentReleases"
-                :key="release.name"
+                :key="release.id"
                 class="release"
               >
                 <ReleaseItem :release="release" />
@@ -67,11 +67,11 @@ const {
   platform,
   categories,
   recentReleases,
-} = defineProps({
-  platform: { type: String },
-  categories: { type: Array as Array<Category> },
-  recentReleases: { type: Array as Array<RepoRelease> },
-})
+} = defineProps<{
+  platform?: string|null,
+  categories?: Array<Category>|null,
+  recentReleases?:  Array<RepoRelease>|null,
+}>()
 
 function isSectionVisible(section: string) {
   if (!platform || platform === 'all') {

frontend/components/LogoCircle.vue

@@ -18,11 +18,11 @@ const {
   project,
   projectIndex,
   categoryIndex,
-} = defineProps({
-  project: { required: true, type: Object as ProjectConfig },
-  projectIndex: { required: true, type: Number },
-  categoryIndex: { required: true, type: Number },
-})
+} = defineProps<{
+  project: ProjectConfig,
+  projectIndex: number,
+  categoryIndex: number,
+}>()
 
 const colors = [
   '#039BE5',

frontend/components/Project/Buttons/Badge.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-const { badge } = defineProps({ badge: { required: true, type: Object as BlueBadge } })
+const { badge } = defineProps<{ badge: BlueBadge }>()
 </script>
 
 <style lang="scss" scoped>

frontend/components/Project/Buttons/Repo.vue

@@ -33,17 +33,17 @@ import { formatDistanceToNow } from 'date-fns'
 const {
   info,
   projectConfig,
-} = defineProps({
-  info: { required: true, type: Object as ProjectInfo },
-  projectConfig: { required: true, type: Object as ProjectConfig },
-})
+} = defineProps<{
+  info: ProjectInfo,
+  projectConfig: ProjectConfig,
+}>()
 
 const showCloneCmd = false // TODO: Needed?
 const badges = [
   {
     href: `https://github.com/${info.org}/${info.repo}/stargazers`,
     icon: 'star',
-    value: info.stars,
+    value: info.stars.toString(),
     classes: '',
   },
   {

frontend/components/Project/Detail.vue

@@ -52,13 +52,13 @@ const {
   env,
   subpageId,
   pageTitle,
-} = defineProps({
-  projectConfig: { required: true, type: Object as ProjectConfig },
-  projectContent: { required: true, type: Object as PageContent },
-  env: { type: String },
-  subpageId: { type: String },
-  pageTitle: { required: true, type: String },
-})
+} = defineProps<{
+  projectConfig: ProjectConfig|Readonly<ProjectConfig>,
+  projectContent: PageContent|Readonly<PageContent>,
+  env?: string|null,
+  subpageId?: string|null,
+  pageTitle: string,
+}>()
 
 useHead({
   title: pageTitle,
@@ -112,7 +112,7 @@ function getSubheaderTabs() {
     ),
   ]
   if (projectConfig.tabs) {
-    projectConfig.tabs.forEach((tab: TabConfig) => {
+    projectConfig.tabs.forEach((tab) => {
       tabs.push(
         new SelectableLink(tab.title, tab.href, true),
       )

frontend/components/Project/Footer.vue

@@ -21,10 +21,10 @@ import { formatDistanceToNow } from 'date-fns'
 const {
   info,
   projectConfig,
-} = defineProps({
-  info: { required: true, type: Object as ProjectInfo },
-  projectConfig: { required: true, type: Object as ProjectConfig },
-})
+} = defineProps<{
+  info: ProjectInfo,
+  projectConfig: ProjectConfig,
+}>()
 const lastFetchedFromNow = formatDistanceToNow(projectConfig.last_fetched)
 </script>
 

frontend/components/Project/Preview.vue

@@ -33,11 +33,11 @@ const {
   project,
   projectIndex,
   categoryIndex,
-} = defineProps({
-  project: { required: true, type: Object as ProjectConfig },
-  projectIndex: { required: true, type: Number },
-  categoryIndex: { required: true, type: Number },
-})
+} = defineProps<{
+  project: ProjectConfig,
+  projectIndex: number,
+  categoryIndex: number,
+}>()
 
 // TODO extract into util
 const getDescription = () => {

frontend/components/Project/Section.vue

@@ -8,7 +8,7 @@
     <div class="content">
       <h2>{{ section.name }}</h2>
       <!-- eslint-disable vue/no-v-html -->
-      <div v-html="DOMPurify.sanitize(section.content)" />
+      <div v-html="DOMPurify.sanitize(section.content || '')" />
       <!-- eslint-enable -->
     </div>
   </div>
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import DOMPurify from 'isomorphic-dompurify'
 
-const { section } = defineProps({ section: { required: true, type: Object } })
+const { section } = defineProps<{ section: Section }>()
 </script>
 
 <style lang="scss" scoped>