Обработка определения самописных типов в проекте TypeScript - PullRequest
Новая
       36

Обработка определения самописных типов в проекте TypeScript

1 голос
/ 18 марта 2020

В моем проекте React с использованием TypeScript я написал определение некоторых типов, которые мне нужно использовать во многих других файлах, например, тип: 

type TIconName = 'menu' | 'shop' | 'user'

Чтобы сделать этот тип доступным во всех моих проектах, я использую types.ts файл, который лежит в root и экспортирует все мои типы:

/ types.ts 

export type TIconName = 'menu' | 'shop' | 'user' 
...

Так что теперь я могу импортировать все типы, подобные этому, во все мои файлы только с одним импортом:

/ component / icon / Icon.tsx 

import { TIconName, TOtherType, ... } from '../../types'
...

С использованием псевдоним @types, относящийся к types.ts, упрощает импорт:

/ component / deeperComponent / component.tsx 

import { TIconName, TOtherType, ... } from '@types'
...



Мой тип TIconName относится к компоненту React /component/icon/Icon.tsx, который в основном набирается с интерфейсом для его реквизита:

/ component / icon / Icon.tsx 

import React from 'react'
import { TIconName } from 'types'

interface Props {
  iconName: TIconName
}

// C O M P O N E N T
const Icon: React.FunctionComponent<Props> = (props) => {
  ...

Моя проблема в том, что я хотел бы получить доступ к этому типу без необходимости импортировать его, как это делает React с его типом React.FunctionComponent<...>. * 1 045 *

Я знаю, что для этого мне нужно написать файл .d.ts. Поэтому я написал один файл с именем index.d.ts в той же папке, что и мой компонент Icon:

/ component / icon / index.d.ts 

type TIconName = 'menu' | 'shop' | 'user'

Но если я импортирую свой Icon компонент в другой файл, машинопись не распознает / не импортирует тип TIconName:

/ component / user / User.tsx 

import Icon from '../icon/Icon'

const test: TIconName   // <- Cannot find name 'TIconName'

Ты хоть представляешь, что я забыл или где проблема?

...