I'm using CRA with typescript (create-react-app myapp --typescript)
I have some typescript stuff in my App.tsx that I would like to store externally, and I've tried creating App.d.ts, index.d.ts, module.d.ts and none of it works.
Here's the interface I'm using:
declare interface IArgs {
home: string,
away: string
}
What do I need to do to be able to declare all my Typescript stuff in a file that my source files can share?
Put in external file eg. interfaces/interfaces.ts:
export interface IArgs {
home: string,
away: string
}
Then in App.tsx where you want to use it you import it by: import { IArgs } from 'interfaces/interfaces'; and use it for your needs.
You can also create a separated file like App.types.ts and put your types there.
e.g.
export type CounterPropsTypes = {
count: number
handleIncrement?: () => void
handleDecrement?: () => void
}
Then import your types like this :
import { CounterPropsTypes } from './App.types'
Finally use your types :
export const Counter = (props: CounterPropsTypes) => {
return (
<div>
<h1>Counter Two</h1>
<p>{props.count}</p>
{props.handleIncrement && (
<button onClick={props.handleIncrement}>Increment</button>
)}
{props.handleDecrement && (
<button onClick={props.handleDecrement}>Decrement</button>
)}
</div>
)
}
