Nuxt.js TypeScript集成 #

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true
  }
}

npx nuxi typecheck

interface User {
  id: number
  name: string
  email: string
  role: 'admin' | 'user' | 'guest'
  avatar?: string
  createdAt: string
  updatedAt: string
}

interface Post {
  id: number
  title: string
  content: string
  excerpt: string
  slug: string
  author: User
  tags: string[]
  status: 'draft' | 'published'
  publishedAt?: string
  createdAt: string
  updatedAt: string
}

interface ApiResponse<T> {
  data: T
  message?: string
  pagination?: {
    page: number
    pageSize: number
    total: number
    totalPages: number
  }
}

interface ApiError {
  statusCode: number
  message: string
  errors?: Record<string, string[]>
}

type AsyncDataResult<T> = {
  data: Ref<T | null>
  pending: Ref<boolean>
  error: Ref<Error | null>
  refresh: () => Promise<void>
}

declare module 'nuxt/schema' {
  interface RuntimeConfig {
    jwtSecret: string
    databaseUrl: string
    public: {
      apiBase: string
      siteName: string
      siteUrl: string
    }
  }
}

export {}

<script setup lang="ts">
interface Props {
  title: string
  subtitle?: string
  count: number
  items: string[]
  config: {
    theme: 'light' | 'dark'
    size: 'small' | 'medium' | 'large'
  }
  onClose?: () => void
}

const props = withDefaults(defineProps<Props>(), {
  subtitle: '',
  count: 0,
  items: () => []
})
</script>

<script setup lang="ts">
interface Emits {
  (e: 'update', value: string): void
  (e: 'delete', id: number): void
  (e: 'change', event: Event): void
}

const emit = defineEmits<Emits>()

const handleUpdate = () => {
  emit('update', 'new value')
}
</script>

<script setup lang="ts">
interface SlotProps {
  item: Post
  index: number
  isSelected: boolean
}
</script>

<template>
  <div>
    <slot name="item" :item="item" :index="index" :isSelected="isSelected">
      {{ item.title }}
    </slot>
  </div>
</template>

<script setup lang="ts" generic="T extends { id: number }">
interface Props {
  items: T[]
  selectedId?: number
}

const props = defineProps<Props>()

const selectedItem = computed(() => 
  props.items.find(item => item.id === props.selectedId)
)
</script>

interface UseAuthReturn {
  user: Ref<User | null>
  token: Ref<string | null>
  isAuthenticated: ComputedRef<boolean>
  isLoading: ComputedRef<boolean>
  login: (credentials: LoginCredentials) => Promise<void>
  logout: () => Promise<void>
  fetchUser: () => Promise<void>
}

export const useAuth = (): UseAuthReturn => {
  const user = useState<User | null>('user', () => null)
  const token = useCookie('token')
  
  const isAuthenticated = computed(() => !!user.value && !!token.value)
  const isLoading = ref(false)
  
  const login = async (credentials: LoginCredentials) => {
    isLoading.value = true
    try {
      const { data } = await useFetch<LoginResponse>('/api/auth/login', {
        method: 'POST',
        body: credentials
      })
      
      if (data.value) {
        user.value = data.value.user
        token.value = data.value.token
      }
    } finally {
      isLoading.value = false
    }
  }
  
  const logout = async () => {
    await useFetch('/api/auth/logout')
    user.value = null
    token.value = null
  }
  
  const fetchUser = async () => {
    const { data } = await useFetch<User>('/api/auth/me')
    user.value = data.value
  }
  
  return {
    user,
    token,
    isAuthenticated,
    isLoading,
    login,
    logout,
    fetchUser
  }
}

interface UseFetchOptions<T> {
  immediate?: boolean
  lazy?: boolean
  server?: boolean
  transform?: (data: T) => T
  default?: () => T
}

export const useApiFetch = <T>(
  url: string,
  options: UseFetchOptions<T> = {}
) => {
  const { immediate = true, lazy = false, server = true } = options
  
  return useFetch<T>(url, {
    immediate,
    lazy,
    server,
    ...options
  })
}

import { z } from 'zod'

const createPostSchema = z.object({
  title: z.string().min(1).max(200),
  content: z.string().min(1),
  tags: z.array(z.string()).optional(),
  status: z.enum(['draft', 'published']).default('draft')
})

type CreatePostInput = z.infer<typeof createPostSchema>

export default defineEventHandler(async (event) => {
  const body = await readValidatedBody(event, createPostSchema.parse)
  
  const post = await createPost(body)
  
  return { post }
})

interface PostResponse extends ApiResponse<Post> {}

interface PostListResponse extends ApiResponse<Post[]> {
  pagination: {
    page: number
    pageSize: number
    total: number
    totalPages: number
  }
}

export default defineEventHandler(async (event): Promise<PostListResponse> => {
  const query = getQuery(event)
  
  const { posts, total } = await fetchPosts(query)
  
  return {
    data: posts,
    pagination: {
      page: Number(query.page) || 1,
      pageSize: Number(query.pageSize) || 10,
      total,
      totalPages: Math.ceil(total / (Number(query.pageSize) || 10))
    }
  }
})

function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    'name' in value &&
    'email' in value
  )
}

const data: unknown = await fetchData()

if (isUser(data)) {
  console.log(data.name)
}

const route = useRoute()

const id = route.params.id as string
const page = Number(route.query.page) as number

type UserKeys = keyof User
type UserRole = User['role']
type OptionalUserFields = Partial<User>
type RequiredUserFields = Required<User>

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true
  }
}

const user = useState<User | null>('user')

if (user.value) {
  console.log(user.value.name)
}

const name = user.value?.name ?? 'Guest'

import type { User, Post } from '~/types'

const user = ref<User | null>(null)
const posts = ref<Post[]>([])

type Status = 'pending' | 'approved' | 'rejected'

interface Task {
  id: number
  title: string
  status: Status
}

const updateStatus = (task: Task, status: Status) => {
  task.status = status
}

const data: any = fetchData()

const data: unknown = fetchData()

if (isExpectedType(data)) {
  process(data)
}

interface ApiResponse<T> {
  data: T
  message: string
}

const fetchUser = async (): Promise<ApiResponse<User>> => {
  return await $fetch('/api/user')
}

const fetchPosts = async (): Promise<ApiResponse<Post[]>> => {
  return await $fetch('/api/posts')
}