more type improvements

Author: silverwind

web_src/js/components/DiffFileList.vue

@@ -17,7 +17,7 @@ function toggleFileList() {
   store.fileListIsVisible = !store.fileListIsVisible;
 }
 
-function diffTypeToString(pType) {
+function diffTypeToString(pType: number) {
   const diffTypes = {
     1: 'add',
     2: 'modify',
@@ -28,7 +28,7 @@ function diffTypeToString(pType) {
   return diffTypes[pType];
 }
 
-function diffStatsWidth(adds, dels) {
+function diffStatsWidth(adds: number, dels: number) {
   return `${adds / (adds + dels) * 100}%`;
 }
 

web_src/js/components/DiffFileTree.vue

@@ -60,7 +60,7 @@ const fileTree = computed(() => {
       parent = newParent;
     }
   }
-  const mergeChildIfOnlyOneDir = (entries) => {
+  const mergeChildIfOnlyOneDir = (entries: Array<Record<string, any>>) => {
     for (const entry of entries) {
       if (entry.children) {
         mergeChildIfOnlyOneDir(entry.children);
@@ -110,13 +110,13 @@ function toggleVisibility() {
   updateVisibility(!store.fileTreeIsVisible);
 }
 
-function updateVisibility(visible) {
+function updateVisibility(visible: boolean) {
   store.fileTreeIsVisible = visible;
   localStorage.setItem(LOCAL_STORAGE_KEY, store.fileTreeIsVisible);
   updateState(store.fileTreeIsVisible);
 }
 
-function updateState(visible) {
+function updateState(visible: boolean) {
   const btn = document.querySelector('.diff-toggle-file-tree-button');
   const [toShow, toHide] = btn.querySelectorAll('.icon');
   const tree = document.querySelector('#diff-file-tree');

web_src/js/components/DiffFileTreeItem.vue

@@ -25,7 +25,7 @@ defineProps<{
 const store = diffTreeStore();
 const collapsed = ref(false);
 
-function getIconForDiffType(pType) {
+function getIconForDiffType(pType: number) {
   const diffTypes = {
     1: {name: 'octicon-diff-added', classes: ['text', 'green']},
     2: {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
@@ -36,7 +36,7 @@ function getIconForDiffType(pType) {
   return diffTypes[pType];
 }
 
-function fileIcon(file) {
+function fileIcon(file: File) {
   if (file.IsSubmodule) {
     return 'octicon-file-submodule';
   }

web_src/js/components/PullRequestMergeForm.vue

@@ -68,7 +68,7 @@ function toggleActionForm(show: boolean) {
   mergeMessageFieldValue.value = mergeStyleDetail.value.mergeMessageFieldText;
 }
 
-function switchMergeStyle(name, autoMerge = false) {
+function switchMergeStyle(name: string, autoMerge = false) {
   mergeStyle.value = name;
   autoMergeWhenSucceed.value = autoMerge;
 }

web_src/js/components/RepoActionView.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import {SvgIcon} from '../svg.ts';
 import ActionRunStatus from './ActionRunStatus.vue';
-import {defineComponent} from 'vue';
+import {defineComponent, type PropType} from 'vue';
 import {createElementFromAttrs, toggleElem} from '../utils/dom.ts';
 import {formatDatetime} from '../utils/time.ts';
 import {renderAnsi} from '../render/ansi.ts';
@@ -77,7 +77,7 @@ export default defineComponent({
       default: '',
     },
     locale: {
-      type: Object,
+      type: Object as PropType<Record<string, string>>,
       default: null,
     },
   },

web_src/js/components/RepoActivityTopAuthors.vue

@@ -8,13 +8,15 @@ const colors = ref({
   textAltColor: 'white',
 });
 
-// possible keys:
-// * avatar_link: (...)
-// * commits: (...)
-// * home_link: (...)
-// * login: (...)
-// * name: (...)
-const activityTopAuthors = window.config.pageData.repoActivityTopAuthors || [];
+type ActivityAuthorData = {
+  avatar_link: string;
+  commits: number;
+  home_link: string;
+  login: string;
+  name: string;
+}
+
+const activityTopAuthors: Array<ActivityAuthorData> = window.config.pageData.repoActivityTopAuthors || [];
 
 const graphPoints = computed(() => {
   return activityTopAuthors.map((item) => {
@@ -26,7 +28,7 @@ const graphPoints = computed(() => {
 });
 
 const graphAuthors = computed(() => {
-  return activityTopAuthors.map((item, idx) => {
+  return activityTopAuthors.map((item, idx: number) => {
     return {
       position: idx + 1,
       ...item,

web_src/js/components/RepoContributors.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import {defineComponent} from 'vue';
+import {defineComponent, type PropType} from 'vue';
 import {SvgIcon} from '../svg.ts';
 import dayjs from 'dayjs';
 import {
@@ -61,7 +61,7 @@ export default defineComponent({
   components: {ChartLine, SvgIcon},
   props: {
     locale: {
-      type: Object,
+      type: Object as PropType<Record<string, any>>,
       required: true,
     },
     repoLink: {
@@ -89,7 +89,7 @@ export default defineComponent({
     this.fetchGraphData();
 
     fomanticQuery('#repo-contributors').dropdown({
-      onChange: (val) => {
+      onChange: (val: string) => {
         this.xAxisMin = this.xAxisStart;
         this.xAxisMax = this.xAxisEnd;
         this.type = val;

web_src/js/svg.ts

@@ -1,4 +1,4 @@
-import {defineComponent, h} from 'vue';
+import {defineComponent, h, type PropType} from 'vue';
 import {parseDom, serializeXml} from './utils.ts';
 import giteaDoubleChevronLeft from '../../public/assets/img/svg/gitea-double-chevron-left.svg';
 import giteaDoubleChevronRight from '../../public/assets/img/svg/gitea-double-chevron-right.svg';
@@ -197,13 +197,13 @@ export function svgParseOuterInner(name: SvgName) {
 export const SvgIcon = defineComponent({
   name: 'SvgIcon',
   props: {
-    name: {type: String, required: true},
+    name: {type: String as PropType<SvgName>, required: true},
     size: {type: Number, default: 16},
     className: {type: String, default: ''},
     symbolId: {type: String},
   },
   render() {
-    let {svgOuter, svgInnerHtml} = svgParseOuterInner(this.name as SvgName);
+    let {svgOuter, svgInnerHtml} = svgParseOuterInner(this.name);
     // https://vuejs.org/guide/extras/render-function.html#creating-vnodes
     // the `^` is used for attr, set SVG attributes like 'width', `aria-hidden`, `viewBox`, etc
     const attrs = {};
@@ -215,7 +215,7 @@ export const SvgIcon = defineComponent({
     attrs[`^height`] = this.size;
 
     // make the <SvgIcon class="foo" class-name="bar"> classes work together
-    const classes = [];
+    const classes: Array<string> = [];
     for (const cls of svgOuter.classList) {
       classes.push(cls);
     }