TypeScript. What should I do if props swears at a property that is not defined? React

Question

I use various libraries. And these libraries don't have TypeScript. How to define them in the interface? I mean this.

Interface IProps {
somelibrary: // What type should I write here?
}

I know that typedefinitions exist. But how to understand which type to use. Eg

Interface IProps {
i18n: // What type should I write here?
}

Why do you want to send a whole library through a prop? Or am i misunderstanding? — DownloadPizza, Oct 11 '21 at 08:14
`any` is used for "it could be anything". Also, do you mean `interface` and not `Interface`? — crashmstr, Oct 11 '21 at 14:40

score 1 · Answer 1 · answered Oct 11 '21 at 14:14

1

Perhaps you don't need to define one unless you want the strict type hinting? There's this other answer that I've found my self coming back to a couple times in the past - https://stackoverflow.com/a/12695001/2174733

answered Oct 11 '21 at 14:14

mzyrc

784
1
7
18

thanks for answer, it's useful for me. But, i am asking about how to describe manually some library? For example. i18n. He has very much properties, and these properties has also properties. How can i use typescript in this case? Without and with typedefin – Витязи Team Oct 12 '21 at 10:49

score 1 · Accepted Answer · answered Oct 12 '21 at 16:55

So if I understand you correctly, you want to define the types of a library that don't necessarily have a .d.ts file.

I did start doing this for a database I was using called rethinkdb some time ago now. (https://www.npmjs.com/package/rethinkdbdash)

Just as a warning, there are a few any references in here but that's purely because this was POC at the time but you should hopefully get the general idea of what I was trying to achieve.

declare module 'rethinkdbdash' {
export default function RethinkDBDash(config: ConnectionConfig): RethinkConnection

interface ConnectionConfig {
    host?: string;
    port?: number;
    db?: string;
}

export interface RethinkConnection {
    table(document: string): Term;

    asc(columnName: string): Term;

    desc(columnName: string): Term;
}

interface filterQueryParams {
    [key: string]: string;
}

interface Row {
    (fieldName: string): Term;
}

interface Term {
    insert(documents: any, options?: any): void;

    filter(filterParams: filterQueryParams): any; //@todo change the return type

    update(callback: (row: Row) => void): Term;

    append(document: any): Term;

    pluck(...columnNames: string[]): Term;

    limit(amount: number): Term;

    orderBy(fieldName: string): Term;

    orderBy(obj: any): Term;

    run(): any;
}}

The above was a file called rethink.d.ts within a folder called typings.

You can basically think of this as my contract of how I expect to interact with the underlying library.

The other thing you have to do is tell the TypeScript compiler that you have defined these types for the library and you do that by specifying the following in tsconfig.json within the compilerOptions block

    "typeRoots": ["./node_modules/@types", "./src/**/typings"],

What this tells the compiler is - still honour the types that are within node_modules but also include any custom definitions that I've created within the project.

Once you've got this setup you should find the intellisense in the IDE pick up these definitions for you.

I hope this is able to unblock you

TypeScript. What should I do if props swears at a property that is not defined? React

2 Answers2