|
1 | | -# @intlify/hono |
| 1 | +<p align="center"> |
| 2 | + <img alt="logo" width="512" src="./assets/intlify-hono.svg"> |
| 3 | +</p> |
| 4 | +<h1 align="center">@intlify/hono</h1> |
2 | 5 |
|
3 | 6 | [![npm version][npm-version-src]][npm-version-href] |
4 | 7 | [![npm downloads][npm-downloads-src]][npm-downloads-href] |
@@ -187,72 +190,6 @@ const middleware = defineI18nMiddleware({ |
187 | 190 | }) |
188 | 191 | ``` |
189 | 192 |
|
190 | | -## 🧩 Type-safe resources |
191 | | - |
192 | | -<!-- eslint-disable markdown/no-missing-label-refs -- NOTE(kazupon): ignore github alert --> |
193 | | - |
194 | | -> [!WARNING] |
195 | | -> **This is experimental feature (inspired from [vue-i18n](https://vue-i18n.intlify.dev/guide/advanced/typescript.html#typescript-support)).** |
196 | | -> We would like to get feedback from you 🙂. |
197 | | -
|
198 | | -> [!NOTE] |
199 | | -> The exeample code is [here](https://github.com/intlify/hono/tree/main/playground/typesafe-schema) |
200 | | -
|
201 | | -<!-- eslint-enable markdown/no-missing-label-refs -- NOTE(kazupon): ignore github alert --> |
202 | | - |
203 | | -You can support the type-safe resources with schema using TypeScript on `defineI18nMiddleware` options. |
204 | | - |
205 | | -Locale messages resource: |
206 | | - |
207 | | -```ts |
208 | | -export default { |
209 | | - hello: 'hello, {name}!' |
210 | | -} |
211 | | -``` |
212 | | - |
213 | | -your application code: |
214 | | - |
215 | | -```ts |
216 | | -import { defineI18nMiddleware } from '@intlify/hono' |
217 | | -import en from './locales/en.ts' |
218 | | - |
219 | | -// define resource schema, as 'en' is master resource schema |
220 | | -type ResourceSchema = typeof en |
221 | | - |
222 | | -const i18nMiddleware = defineI18nMiddleware<[ResourceSchema], 'en' | 'ja'>({ |
223 | | - messages: { |
224 | | - en: { hello: 'Hello, {name}' } |
225 | | - } |
226 | | - // something options |
227 | | - // ... |
228 | | -}) |
229 | | - |
230 | | -// something your implementation code ... |
231 | | -// ... |
232 | | -``` |
233 | | - |
234 | | -Result of type checking with `tsc`: |
235 | | - |
236 | | -```sh |
237 | | -npx tsc --noEmit |
238 | | -index.ts:13:3 - error TS2741: Property 'ja' is missing in type '{ en: { hello: string; }; }' but required in type '{ en: ResourceSchema; ja: ResourceSchema; }'. |
239 | | - |
240 | | -13 messages: { |
241 | | - ~~~~~~~~ |
242 | | - |
243 | | - ../../node_modules/@intlify/core/node_modules/@intlify/core-base/dist/core-base.d.ts:125:5 |
244 | | - 125 messages?: { |
245 | | - ~~~~~~~~ |
246 | | - The expected type comes from property 'messages' which is declared here on type 'CoreOptions<string, { message: ResourceSchema; datetime: DateTimeFormat; number: NumberFormat; }, { messages: "en"; datetimeFormats: "en"; numberFormats: "en"; } | { ...; }, ... 8 more ..., NumberFormats<...>>' |
247 | | - |
248 | | - |
249 | | -Found 1 error in index.ts:13 |
250 | | -``` |
251 | | -
|
252 | | -If you are using [Visual Studio Code](https://code.visualstudio.com/) as an editor, you can notice that there is a resource definition omission in the editor with the following error before you run the typescript compilation. |
253 | | -
|
254 | | - |
255 | | -
|
256 | 193 | ## 🖌️ Resource keys completion |
257 | 194 |
|
258 | 195 | <!-- eslint-disable markdown/no-missing-label-refs -- NOTE(kazupon): ignore github alert --> |
|
0 commit comments