How to define props in TypeScript where a parent component injects props in its children

0 votes

When a component clones its children to inject props into them, how to define the children props type?

I'm receiving an error cause injectedProps is expected in Child

const Parent: React.SFC<ParentProps> = ({ children }) => (
  <div>
    {React.cloneElement(children[0], { injectedProp: 'foo' })}
  </div>
);

const Child: React.SFC<ChildProps> = ({ injectedProp }) => (
  <div attr={injectedProp} />
);

type ChildProps = {
  injectedProp: string;
};

<Parent>
  <Child />
</Parent>

Error in Child: injectedProp is missing

Jun 15 in TypeSript by Logan
• 2,140 points
70 views

1 answer to this question.

0 votes

Typescript doesn't remove this special rule "!text" while transpiling into js file for some reason, (even with moduleResolution set to "node")

 transpiled js file

thus it causes file path resolve failed. (tested with typescript v2.2.1, node.js v6.9.5)

The documents need an update.

Here is a workable version by add custom file extensions:

index.d.ts

declare module "*.html" {
    const value: string;
    export default value;
}

Extend nodejs module extensions to read *.html into pure text

require.extensions['.html'] = function(module, filename) {
    module.exports = fs.readFileSync(filename, 'utf8');
}

And from your example it should works this way:

import * as layout from "./js/views/layouts/wnd.html";
console.log(layout);
answered Jun 16 by Nina
• 3,020 points

Related Questions In TypeSript

0 votes
1 answer

How can I define a type for a CSS color in TypeScript?

There was a proposal for a type of ...READ MORE

answered Jun 15 in TypeSript by Nina
• 3,020 points
11 views
0 votes
1 answer
0 votes
1 answer

How to create ES6 Map in Typescript

Refer this as an example this.configs = new ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
23 views
0 votes
1 answer

How to use moment.js library in angular 2 typescript app?

REFERENCE: https://momentjs.com/docs/#/use-it/typescript/ You can install this by using: npm install ...READ MORE

answered Jun 1 in TypeSript by Nina
• 3,020 points
56 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24 in Others by narikkadan
• 11,280 points
437 views
0 votes
1 answer
0 votes
1 answer

Typescript: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

Double check the newly added object types. ...READ MORE

answered Jun 8 in TypeSript by Nina
• 3,020 points
2,388 views
0 votes
1 answer

TypeScript and React Native: Are the type definitions for RN styles wrong?

You can test some of ways for ...READ MORE

answered Jun 10 in TypeSript by Nina
• 3,020 points
120 views
0 votes
1 answer

How to declare and initialize a Dictionary in Typescript

Apparently this doesn't work when passing the ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
206 views
0 votes
1 answer

How to typecast a string to number in TypeScript?

You can use the parseInt or parseFloat functions, or simply use ...READ MORE

answered Jun 9 in TypeSript by Nina
• 3,020 points
9 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP