<p dir="auto">Hello,</p>
<p dir="auto">I have a generic component, e.g. <code class="notranslate">class Select&lt;T&gt; extends React.Component&lt;SelectProps&lt;T&gt;, any&gt;</code>. Is there any "right" way to use it from JSX?</p>
<p dir="auto">It is impossible to write something like <code class="notranslate">&lt;Select&lt;string&gt; /&gt;</code> in JSX. The best thing that I've found is to write</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let StringSelect: React.Component&lt;SelectProps&lt;string&gt;, any&gt; = Select;"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-smi">StringSelect</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">Component</span><span class="pl-kos">&lt;</span><span class="pl-smi">SelectProps</span><span class="pl-kos">&lt;</span><span class="pl-smi">string</span><span class="pl-kos">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">any</span><span class="pl-kos">&gt;</span> <span class="pl-c1">=</span> <span class="pl-smi">Select</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">And use <code class="notranslate">StringSelect</code> instead of <code class="notranslate">Select&lt;string&gt;</code>. Is there anything better?</p>
<p dir="auto">Hello...</p>
<p dir="auto">For my project I need pagination support so I decided to give ng2-bootstrap a chance. But I am running into a series of problems trying to add the dependency ranging from compile errors to incorrect placement of TS output js files. I am using TS 1.7.4. At this point I am not sure where the blame should be placed, either with ng2-bootstrap, TS compiler, or myself. Here's what I did:</p>
<p dir="auto">In my package.json file I added the following dependency: "ng2-bootstrap": "1.0.7". As a result of doing so the corresponding package is downloaded and placed in my "node_modules" folder. Great, so far so good.</p>
<p dir="auto">Then I added the following code to the top of one of my TS classes:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">PAGINATION_DIRECTIVES</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'ng2-bootstrap/ng2-bootstrap'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Now after doing this is when problems begin to appear. At this point when I try to compile I get the following errors:</p>
<div class="highlight highlight-text-adblock notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Severity    Code    Description Project File    Line    Suppression State
Error   TS2307  Cannot find module 'moment'.    TypeScript Virtual Projects C:\MyProject\src\MyProject\node_modules\ng2-bootstrap\components\datepicker\date-formatter.ts   1   Active
Error   TS2307  Build: Cannot find module 'moment'. MyProject   C:\MyProject\src\MyProject\node_modules\ng2-bootstrap\components\datepicker\date-formatter.ts   1   "><pre class="notranslate">Severity    Code    Description Project File    Line    Suppression State
Error   TS2307  Cannot find module 'moment'.    TypeScript Virtual Projects C:\MyProject\src\MyProject\node_modules\ng2-bootstrap\components\datepicker\date-formatter.ts   1   Active
Error   TS2307  Build: Cannot find module 'moment'. MyProject   C:\MyProject\src\MyProject\node_modules\ng2-bootstrap\components\datepicker\date-formatter.ts   1   </pre></div>
<p dir="auto">So now I am scratching my head wondering why this is happening. I take a look at the offending file (date-formatters.ts) and see that it has the following code at top:<br>
import * as moment from 'moment';</p>
<p dir="auto">OK so I say to myself must be a missing reference or something so I better go find it. But before I do that my first question is: Why is the TS compiler trying to compile this TS file which resides in an excluded folder? My tsconfig file is located in the root of my project and it has the following:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;exclude&quot;: [
    &quot;node_modules&quot;,
    &quot;wwwroot&quot;
  ]"><pre class="notranslate"><span class="pl-ent">"exclude"</span>: [
    <span class="pl-s"><span class="pl-pds">"</span>node_modules<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">"</span>wwwroot<span class="pl-pds">"</span></span>
  ]</pre></div>
<p dir="auto">Because of this my expectation is that the TS compiler should not compile anything inside the node_modules folder but apparently it is. Otherwise why would I get this error? So this is my first question. One thing I noticed about this particular node package is that it contains not only js and d.ts files but also ts files. Plus it also contains a tsconfig file. I am not sure if this has something to do with the problem.</p>
<p dir="auto">Despite this question I proceeded to investigate the error looking for answers. I ran across the following post: "<a href="https://github.com/valor-software/ng2-bootstrap#with-webpack-angularclassangular2-webpack-starter">https://github.com/valor-software/ng2-bootstrap#with-webpack-angularclassangular2-webpack-starter</a>". It basically states that I need to install moment.js including its typings. So I went ahead and did that. I installed the typings using the following command:</p>
<div class="highlight highlight-source-batchfile notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="typings install moment --save"><pre class="notranslate">typings install moment --save</pre></div>
<p dir="auto">At this point in time I notice that my project now has a "typings" folder with a bunch of stuff in it. I also notice a new typings.json file at the root. OK great so then I proceed to compile. But then I get a bunch of errors that look like this:</p>
<div class="highlight highlight-text-adblock notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Severity    Code    Description Project File    Line    Suppression State
Error   TS2300  Duplicate identifier 'export='. TypeScript Virtual Projects C:\MyProject\src\MyProject\typings\main\definitions\moment\index.d.ts   496 Active
Severity    Code    Description Project File    Line    Suppression State
Error   TS2300  Duplicate identifier 'export='. TypeScript Virtual Projects C:\MyProject\src\MyProject\typings\browser\definitions\moment\index.d.ts    496 Active"><pre class="notranslate">Severity    Code    Description Project File    Line    Suppression State
Error   TS2300  Duplicate identifier 'export='. TypeScript Virtual Projects C:\MyProject\src\MyProject\typings\main\definitions\moment\index.d.ts   496 Active
Severity    Code    Description Project File    Line    Suppression State
Error   TS2300  Duplicate identifier 'export='. TypeScript Virtual Projects C:\MyProject\src\MyProject\typings\browser\definitions\moment\index.d.ts    496 Active</pre></div>
<p dir="auto">At this point I am 5 seconds away from blowing my head off with no idea whatsoever what's going on. I sort of understand the issue. Basically two TS files exporting the same thing I guess. So I am thinking to myself is this typings package buggy? Or is this a TS compiler issue/bug? No idea. So this is my second question.</p>
<p dir="auto">So then I proceeded to investigate the above dup identifier error. I ran into the following: “<a href="https://github.com/Microsoft/TypeScript/issues/7369%E2%80%9D" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/7369/hovercard">https://github.com/Microsoft/TypeScript/issues/7369”</a>. It basically states that I have to exclude various files when compiling. So I did that by adding some items to exclude in my tsconfig file:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;exclude&quot;: [
        &quot;node_modules&quot;,
        &quot;wwwroot&quot;,

        &quot;typings/browser.d.ts&quot;,
        &quot;typings/browser&quot;
    ]"><pre class="notranslate"><span class="pl-ent">"exclude"</span>: [
        <span class="pl-s"><span class="pl-pds">"</span>node_modules<span class="pl-pds">"</span></span>,
        <span class="pl-s"><span class="pl-pds">"</span>wwwroot<span class="pl-pds">"</span></span>,

        <span class="pl-s"><span class="pl-pds">"</span>typings/browser.d.ts<span class="pl-pds">"</span></span>,
        <span class="pl-s"><span class="pl-pds">"</span>typings/browser<span class="pl-pds">"</span></span>
    ]</pre></div>
<p dir="auto">Specifically I added the last 2 entries above. So then I proceeded to compile again. This time I was able to compile with NO errors! Yay! I’m thinking to myself problem solved. But no…</p>
<p dir="auto">Right before I was about to pat myself on the back for having gotten the compile errors to go away, I noticed that now the output structure of my js files is totally messed up!!!!! In other words after compiling, the js files generated by the TS compiler are not in the correct location anymore. Here’s what I have in my tsconfig file:<br>
"outDir": "wwwroot/Scripts"<br>
In my project all of my TS files are located inside a “Scripts” folder that is located on the root. Inside this folder I have various subfolders with TS files inside of them. So my directory structure looks something like this:<br>
wwwroot<br>
---Scripts<br>
------Module1<br>
---------File1.js<br>
---------File2.js<br>
------Module2<br>
---------File1.js<br>
---------File2.js<br>
Scripts<br>
---Module1<br>
------File1.ts<br>
------File2.ts<br>
---Module2<br>
------File1.ts<br>
------File2.ts</p>
<p dir="auto">Above is how things were working before I embarked on this journey. The above is correct. Now however after making all these changes the output looks like this:<br>
wwwroot<br>
---Scripts<br>
------Scripts<br>
---------Module1<br>
------------File1.js<br>
------------File2.js<br>
---------Module2<br>
------------File1.js<br>
------------File2.js<br>
---node_modules<br>
------ng2-bootstrap<br>
-----------...a whole bunch of js files and subfolder with js files</p>
<p dir="auto">At this point I am basically 1 second away from blowing my head off. If you notice above suddenly my Scripts folder is nested inside the previous Scripts folder. And not only that there’s now a “node_modules” folder that contains an ng2-bootstrap folder that in turn contains a whole bunch of js files and subfolders with js files. Why is this happening? Again as I mentioned previously this particular ng2-bootstrap package ships with a bunch of ts files which is not something I have seen before. Most packages I have seen distribute only js and d.ts files. This package also includes a tsconfig file as well which is also not something I have seen before either. Just for the heck of it I manually deleted every ts file that comes with the package and sure enough the above problem with the directory structure goes away. In other words the presence of the ts files causes the problem to surface and their absence fixes the issue. Why is this happening? Is this a problem with the ng2-bootstrap package? Should it NOT contain ts files? Or is this a problem with the TS compiler? Why would the output structure change? Is it a problem with my project?</p>
<p dir="auto">Any help with this would be greatly appreciated. Thank you</p>