TypeScript支持 #

npm install typescript --save-dev
npm install @types/node --save-dev

# 主进程类型
npm install electron --save-dev

# 构建工具
npm install ts-node --save-dev

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "ESNext",
        "moduleResolution": "bundler",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "declaration": true,
        "declarationMap": true,
        "sourceMap": true,
        "outDir": "./dist",
        "rootDir": ".",
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"],
            "@electron/*": ["electron/*"]
        },
        "types": ["node"]
    },
    "include": [
        "src/**/*",
        "electron/**/*"
    ],
    "exclude": [
        "node_modules",
        "dist",
        "dist-electron"
    ]
}

// tsconfig.node.json (主进程)
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "CommonJS",
        "outDir": "./dist-electron"
    },
    "include": [
        "electron/**/*"
    ]
}

// tsconfig.web.json (渲染进程)
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "ESNext",
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "outDir": "./dist"
    },
    "include": [
        "src/**/*"
    ]
}

// src/types/global.d.ts
declare namespace NodeJS {
    interface ProcessEnv {
        NODE_ENV: 'development' | 'production';
        ELECTRON_RENDERER_URL?: string;
    }
}

// src/types/electron.d.ts
import { IpcRenderer, IpcMain } from 'electron';

interface ElectronAPI {
    getAppInfo: () => Promise<AppInfo>;
    openFile: () => Promise<string | null>;
    saveFile: (content: string) => Promise<boolean>;
    onFileChanged: (callback: (data: FileChangeData) => void) => () => void;
}

interface AppInfo {
    version: string;
    platform: string;
    arch: string;
}

interface FileChangeData {
    path: string;
    type: 'created' | 'modified' | 'deleted';
}

declare global {
    interface Window {
        electronAPI: ElectronAPI;
    }
}

export { ElectronAPI, AppInfo, FileChangeData };

// electron/types/ipc.ts
export interface IPCChannels {
    'app:getInfo': {
        request: void;
        response: AppInfo;
    };
    'file:open': {
        request: void;
        response: string | null;
    };
    'file:save': {
        request: { content: string };
        response: boolean;
    };
}

export type IPCChannel = keyof IPCChannels;
export type IPCRequest<T extends IPCChannel> = IPCChannels[T]['request'];
export type IPCResponse<T extends IPCChannel> = IPCChannels[T]['response'];

// electron/ipc/handlers.ts
import { ipcMain } from 'electron';
import { IPCChannels, IPCChannel, IPCRequest, IPCResponse } from '../types/ipc';

type IPCHandler<T extends IPCChannel> = (
    event: Electron.IpcMainInvokeEvent,
    request: IPCRequest<T>
) => Promise<IPCResponse<T>> | IPCResponse<T>;

function registerHandler<T extends IPCChannel>(
    channel: T,
    handler: IPCHandler<T>
) {
    ipcMain.handle(channel, async (event, request) => {
        return handler(event, request);
    });
}

// 使用
registerHandler('app:getInfo', async () => {
    return {
        version: app.getVersion(),
        platform: process.platform,
        arch: process.arch
    };
});

registerHandler('file:save', async (event, { content }) => {
    // 保存文件
    return true;
});

// electron/preload.ts
import { contextBridge, ipcRenderer } from 'electron';
import { IPCChannels, IPCChannel, IPCRequest, IPCResponse } from './types/ipc';

async function invoke<T extends IPCChannel>(
    channel: T,
    request: IPCRequest<T>
): Promise<IPCResponse<T>> {
    return ipcRenderer.invoke(channel, request);
}

function on<T extends IPCChannel>(
    channel: T,
    callback: (response: IPCResponse<T>) => void
): () => void {
    const handler = (_event: Electron.IpcRendererEvent, response: IPCResponse<T>) => {
        callback(response);
    };
    
    ipcRenderer.on(channel, handler);
    
    return () => {
        ipcRenderer.removeListener(channel, handler);
    };
}

contextBridge.exposeInMainWorld('electronAPI', {
    getAppInfo: () => invoke('app:getInfo', undefined as void),
    openFile: () => invoke('file:open', undefined as void),
    saveFile: (content: string) => invoke('file:save', { content })
});

// src/utils/electron.ts
import { AppInfo } from '@/types/electron';

export async function getAppInfo(): Promise<AppInfo> {
    return window.electronAPI.getAppInfo();
}

export async function openFile(): Promise<string | null> {
    return window.electronAPI.openFile();
}

export async function saveFile(content: string): Promise<boolean> {
    return window.electronAPI.saveFile(content);
}

// electron/types/window.ts
import { BrowserWindow } from 'electron';

export interface WindowConfig {
    name: string;
    width: number;
    height: number;
    minWidth?: number;
    minHeight?: number;
    resizable?: boolean;
    modal?: boolean;
    parent?: string;
}

export interface WindowManager {
    create(config: WindowConfig): BrowserWindow;
    get(name: string): BrowserWindow | undefined;
    has(name: string): boolean;
    close(name: string): void;
    closeAll(): void;
}

// electron/types/config.ts
export interface AppConfig {
    app: {
        name: string;
        version: string;
    };
    window: {
        width: number;
        height: number;
        x?: number;
        y?: number;
        isMaximized: boolean;
    };
    user: {
        theme: 'light' | 'dark';
        language: string;
    };
}

export type PartialAppConfig = PartialDeep<AppConfig>;

interface PartialDeep<T> {
    [P in keyof T]?: T[P] extends object ? PartialDeep<T[P]> : T[P];
}

// src/types/vue.d.ts
import { DefineComponent } from 'vue';

declare module '*.vue' {
    const component: DefineComponent<{}, {}, any>;
    export default component;
}

// src/stores/app.ts
import { defineStore } from 'pinia';

interface AppState {
    theme: 'light' | 'dark';
    sidebarOpen: boolean;
    user: User | null;
}

interface User {
    id: string;
    name: string;
    email: string;
}

interface AppActions {
    setTheme: (theme: 'light' | 'dark') => void;
    toggleSidebar: () => void;
    setUser: (user: User | null) => void;
}

export const useAppStore = defineStore<string, AppState, {}, AppActions>('app', {
    state: () => ({
        theme: 'light',
        sidebarOpen: true,
        user: null
    }),
    
    actions: {
        setTheme(theme) {
            this.theme = theme;
        },
        
        toggleSidebar() {
            this.sidebarOpen = !this.sidebarOpen;
        },
        
        setUser(user) {
            this.user = user;
        }
    }
});

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import electron from 'vite-plugin-electron';
import path from 'path';

export default defineConfig({
    plugins: [
        vue(),
        electron([
            {
                entry: 'electron/main.ts',
                vite: {
                    build: {
                        outDir: 'dist-electron',
                        rollupOptions: {
                            external: ['electron']
                        }
                    }
                }
            },
            {
                entry: 'electron/preload.ts',
                vite: {
                    build: {
                        outDir: 'dist-electron'
                    }
                }
            }
        ])
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    }
});

{
    "scripts": {
        "dev": "vite",
        "build": "vue-tsc --noEmit && vite build && electron-builder",
        "typecheck": "vue-tsc --noEmit"
    }
}

- [ ] 配置 tsconfig.json
- [ ] 定义全局类型
- [ ] IPC 通道类型化
- [ ] 组件类型定义
- [ ] Store 类型定义
- [ ] 启用严格模式

// 使用 type 关键字导入类型
import type { AppInfo, FileChangeData } from '@/types/electron';

// 或使用类型重导出
export type { AppInfo, FileChangeData } from '@/types/electron';