Checking for unnecessary properties in Typescript with vue-i18n

Let's consider two different languages represented in JSON format:

jp.json

{
    "hello": "こんにちは"
}

ge.json

{
    "hello": "hallo",
    "world": "welt"
}

Now, we are going to combine these languages to create an i18n object:

import { createI18n } from 'vue-i18n'
import jp from '@/i18n/jp.json'
import ge from '@/i18n/ge.json'

type Schema = typeof jp

const i18n = createI18n<[Schema], 'jp' | 'ge', false>({
    legacy: false,
    locale: 'jp',
    fallbackLocale: 'jp',
    messages: {
        jp,
        ge
    }
})

I want jp.json to be the main language schema, but the current setup does not catch any extra properties in ge.json (

"world": "welt"
) and does not trigger an error. Is there a solution for this issue?

Note: the language files are large and must be imported.

typescriptvue-i18n

Answer №1

Regrettably, the most straightforward approach would be to implement a generic function that handles the verification for you:

function validateSchema<T>(data: { [K in keyof T]: Schema extends T[K] ? T[K] : never }) {
    return data;
}

const languagePack = createLanguagePack<[Schema], 'jp' | 'ge', false>({
    legacy: false,
    locale: 'jp',
    fallbackLocale: 'jp',
    messages: validateSchema({
        jp,
        ge, // error
    }),
});

Playground

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with the code flow causing nested function calls to not work as expected

I'm experiencing an issue with my code: The problem arises when param.qtamodificata is set to true, causing the code to return "undefined" due to asynchronous calls. However, everything works fine if params.qtamodificata is false. I am seeking a sol ...

angulartypescript

Leveraging ngIf and ngFor within choice

Is there a way to combine ngIf and ngFor in a single line of code? Here is the code snippet I am currently using: <option *ngIf="tmpLanguage.id!=languages.id" *ngFor="let tmpLanguage of languages" [ngValue]="tmpLanguage.id"> {{tmpLang ...

javascriptangularjsangulartypescript

Convert an array with three dimensions into a two-dimensional array that includes tuples with two immutable string values

Consider the array below with multiple dimensions: type ParsedLine = [string, string]; type ParsedLines = [ParsedLine, ParsedLine] const myArray: (ParsedLine | ParsedLines)[] = [ ['something', 'somethingElse'], [['foo', & ...

arraystypescript

Modify the color of the matSnackbar

I'm having trouble changing the snackbar color in Angular using Angular Material. I tried using panelClass in the ts file and adding it to the global css, but the color remains unchanged. Any suggestions on how to resolve this? I am still new to this ...

cssangulartypescriptfrontend

Exploring the concept of converting a data type into an interface using map operations

Recently, I started learning Angular and I've been trying to wrap my head around how mapping from a response to an interface actually works. Let's take a look at the API response I received: [ { "id": 2, "name" : &qu ...

angulartypescriptobservable

The functionality of the Auth0 Logout feature has ceased to work properly following the

Previously, the code worked flawlessly on Angular version 14. However, after updating to version 17 due to persistent dependency issues, a problem arose. logout(): void { sessionStorage.clear(); this.auth.logout({ returnTo: window.location.origin } ...

angulartypescriptauth0

The Angular application is not functioning properly after running npm start, even though all the necessary packages have

Encountering a perplexing issue with my Angular application. After checking out the code on my new machine, I attempted to run my existing Angular 12 project. However, despite the application running properly in the command prompt, it is not functioning as ...

angulartypescriptnpm

You cannot utilize Lesson as a JSX Component in Next JS TypeScript

Below is my updated page.tsx code: import Aspects from '@/components/Aspects'; import FreeForm from '@/components/FreeForm'; import Lesson from '@/components/Lesson'; import React from 'react'; import { Route, Route ...

javascriptreactjstypescriptnext.jsreact-typescript

The defaultValue of the Observable TextArea is blank space following the transmission of a sendMessage using SignalR in a Typescript

i am currently in the process of modifying a basic SignalR Chat feature. Here is the situation: when a user sends a message, the message gets sent successfully. However, the textarea from which it was sent remains filled with empty space (aside from the p ...

angulartypescriptsignalrobservable

Navigating with multiple parameters in Angular 7 routing

I am currently facing an issue where I need to navigate to the same component with different parameters. Although I can subscribe to the params through the ActivatedRoute, I'm encountering a problem when trying to call router.navigate within the subsc ...

angulartypescript

Utilize puppeteer and web-vitals in NextJS to retrieve the web performance metrics of a website

I'm currently working on a basic tool in NextJS that uses puppeteer to fetch web vitals data from a given URL. However, I'm facing an issue where the results are not being printed out. What could be causing this problem? const browser = await pup ...

typescriptnext.jspuppeteercore-web-vitals

The TypeScript compiler encounters difficulties in locating type definitions when utilizing an inherited tsconfig file

There seems to be an issue with the functionality of tsconfig.json inheritance, specifically regarding the proper inheritance of the "typeRoots" setting. http://www.typescriptlang.org/docs/handbook/tsconfig-json.html (folder structure provided below) we ...

typescripttypescript2.0

Can Bun automatically bundle my TypeScript files when I save them in VS Code?

Is it feasible for Bun to bundle my TypeScript upon saving a file in VS Code? The instruction manual suggests running bun run index.ts in the command line and including it in the package.json in this manner. However, I am unsure how to automate this proce ...

typescriptvisual-studio-codebun

What could be causing the issue with my output not displaying correctly?

Hey guys! I'm working on creating a to-do list but I've encountered a problem. Whenever I enter a value in the text field, it doesn't get added to the array of list elements. Strangely enough, when I console.log it, it seems to work. Can any ...

angulartypescript

Unable to locate module 'fs'

Hey there, I'm encountering an issue where the simplest Typescript Node.js setup isn't working for me. The error message I'm getting is TS2307: Cannot find module 'fs'. You can check out the question on Stack Overflow here. I&apos ...

node.jsangulartypescript

What would be a colloquial method to retrieve the ultimate result from the iterator function?

I've got a rather complex function that describes an iterative process. It goes something like this (I have lots of code not relevant to the question): function* functionName( config: Config, poolSize: number ): Generator<[State, Step], boo ...

javascripttypescriptiteratorgeneratoryield

Adjusting the selection in the Dropdown Box

I've been attempting to assign a value to the select box as shown below: <dx-select-box [items]="reportingProject" id="ReportingProj" [text]="reportingProject" [readOnly]="true" > ...

javascriptangulartypescriptangular7

Retrieve your Docusign Access Code using the typescript httpClient.post method

I am currently struggling to obtain the access token through the Docusign API. My code is producing an error in Xcode and I am unable to make it work on my native device or browser, despite successfully testing it via Postman. When attempting to run it in ...

typescriptionic-frameworkposthttpclientdocusignapi

Update the useState function individually for every object within an array

After clicking the MultipleComponent button, all logs in the function return null. However, when clicked a second time, it returns the previous values. Is there a way to retrieve the current status in each log within the map function? Concerning the useEf ...

javascriptreactjstypescript

Create a .d.ts file for a custom JavaScript file

I am working on an application written in JavaScript and considering incorporating TypeScript for a new feature. Currently, I have a base class defined in JavaScript as shown below: // base.js module.exports = function BaseClass () { // ... ... }; M ...

typescriptdefinitelytyped