请问下，我们对Dexie实体的字段定义，可以使用一个Interface吗，然后使用的时候直接加这个数据结构即可？

Question

在使用Dexie.js的时候，我们可以依据此进行定义一个实体：

// Store Entity定义
export interface Friend {
  id: number;
  name: string;
  age: number;
}

// Database declaration 
export const db = new Dexie('FriendDatabase') as Dexie & {
  friends: EntityTable<Friend, 'id'>;
};
db.version(1).stores({
  friends: '++id, age',
});

1、请问下，我们的这个字段，可以使用一个Interface吗，然后使用的时候直接加这个数据结构即可？

export interface ContactInfo {
  email: string,
  tel: number,
  address: {
    country: string,
    province: string,
    city: string,
    street: string,
    streetNo: number
  }
}

export interface Friend {
  id: number;
  name: string;
  age: number;
  contact: ContactInfo
}

2、如果可以，存储到IndexedDB的数据样式是什么样的呢？
是否是被JSON之后的字符串？

Answer 1

测试是可以的：

entities/Friend.ts

export interface Friend {
  id?: number;
  name: string;
  age: number;
  contact: ContactInfo;
}

export interface ContactInfo {
  email: string;
  tel: number;
  address: {
    country: string,
    province: string,
    city: string,
    street: string,
    streetNo: number
  }
}

App.tsx

import { useEffect } from 'react'
import './App.css'

import { Dexie, type EntityTable } from 'dexie';
import { useLiveQuery } from 'dexie-react-hooks';

import { db } from './common/db'
import { Friend, ContactInfo } from './entities/Friend';

function App() {

  const friends = useLiveQuery(() => {
    return db.friends.toArray()
  }, [])


  const handleClick = () => {

    const contact: ContactInfo = {
      email: '[e-mail]',
      tel: [phone],
      address: {
        country: 'china',
        province: 'sichuan',
        street: 'chenghua street',
        city: 'chengdu',
        streetNo: 1321
      }
    }

    const friend: Friend = {
      name: '小明',
      age: 23,
      contact
    }

    db.friends.add(friend).then(() => {
      console.log('添加成功')
    }).catch((err) => {
      console.log(err)
    })
  }

  return (
    <>
      friend count: {friends?.length}

      <button onClick={handleClick}>点击添加数据</button>
    </>
  )
}

export default App

结果：