Как назначить типы (typeof) всех элементов объекта переменной в JavaScript | Машинопись?

Question

У меня есть javascript объект, который выглядит как

Я пытаюсь назначить типы всех элементов в объекте переменной, где я сталкиваюсь с проблемой,

, тогда как я я могу назначить его, когда я упоминаю константы отдельно, а не использовать их в объекте во втором фрагменте кода

const a = Object.freeze({
REMOVE_ITEM:'REMOVE_ITEM'
ADD_ITEM:'ADD_ITEM'
});

//How to assign the types of all elements in the above object
const b = typeof ? // All Properties in the above object ((Facing Problem Here));

//I Can do it if 

const REMOVE_ITEM ='REMOVE_ITEM';

const ADD_ITEM = 'ADD_ITEM';

const b = typeof REMOVE_ITEM | typeof ADD_ITEM;

Answer 1

Как я понял, вы пытаетесь export a type использовать его в другом файле. Это довольно просто:

Файл с определением вашего типа (myType.ts / myType.d.ts):

export type MyType = {
  foo: boolean
  bar: 'foo' | 'bar' 
}

Файл, в котором вы хотите использовать этот тип:

import { MyType } from './myType' // should be in the same folder, otherwise correct the path

const myVar: MyType = false // error
const myVar: MyType = { foo: false, bar: 'foo' } //working

Вы можете , а не определять любые типы во время выполнения, так как типы будут удалены при переносе. Но вы можете определить enum и использовать его для определения ваших типов:

enum MyEnum {
  FOO_BAR = 'foo_bar',
  LORD_OF = 'the_rings'
}
type MyOhterType = {
  fooBar: MyEnum
}

const myOtherVar: MyOtherType = {
  fooBar: MyEnum.FOO_BAR
}

Answer 2

Похоже, вы смешиваете JavaScript оператор typeof с TypeScript - оба не выполняют sh одно и то же.

В JS, typeof something будет вычисляться как простой строка времени выполнения (например, 'number', 'string', 'object' ...), которую ваше приложение затем может использовать для сравнения. Это не то, что вам нужно здесь.

В TS typeof помогает вам извлечь подразумеваемый тип TS *1012* из переменной JS в качестве значимой структуры - истинной TypeScript type . Это полезно, когда вы хотите определить сложные типы TS из существующего JS кода.

const a = Object.freeze({
  REMOVE_ITEM: 'REMOVE_ITEM',
  ADD_ITEM: 'ADD_ITEM'
});

// ^ to TypeScript, this is similar to this type:
// Readonly<{ REMOVE_ITEM: string; ADD_ITEM: string; }>

Чтобы извлечь подразумеваемый тип:

type AObject = typeof a;
// Readonly<{ REMOVE_ITEM: string; ADD_ITEM: string; }>

Чтобы иметь определения типов, соответствующие ключам в этом объекте используйте keyof при определении типа TS, соответствующего любой клавише:

type AKey = keyof AObject;
// "REMOVE_ITEM" | "ADD_ITEM"

// or in a strictly similar way:

type AKey = keyof typeof a;
// "REMOVE_ITEM" | "ADD_ITEM"

Теперь вернемся к коду времени выполнения. После того, как вы извлекли тип AKey, соответствующий ключам a, вы можете обеспечить согласованность типов для некоторых JS значений и аргументов, где это необходимо:

function createActionObject(actionType: AKey) {
  return { type: actionType };
}

const action1 = createActionObject('REMOVE_ITEM');
// compiles and works as expected

const action2 = createActionObject('SOME_BAD_KEYNAME');
// TypeScript Error ->
// Type '"SOME_BAD_KEYNAME"' is not assignable to type '"REMOVE_ITEM" | "ADD_ITEM"'

---

Наконец, , вы не можете «назначить» типы TS для переменной JS, вы можете просто описать, как должна выглядеть переменная JS, поэтому TypeScript проверяет ее, прежде чем в конечном итоге перейти к JS. Если вы попытались получить массив, в котором перечислены все ключи в a, вам нужно использовать традиционные методы JS:

const b = Object.keys(a);
// to JavaScript: will be ['REMOVE_ITEM', 'ADD_ITEM']
// to TypeScript: string[]

// or, to get stronger typings for `b` rather than just `string[]`:

const b = Object.keys(a) as (keyof typeof a)[];
// to JavaScript: will be ['REMOVE_ITEM', 'ADD_ITEM']
// to TypeScript: ('REMOVE_ITEM' | 'ADD_ITEM')[]

Answer 3

Вы можете использовать нотацию TypeScripts as const ( найдено здесь ).

const a = Object.freeze({
  REMOVE_ITEM: 'REMOVE_ITEM',
  ADD_ITEM: 'ADD_ITEM'
} as const);

// assign typeof 
const b: typeof a = {} as any; // you can ignore `{} as any` - only here for example

b; // type is { REMOVE_ITEM: 'REMOVE_ITEM', ADD_ITEM: 'ADD_ITEM' }
b.REMOVE_ITEM; // = 'REMOVE_ITEM'
b.ADD_ITEM; // = 'ADD_ITEM'

// destructure
const { REMOVE_ITEM, ADD_ITEM } = a;

REMOVE_ITEM; // = 'REMOVE_ITEM'
ADD_ITEM; // = 'ADD_ITEM'

Вот stackblitz , чтобы вы могли видеть типы в действии.