example: typecheck.

examples/write-patterns/patterns/1-online-writes/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { useShape } from '@electric-sql/react'
 
 import * as client from '../../shared/app/client'
@@ -27,22 +28,22 @@ export default function OnlineWrites() {
     ? data.sort((a, b) => a.created_at - b.created_at)
     : []
 
-  async function handleChange(id, completed) {
+  async function handleChange(id: string, completed: boolean) {
     await client.updateTodo(id, {completed: !completed})
   }
 
-  async function handleDelete(event, id) {
+  async function handleDelete(event: React.MouseEvent, id: string) {
     event.preventDefault()
 
     await client.deleteTodo(id)
   }
 
-  async function handleSubmit(event) {
+  async function handleSubmit(event: React.FormEvent) {
     event.preventDefault()
 
     const form = event.target as HTMLFormElement
     const formData = new FormData(form)
-    const title = formData.get('todo')
+    const title = formData.get('todo') as string
 
     await client.createTodo(title)
 

examples/write-patterns/shared/app/client.ts

@@ -2,8 +2,14 @@ import { v4 as uuidv4 } from 'uuid'
 
 const API_URL = import.meta.env.API_URL || 'http://localhost:3001'
 
-async function request(url, method, data) {
-  const options = {
+type RequestOptions = {
+  method: string
+  headers: HeadersInit
+  body?: string
+}
+
+async function request(url: string, method: string, data?: object) {
+  const options: RequestOptions = {
     method: method,
     headers: {
       'Content-Type': `application/json`
@@ -17,7 +23,7 @@ async function request(url, method, data) {
   return await fetch(url, options)
 }
 
-export async function createTodo(title) {
+export async function createTodo(title: string) {
   const url = `${API_URL}/todos`
   const data = {
     id: uuidv4(),
@@ -27,13 +33,13 @@ export async function createTodo(title) {
   return await request(url, 'POST', data)
 }
 
-export async function updateTodo(id, data) {
+export async function updateTodo(id: string, data: object) {
   const url = `${API_URL}/todos/${id}`
 
   return await request(url, 'PUT', data)
 }
 
-export async function deleteTodo(id) {
+export async function deleteTodo(id: string) {
   const url = `${API_URL}/todos/${id}`
 
   return await request(url, 'DELETE')

examples/write-patterns/shared/app/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite/types/importMeta.d.ts" />