新的系统
\nimport React from 'React'\nimport { defineComponent, ref, computed, onUnmounted } from 'reactivue'\n\ninterface Props {\n value: number\n}\n\nconst MyCounter = defineComponent(\n // setup function in Vue\n (props: Props) => {\n const counter = ref(props.value)\n const doubled = computed(() => counter.value * 2)\n const inc = () => counter.value += 1\n\n onUnmounted(() => console.log('Goodbye World'))\n\n return { counter, doubled, inc }\n },\n // functional component in React\n ({ counter, doubled, inc }) => {\n // you can still use other React hooks\n return (\n <div>\n <div>{counter} x 2 = {doubled}</div>\n <button onClick={inc}>Increase</button>\n </div>\n )\n }\n)\n\n// use it as you normally would\nrender(<MyCounter value={10}>, el)src/\n|-- components/\n| |-- Avatar/\n| | |-- Avatar.ts\n| | |-- Avatar.test.ts\n| |-- Button/\n| | |-- Button.ts\n| | |-- Button.test.ts\n| |-- TextField/\n| | |-- TextField.ts\n| | |-- TextField.test.ts\n|-- contexts/\n| |-- UserContext/\n| | |-- UserContext.ts\n|-- hooks/\n| |-- useMediaQuery/\n| | |-- useMediaQuery.ts\n|-- pages/\n| |-- UserProfile/\n| | |-- Components/\n| | | |-- SomeUserProfileComponent/\n| | | | |-- SomeUserProfileComponent.ts\n| | | | |-- SomeUserProfileComponent.test.ts\n| | |-- UserProfile.ts\n| | |-- UserProfile.test.ts\n| |-- index.ts\n|-- utils/\n| |-- some-common-util/\n| | |-- index.ts/\n| | |-- index.test.ts\n|-- App.ts\n|-- AuthenticatedApp.ts\n|-- index.ts\n|-- UnauthenticatedApp.ts ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄\n▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░▌\n ▀▀▀▀█░█▀▀▀▀ ▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌▐░▌\n ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌▐░▌\n ▐░▌ ▐░█▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▐░█▄▄▄▄▄▄▄▄▄ ▐░▌ ▐░▌▐░▌\n ▐░▌ ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░▌ ▐░▌▐░▌\n ▐░▌ ▀▀▀▀▀▀▀▀▀█░▌ ▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀█░▌▐░█▄▄▄▄▄▄▄█░▌▐░▌\n ▐░▌ ▐░▌ ▐░▌▐░░░░░░░░░░░▌▐░▌\n ▐░▌ ▄▄▄▄▄▄▄▄▄█░▌ ▄▄▄▄▄▄▄▄▄█░▌ ▀▀▀▀▀▀█░█▀▀ ▐░█▄▄▄▄▄▄▄▄▄\n ▐░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░▌ ▐░░░░░░░░░░░▌\n ▀ ▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀ ▀ ▀▀▀▀▀▀▀▀▀▀▀import { Query } from \"@codemix/ts-sql\";\n\nconst db = {\n things: [\n { id: 1, name: \"a\", active: true },\n { id: 2, name: \"b\", active: false },\n { id: 3, name: \"c\", active: true },\n ],\n} as const;\n\ntype ActiveThings = Query<\n \"SELECT id, name AS nom FROM things WHERE active = true\",\n typeof db\n>;\n\n// ActiveThings is now equal to the following type:\ntype Expected = [{ id: 1; nom: \"a\" }, { id: 3; nom: \"c\" }];