How would I define this object in typescript?

Question

I have the following object that who's structure I'd like to enforce.

{
    'username': {
      required: 'Please enter your username.'
    },
    'passwordGroup': {
      ocMatchFields: 'Passwords do not match'
    },
    'passwordGroup.password': {
      required: 'Please enter your password'
    },
    'passwordGroup.confirmPassword': {
      required: 'Please confirm your password'
    }
}

It'll never be more deeply nested than shown and the values will always be strings but there can be any number of "fields". fields in this case are first level keys. username, passwordGroup etc.

I had come across something that describes an object as { [key: string]: boolean } which makes me believe its possible.

I can think of how to represent it as a collection since that would be an array of objects but I'm not sure how I'd be able to describe it as a nested object structure.

Answer 1

Knowing TypeScript, there's probably some awesome syntax I've overlooked. But here's one way:

interface StringToString { [key: string]: string };
interface MyNested { [key: string]: StringToString };

let x: MyNested = {
    'username': {
        required: 'Please enter your username.'
    },
    'passwordGroup': {
        ocMatchFields: 'Passwords do not match'
    },
    'passwordGroup.password': {
        required: 'Please enter your password'
    },
    'passwordGroup.confirmPassword': {
        required: 'Please confirm your password'
    }
}

Note that the above doesn't prevent the nested object from having more than one key.

Or you could get super generic (but it's probably overkill):

interface KeyValuePair<T> { [key: string]: T };

let x: KeyValuePair<KeyValuePair<string>> = {
    'username': {
        required: 'Please enter your username.'
    },
    'passwordGroup': {
        ocMatchFields: 'Passwords do not match'
    },
    'passwordGroup.password': {
        required: 'Please enter your password'
    },
    'passwordGroup.confirmPassword': {
        required: 'Please confirm your password'
    }
}

Answer 2

Well, you can do this.

export default [
{
    'username': {
      required: 'Please enter your username.'
    },
    'passwordGroup': {
      ocMatchFields: 'Passwords do not match'
    },
    'passwordGroup.password': {
      required: 'Please enter your password'
    },
    'passwordGroup.confirmPassword': {
      required: 'Please confirm your password'
    }
}
]

later, on your typescript controller, you can import it as whatever you want to call it

import nameYouWant from 'adrees-file-src-exist-json'

Answer 3

You can declare an object of that type this way:

myObject: {
  'username': {
    required: string
  },
  'passwordGroup': {
    ocMatchFields: string;
  },
  'passwordGroup.password': {
    required: string
  },
  'passwordGroup.confirmPassword': {
    required: string
  }
}

This way you can do then:

myObject.username, ...

you have then only those properties inside that object.

you cannot affect another object having another property than username or passwordGroup, etc ...

Answer 4

TypeScript 2.2 introduced a new type called object. It represents any non-primitive type. The following types are considered to be primitive types in JavaScript:

boolean
number
string
symbol
null
undefined

All other types are considered to be non-primitive types. The new object type represents exactly these:

All primitive types

type Primitive = | boolean | number | string | symbol | null | undefined;

All non-primitive types

type NonPrimitive = object;

Let's see how object lets us write more accurate type declarations. Type Declarations Using the Object Type

With the release of TypeScript 2.2, the type declarations for the standard library have been updated to make use of the new object type. For instance, the Object.create() and Object.setPrototypeOf() methods now specify the type object | null for their prototype parameters:

Answer 5

Please declare these types in LoginInterface.ts

export interface IfcRequired {
    required: String;       
}

export interface IfcOCMatchFields {
    ocMatchFields: String;
}

export interface Login {
    username: IfcRequired;
    password: IfcOCMatchFields;
    passwordGroup.password: IfcRequired;
    passwordGroup.confirmPassword: IfcRequired;   
}

For using these interfaces, please use

import {IfcRequired, IfcOCMatchFields, Login} from 'LoginInterface';

For declaring a type for an array of Login Object

let login: Login[];

I would suggest you to create a Login class for inserting data inside login variable.