Enforced actual types in typescript

client-solid/.eslintrc.cjs

@@ -4,4 +4,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   root: true,
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "warn"
+  }
 };

client-solid/src/Icons.tsx

@@ -1,4 +1,6 @@
-export function Arrow() {
+import { JSXElement } from "solid-js";
+
+export function Arrow(): JSXElement {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

client-solid/src/LoginModal.tsx

@@ -1,9 +1,9 @@
-import { onCleanup, useContext } from "solid-js";
+import { JSXElement, onCleanup, useContext } from "solid-js";
 import { ModalContext } from "./Root";
 import { LoginForm } from "./RegLogin/Login";
 import { RegisterForm } from "./RegLogin/Register";
 
-export function LoginModal() {
+export function LoginModal(): JSXElement {
   const modal_ctx = useContext(ModalContext);
 
   if (!modal_ctx) {
@@ -11,7 +11,7 @@ export function LoginModal() {
     return null;
   }
 
-  const closeModal = () => {
+  const closeModal = (): void => {
     modal_ctx.setLoginModalOpen(false);
   };
 

client-solid/src/Navbar.tsx

@@ -4,7 +4,7 @@ import { LoginContext } from "./Root";
 import { ModalContext } from "./Root";
 
 // Represents a single list item in the menu bar
-function MenuItem(props: { href: string; children: JSXElement }) {
+function MenuItem(props: { href: string; children: JSXElement }): JSXElement {
   return (
     <li>
       <A class="justify-center" href={props.href} end>
@@ -15,7 +15,7 @@ function MenuItem(props: { href: string; children: JSXElement }) {
 }
 
 // Represents the menu bar at the top of the page
-function Menu() {
+function Menu(): JSXElement {
   const login_ctx = useContext(LoginContext);
   return (
     <ul class="menu md:menu-horizontal rounded-box">
@@ -25,12 +25,12 @@ function Menu() {
   );
 }
 
-export function Navbar() {
+export function Navbar(): JSXElement {
   const modal_ctx = useContext(ModalContext);
   const login_ctx = useContext(LoginContext);
   const [buttonText, setButtonText] = createSignal("Login");
 
-  const logout = () => {
+  const logout = (): void => {
     localStorage.removeItem("token");
     localStorage.removeItem("username");
     login_ctx?.setToken("");
@@ -38,7 +38,7 @@ export function Navbar() {
   };
 
   // Function to instantly elect 50 cent as president and declare war on north korea
-  const capitalizeFirst = (str: string) => {
+  const capitalizeFirst = (str: string): string => {
     return str.charAt(0).toUpperCase() + str.slice(1);
   };
 
@@ -48,7 +48,7 @@ export function Navbar() {
     else setButtonText("Login");
   }, 0);
 
-  const clickHandler = () => {
+  const clickHandler = (): void => {
     if (login_ctx?.token() != "") logout();
     else modal_ctx?.setLoginModalOpen(true);
   };

client-solid/src/NewPost.tsx

@@ -1,18 +1,17 @@
-import { Show, createSignal, useContext } from "solid-js";
+import { JSXElement, Show, createSignal, useContext } from "solid-js";
 import { createPost } from "./api";
 import { NewPost } from "./api";
 import { useNavigate } from "@solidjs/router";
 import { LoginContext } from "./Root";
 
-
-export function NewPostInputArea() {
+export function NewPostInputArea(): JSXElement {
   const [content, setContent] = createSignal("");
   const [waiting, setWaiting] = createSignal(false);
   const login_ctx = useContext(LoginContext);
 
   const nav = useNavigate();
 
-  const sendPost = () => {
+  const sendPost = (): void => {
     setWaiting(true);
 
     const response = createPost({
@@ -32,20 +31,24 @@ export function NewPostInputArea() {
   return (
     <Show
       when={!waiting()}
-      fallback={<span class="loading loading-spinner loading-lg self-center"></span>}
+      fallback={
+        <span class="loading loading-spinner loading-lg self-center"></span>
+      }
     >
       <div class="flex flex-col w-full space-y-2">
         <textarea
           class="textarea textarea-bordered h-32"
           placeholder="Speak your mind..."
           maxLength={500}
-          oninput={(input) => {
+          oninput={(input): void => {
             setContent(input.target.value);
           }}
         ></textarea>
         <button
-          class={"btn btn-primary self-end btn-sm" +
-            (content() == "" ? " btn-disabled" : "")}
+          class={
+            "btn btn-primary self-end btn-sm" +
+            (content() == "" ? " btn-disabled" : "")
+          }
           onclick={sendPost}
         >
           Submit

client-solid/src/Posts.tsx

@@ -1,10 +1,10 @@
-import { createSignal } from "solid-js";
+import { JSXElement, createSignal } from "solid-js";
 import { getPosts } from "./api";
 import { Post } from "./api";
 import { useNavigate } from "@solidjs/router";
 import { Arrow } from "./Icons";
 
-export function Posts() {
+export function Posts(): JSXElement {
   const [posts, setPosts] = createSignal([] as Post[]);
   const [loading, setLoading] = createSignal(true);
 
@@ -27,14 +27,17 @@ export function Posts() {
 }
 
 // This is the card container for a post
-export function PostSegment({ post }: { post: Post }) {
+export function PostSegment({ post }: { post: Post }): JSXElement {
   const nav = useNavigate();
   return (
     <div class="card border-b-2 flex-grow border-b-base-300 bg-base-200 hover:bg-base-300 compact text-base-content w-full">
       <div class="card-body">
         <p class="text-base-content break-words">{post?.content}</p>
         <div class="card-actions justify-end">
-          <button onClick={() => nav("/post/" + post?.id)} class="btn btn-xs">
+          <button
+            onClick={(): void => nav("/post/" + post?.id)}
+            class="btn btn-xs"
+          >
             <Arrow />
           </button>
         </div>
@@ -42,5 +45,3 @@ export function PostSegment({ post }: { post: Post }) {
     </div>
   );
 }
-
-

client-solid/src/Primary.tsx

@@ -2,9 +2,10 @@ import { Route, Routes } from "@solidjs/router";
 import { Posts } from "./Posts";
 import { SinglePost } from "./SinglePost";
 import { NewPostInputArea } from "./NewPost";
+import { JSXElement } from "solid-js";
 
 // Primary is the section of the page that holds the main content
-export function Primary() {
+export function Primary(): JSXElement {
   return (
     <Routes>
       <Route path="/" element={<Posts />} />

client-solid/src/RegLogin/Login.tsx

@@ -1,7 +1,7 @@
-import { createSignal, useContext } from "solid-js";
+import { JSXElement, createSignal, useContext } from "solid-js";
 import { LoginContext, ModalContext } from "../Root";
 
-export function LoginForm() {
+export function LoginForm(): JSXElement {
   const modal_ctx = useContext(ModalContext);
   const login_ctx = useContext(LoginContext);
   const [username, setUsername] = createSignal<string>("");
@@ -9,7 +9,7 @@ export function LoginForm() {
   const [waiting, setWaiting] = createSignal(false);
   const [error, setError] = createSignal(false);
 
-  async function loginFailed() {
+  async function loginFailed(): Promise<void> {
     setError(true);
     setWaiting(false);
     setTimeout(() => {
@@ -17,7 +17,7 @@ export function LoginForm() {
     }, 1000);
   }
 
-  async function loginPress(e: Event) {
+  async function loginPress(e: Event): Promise<void> {
     e.preventDefault();
     setWaiting(true);
     submitLogin(username(), password()).then((token) => {
@@ -42,7 +42,7 @@ export function LoginForm() {
         placeholder="Username"
         value={username()}
         class="input input-bordered"
-        onChange={(e) => {
+        onChange={(e): void => {
           setUsername(e.target.value);
         }}
       />
@@ -52,14 +52,14 @@ export function LoginForm() {
         placeholder="Password"
         value={password()}
         class="input input-bordered"
-        onChange={(e) => {
+        onChange={(e): void => {
           setPassword(e.target.value);
         }}
       />
 
       <button
         class={"btn btn-primary" + (error() ? " btn-error" : "")}
-        onClick={ loginPress }
+        onClick={loginPress}
       >
         {waiting() ? "Logging in..." : "Login"}
       </button>
@@ -73,7 +73,7 @@ export async function submitLogin(
   username: string,
   password: string
 ): Promise<string> {
-  if(username == "" || password == "") return "";
+  if (username == "" || password == "") return "";
   const response = await fetch("/api/login", {
     method: "POST",
     headers: { "Content-Type": "application/json" },

client-solid/src/RegLogin/Register.tsx

@@ -1,7 +1,7 @@
-import { createSignal, useContext } from "solid-js";
+import { JSXElement, createSignal, useContext } from "solid-js";
 import { LoginContext, ModalContext } from "../Root";
 
-export function RegisterForm() {
+export function RegisterForm(): JSXElement {
   const modal_ctx = useContext(ModalContext);
   const login_ctx = useContext(LoginContext);
   const [username, setUsername] = createSignal<string>("");
@@ -10,7 +10,7 @@ export function RegisterForm() {
   const [waiting, setWaiting] = createSignal(false);
   const [error, setError] = createSignal(false);
 
-  async function loginFailed() {
+  async function loginFailed(): Promise<void> {
     setError(true);
     setWaiting(false);
     setTimeout(() => {
@@ -18,7 +18,7 @@ export function RegisterForm() {
     }, 1000);
   }
 
-  async function regPress(e: Event) {
+  async function regPress(e: Event): Promise<void> {
     e.preventDefault();
     setWaiting(true);
     submitRegistration(username(), password(), captcha()).then((token) => {
@@ -43,7 +43,7 @@ export function RegisterForm() {
         placeholder="Username"
         value={username()}
         class="input input-bordered"
-        onChange={(e) => {
+        onChange={(e): void => {
           setUsername(e.target.value);
         }}
       />
@@ -53,7 +53,7 @@ export function RegisterForm() {
         placeholder="Password"
         value={password()}
         class="input input-bordered"
-        onChange={(e) => {
+        onChange={(e): void => {
           setPassword(e.target.value);
         }}
       />
@@ -63,7 +63,7 @@ export function RegisterForm() {
         placeholder="Captcha"
         value={password()}
         class="input input-bordered"
-        onChange={(e) => {
+        onChange={(e): void => {
           setCaptcha(e.target.value);
         }}
       />

client-solid/src/Root.tsx

@@ -1,4 +1,4 @@
-import { Accessor, createSignal } from "solid-js";
+import { Accessor, JSXElement, createSignal } from "solid-js";
 import { createContext } from "solid-js";
 
 import { Navbar } from "./Navbar";
@@ -24,7 +24,7 @@ interface LoginContextType {
 export const ModalContext = createContext<ModalContextType>();
 export const LoginContext = createContext<LoginContextType>();
 
-function Root() {
+function Root(): JSXElement {
   // All of these are passed into context providers
   const [loginModalOpen, setLoginModalOpen] = createSignal(false);
   const [token, setToken] = createSignal("");

client-solid/src/SinglePost.tsx

@@ -1,9 +1,9 @@
 import { useParams } from "@solidjs/router";
-import { Show, Suspense, createResource } from "solid-js";
+import { JSXElement, Show, Suspense, createResource } from "solid-js";
 import { getPost } from "./api";
 import { PostSegment } from "./Posts";
 
-export function SinglePost() {
+export function SinglePost(): JSXElement {
   const params = useParams();
   const [post] = createResource(params.postid, getPost);