Type '{}' is not assignable to type 'Settings'. Property 'total' is missing in type '{}'

[thiagohora]

TypeScript Version: 2.4.2 / nightly (2.5.0-dev.201xxxxx)

There is a problem when I'm using default props with a typed properties interface.

Code

export interface Settings { total: number, activePage: number, visiblePages?: number };

import React, { SFC } from 'react';
import pagination, { Settings } from './utils'

//import 'style.css';

export { Settings };

const Pagination: SFC<Settings> = ({ total, activePage }) => (
    <h1>{pagination({ total, activePage })}</h1>
);

Pagination.defaultProps = { total: 1, activePage: 1 };

export default Pagination;

import { storiesOf  } from '@kadira/storybook';
import { action } from '@storybook/addon-actions';

import React from 'react';
import Pagination from './index';

storiesOf('<Pagination />', module)
    .add('without props', () => (<Pagination />)); // error there in Pagination

Expected behavior:
Use the default properties

Actual behavior:
Type '{}' is not assignable to type 'IntrinsicAttributes & Settings & { children?: ReactNode; }'.
Type '{}' is not assignable to type 'Settings'.
Property 'total' is missing in type '{}'

[kitsonk]

This is not a support forum.

Questions should be asked at StackOverflow or on Gitter.im.

But, you should try Partial<Settings> instead of Settings. Right now, TypeScript does not have a good way of modelling default properties for something like React (see #16173).

[thiagohora]

Ok, thank you