typeorm 在 expo app 里的应用

最近在写个 app 需要用到 sqlite，选择 orm 时，本来打算用 Prisma，但是这个必须 node 环境，expo 用不了

另一个比较流行的是 typeorm，查了一下，他们官方提供了 expo 例子：https://github.com/typeorm/expo-example ，将这个仓库拉本地运行直接失败，毕竟 6 年前老项目，expo 版本也不兼容了

于是自己新建一个 expo-router 项目：https://docs.expo.dev/router/installation ，然后将 expo-example 的页面代码和 entities 拷贝到 expo-router 项目里
由于 typeorm 用到装饰器，所以需要在 tsconfig.json 里添加 compilerOptions.experimentalDecorators 和 compilerOptions.emitDecoratorMetadata 并且值都设为 true

然后运行，一堆报错，其中一个可能是因为 expo-example 用的类组件搬到 expo-router 里无法被 tab 识别，于是将整个页面改成 function 组件，代码会放到帖子末尾

改了 function 组件运行再次报错，将错误消息拿去问 gemini，说在 entity 里需要设置变量类型，于是设置 @Column({type: 'string'})，运行又报错，再次问 gemini，它说 sqlite 没有 string 类型，于是用了 text，运行成功：

1. import { Entity, PrimaryGeneratedColumn, Column } from "typeorm/browser";
   
2. @Entity('category')
   
3. export class Category {
   
4.   @PrimaryGeneratedColumn()
   
5.   id!: number;
   
6. 
   
7.   @Column({ type: 'text' })
   
8.   name!: string;
   
9. }

复制代码

上文提到的类组件页面代码改成函数组件：

1. import React, { useEffect, useState } from 'react'
   
2. import {
   
3.   StyleSheet,
   
4.   Text,
   
5.   View,
   
6.   Button,
   
7.   Alert
   
8. } from 'react-native';
   
9. 
   
10. import { DataSource } from 'typeorm/browser';
    
11. import { Category } from '@/database/entities/category';
    
12. import { Author } from '@/database/entities/author';
    
13. import { Post } from '@/database/entities/post';
    
14. import * as FileSystem from 'expo-file-system'
    
15. 
    
16. const database = 'test19.db' // without .db as extension is ok, but recommanded
    
17. const dataSource = new DataSource({
    
18.   database,
    
19.   driver: require('expo-sqlite'),
    
20.   entities: [
    
21.     Category,
    
22.     Author,
    
23.     Post
    
24.   ],
    
25.   synchronize: true,
    
26.   type: "expo",
    
27. })
    
28. 
    
29. export default function SqlitePage() {
    
30. 
    
31.   const [progress, setProgress] = useState('')
    
32.   const [loadedPost, setLoadedPost] = useState<Post>()
    
33. 
    
34.   function connect() {
    
35.     return dataSource.initialize()
    
36.   }
    
37. 
    
38.   useEffect(() => {
    
39.     runDemo()
    
40.   }, [])
    
41. 
    
42.   async function runDemo() {
    
43.     const source = await connect();
    
44. 
    
45.     const category1 = new Category();
    
46.     category1.name = "TypeScript";
    
47. 
    
48.     const category2 = new Category();
    
49.     category2.name = "Programming";
    
50. 
    
51.     const author = new Author();
    
52.     author.name = "Person";
    
53. 
    
54.     const post = new Post();
    
55.     post.title = "Control flow based type analysis";
    
56.     post.text = "TypeScript 2.0 implements a control flow-based type analysis for local variables and parameters.";
    
57.     post.categories = [category1, category2];
    
58.     post.author = author;
    
59. 
    
60.     const postRepository = source.getRepository(Post);
    
61.     await postRepository.save(post);
    
62. 
    
63.     console.log("Post has been saved");
    
64.     setProgress("Post has been saved")
    
65. 
    
66.     const loadedPost = await postRepository.findOne({ where: { id: post.id }, relations: ["author", "categories"] });
    
67. 
    
68.     if (loadedPost) {
    
69.       console.log("Post has been loaded: ", loadedPost);
    
70.       setLoadedPost(loadedPost)
    
71.     }
    
72.   }
    
73. 
    
74.   async function checkSqliteFile() {
    
75.     const dataDirectory = FileSystem.documentDirectory || FileSystem.cacheDirectory;
    
76.     const databaseFilePath = `${dataDirectory}SQLite/${database}`
    
77.     console.log('databaseFilePath', databaseFilePath)
    
78.     try {
    
79.       const fileInfo = await FileSystem.getInfoAsync(databaseFilePath);
    
80.       const fileExists = fileInfo.exists;
    
81.       Alert.alert(`fileExists: ${fileExists}`, databaseFilePath)
    
82.     } catch (error) {
    
83.       console.error('Error getting file info:', error);
    
84.     }
    
85.   }
    
86. 
    
87.   return (
    
88.     <View style={styles.container}>
    
89.       <Text style={styles.welcome}>
    
90.         Welcome to the Expo Example for TypeORM!
    
91.       </Text>
    
92.       <Text style={styles.small}>
    
93.         {progress}
    
94.       </Text>
    
95.       <Text style={styles.small}>
    
96.         {JSON.stringify(loadedPost)}
    
97.       </Text>
    
98. 
    
99.       <Button title='If sqlite file exists' onPress={checkSqliteFile} />
    
100.     </View>
     
101.   );
     
102. 
     
103. }
     
104. 
     
105. const styles = StyleSheet.create({
     
106.   container: {
     
107.     flex: 1,
     
108.     justifyContent: 'center',
     
109.     alignItems: 'center',
     
110.     backgroundColor: '#F5FCFF',
     
111.   },
     
112.   welcome: {
     
113.     fontSize: 20,
     
114.     textAlign: 'center',
     
115.     margin: 10,
     
116.   },
     
117.   small: {
     
118.     textAlign: 'center',
     
119.     color: '#333333',
     
120.     marginBottom: 5,
     
121.   },
     
122. });

复制代码

点击页面里的“If sqlite file exists”按钮，terminal log 会打印出 sqlite 数据库文件路径，按住 cmd 点击路径可以打开文件，如果你的 vscode 装了 SQLite Viewer 可以直接查看数据库内容