`*.d.ts`  files are used to provide typescript type information about a module that&#39;s written in JavaScript, for example underscore / lodash / aws-sdk.

This will allow you to use the javascript modules without the need to convert them to ts without getting any type error on you code.

for example if you have a folder myAwesomeLib, with index.js and index.d.ts files 

on your code you will be able to import the code with

    import { SomeMethod } from &#39;./myAwesomeLib&#39;;

or

    import { SomeMethod } from &#39;./myAwesomeLib/index&#39;;

your typescript will rely on the `.d.ts` file to find the correct types for the `SomeMethod`

**Edit**: More about Declaration files https://basarat.gitbooks.io/typescript/docs/types/ambient/d.ts.html

It&#39;s Similar to .h file in C
Or you may imagine an interface subsystem in any other language like java or php

The file contains function prototype (declaration &amp; typing) of an underlying library

for reference on how to generate a .d.ts file from a library.js reefer
https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html



When running my unit tests, from time to time, even if they pass, at the end of all the tests running, I will get the following error.

On my Jenkins CI build running PhantomJS:

    .PhantomJS 2.1.1 (Linux 0.0.0) ERROR
      {
        &quot;message&quot;: &quot;An error was thrown in afterAll\nReferenceError: Can&#39;t find variable: $ thrown&quot;,
        &quot;str&quot;: &quot;An error was thrown in afterAll\nReferenceError: Can&#39;t find variable: $ thrown&quot;
      }

Or on Chrome:

    Chrome 67.0.3396 (Windows 7 0.0.0) ERROR
      {
        &quot;message&quot;: &quot;An error was thrown in afterAll\n[object ErrorEvent] thrown&quot;,
        &quot;str&quot;: &quot;An error was thrown in afterAll\n[object ErrorEvent] thrown&quot;
      }

I also have really unreliable tests, without changing anything some times they would succeed and other times the same tests would fail, so I knew something weird was going on. 

Angular 6 Unit Tests: An error was thrown in afterAll\nReferenceError: Can&#39;t find variable: $ thrown

**Problem**: The interface of `Stateless Functional Component` is given as 

    interface SFC&lt;P = {}&gt; {
        (props: P &amp; { children?: ReactNode }, context?: any): ReactElement&lt;any&gt; | null;
        propTypes?: ValidationMap&lt;P&gt;;
    }

The prop type of my component is also generic as:

    interface Prop&lt;V&gt;{
	    num: V;
    }

How to properly define my component? as:

    const myCom: &lt;T&gt;SFC&lt;Prop&lt;T&gt;&gt; = &lt;T&gt;(props: Prop&lt;T&gt;)=&gt; &lt;div&gt;test&lt;/div&gt;

gives an error at `character 27` that `Cannot find name &#39;T&#39;`

Here is :[Typescript Playground of modified example][1]

**MyFindings**: 

1:Typescript 2.9.1 support Stateful Generic Component: http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements

    class myCom&lt;T&gt; extends React.Component&lt;Prop&lt;T&gt;, any&gt; {
       render() {
          return &lt;div&gt;test&lt;/div&gt;;
       }
    }

2: Extending `SFC` to make a new interface as mentioned in following answer would make component&#39;s prop type as `any`:
https://stackoverflow.com/questions/44392479/typescript-react-stateless-function-with-generic-parameter-return-types# which I don&#39;t want. I want to give proper type for my prop


  [1]: http://www.typescriptlang.org/play/#src=interface%20FunctionalComponent%20%3C%20P%20%3E%20%7B%0D%0A%09%09(props%3A%20Readonly%3CP%3E%2C%20context%3F%3A%20any)%3A%20number%3B%0D%0A%09%09displayName%3F%3A%20string%3B%0D%0A%09%09defaultProps%3F%3A%20Partial%3CP%3E%3B%0D%0A%7D%0D%0Ainterface%20Prop%3CV%3E%7B%0D%0A%09num%3A%20V%3B%0D%0A%7D%0D%0Aconst%20Search%3A%20FunctionalComponent%3CProp%3CT%3E%3E%20%3D%20%3CT%3E(props)%20%3D%3E%20%7B%0D%0A%09return%2010%3B%0D%0A%7D%0D%0A

Type of Generic Stateless Component React? OR Extending generic function interface in typescript to have a further generic?

I have seen some projects declaring all the types in `index.d.ts`. So that the programmer do not need to explicitly import the type from other files.

    import { TheType } from &#39;./somefile.ts&#39;

Is that the correct usage of `index.d.ts` file? I&#39;m not able to find anything in the official documentation.

What is the main usage of index.d.ts in Typescript?

I have seen some projects declaring all the types in <code>index.d.ts</code>. So that the programmer do not need to explicitly import the type from other files.
<pre><code class="hljs language-javascript">import { TheType } from './somefile.ts'
</code></pre>
Is that the correct usage of <code>index.d.ts</code> file? I'm not able to find anything in the official documentation.

I have a custom type, let&#39;s say

    export type Fruit = &quot;apple&quot; | &quot;banana&quot; | &quot;grape&quot;;

I would like to determine if a string is part of the Fruit type. How can I accomplish this? 

The following doesn&#39;t work.

    let myfruit = &quot;pear&quot;;
    if (typeof myfruit === &quot;Fruit&quot;) {
        console.log(&quot;My fruit is of type &#39;Fruit&#39;&quot;);
    }

Any thoughts appreciated!

Typescript: Check &quot;typeof&quot; against custom type

I have a data table which display data from external API, I want the number of items /element  on the table page should be saved in local storage

Here is what I have tried so far: 

 

     ngOnInit() {
      this.moviesService.getPopularTVShows().subscribe(res =&gt; {
        this.dataSource = new MatTableDataSource(res.results);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        localStorage.setItem(this.dataSource, this.dataSource.length);
        console.log(localStorage.length);
      });
    }
When I run my app, the console displays `undefined`

What is wrong with my code? any help or suggestion is welcomed, newbie trying new stuff.

Angular 6: saving data to local storage

Having compiled my TypeScript project successfully, I intended to run it in VS Code&#39;s debug mode using `ts-node`. Problem is, `ts-node` can&#39;t find `d.ts` files I created (while `tsc` has no problem with it).

Project structure is:

    /
        conf/
        dist/
        src/
            types/
    package.json
    tsconfig.json

`tsconfig.json` relevant entries are:

&lt;!-- language: lang-json --&gt;

    {
        &quot;compilerOptions&quot;: {
            &quot;target&quot;: &quot;es2017&quot;,
            &quot;module&quot;: &quot;commonjs&quot;,
            // &quot;lib&quot;: [],
            &quot;sourceMap&quot;: true,
            &quot;outDir&quot;: &quot;dist&quot;,
            &quot;rootDir&quot;: &quot;src&quot;,
            &quot;moduleResolution&quot;: &quot;node&quot;,
            &quot;baseUrl&quot;: &quot;.&quot;,
            &quot;paths&quot;: {
                &quot;*&quot;: [
                    &quot;node_modules/*&quot;,
                    &quot;src/types/*&quot;
                ]
            },
            // &quot;rootDirs&quot;: [],
            // &quot;typeRoots&quot;: [],
            // &quot;types&quot;: [],
        },
        &quot;include&quot;: [
            &quot;src/**/*&quot;
        ]
    }

The definition file `ts-node` can&#39;t find is `src/types/global.d.ts`:

&lt;!-- language: lang-typescript --&gt;

    import { App } from &#39;../App&#39;;
    
    declare global {
        namespace NodeJS {
            interface Global {
                app: App;
            }
        }
    }

So, trying to run it with `ts-node` I see:

    TSError: ⨯ Unable to compile TypeScript:
    src/boot.ts(15,59): error TS2339: Property &#39;app&#39; does not exist on type &#39;Global&#39;.

How to resolve it globally? I&#39;ve found that `/// &lt;reference path=&quot;./types/global.d.ts&quot; /&gt;` does the trick but I&#39;d have to repeat it in every file using `global.app`.

My TypeScript version is 3.0.1

ts-node ignores d.ts files while tsc successfully compiles the project

I&#39;m trying to create an Angular 6 library and use it in an Angular 6 app. I&#39;ve boiled it down to a minimal test case. (Update: since Angular 7 is out, I&#39;ve tried that as well.)



&lt;!-- language: lang-bash --&gt;

    ng new workspace # accept the defaults
    ng new product # accept the defaults
    cd workspace 
    ng generate library widgets 
    ng build --prod widgets # leave out &quot;--prod&quot; for Angular 7
    cd ../product
    ng build

An app called &quot;workspace&quot; hosts a library called &quot;widgets&quot;. Another app called &quot;product&quot; stands alone. Everything to this point is fine.

Now let&#39;s try using the &quot;widgets&quot; library in the &quot;product&quot; app. Open the file `product/src/app/app.module.ts` which was generated by the CLI. Add two lines as shown below.  

&lt;!-- language: lang-js --&gt;

    import { BrowserModule } from &#39;@angular/platform-browser&#39;;
    import { NgModule } from &#39;@angular/core&#39;;
    
    import { AppComponent } from &#39;./app.component&#39;;
    import { WidgetsModule } from &#39;../../../workspace/dist/widgets&#39;; //  added
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        WidgetsModule // added
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

After that change, when I run `ng build` from the product directory, I get warnings from Webpack.

    Date: 2018-07-31T13:13:08.001Z
    Hash: 8a6f58d2ae959edb3cc8
    Time: 8879ms
    chunk {main} main.js, main.js.map (main) 15.9 kB [initial] [rendered]
    chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
    chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
    chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
    chunk {vendor} vendor.js, vendor.js.map (vendor) 4.59 MB [initial] [rendered]
    
    WARNING in ../workspace/node_modules/@angular/core/fesm5/core.js
    4997:15-36 Critical dependency: the request of a dependency is an expression
    
    WARNING in ../workspace/node_modules/@angular/core/fesm5/core.js
    5009:15-102 Critical dependency: the request of a dependency is an expression

What does &quot;the result of a dependency is an expression&quot; mean? What am I doing wrong?





Angular 6 / 7 &quot;the result of a dependency is an expression&quot;

There is this new feature in TypeScript 3.0 called [Project References]. It suggests better interaction of `*.ts` modules between themselves. Unfortunately, this is all I could get from the official documentation &#128542; although it seems to be written pretty clearly and straightforward.

Can anyone help me understand exactly, what problems does it solve, how does it do that, and how would I benefit from it? I have a project with a similar structure, so it might (or might not) be very helpful for it. Thank you in advance!

***

UPD: The project structure is roughly:

&lt;!-- language: lang-yaml --&gt;

    project/
        lib/
            index.ts # defines the original code
        test/
            index.spec.ts # requires lib/index.ts
        package.json
        tsconfig.json

[Project References]: http://www.typescriptlang.org/docs/handbook/project-references.html

Content Type	Original Author	Original Content on Stackoverflow
Question	Yong Fei	View Question on Stackoverflow
Solution 1 - Typescript	dege	View Answer on Stackoverflow
Solution 2 - Typescript	Subrat Kumar Palhar	View Answer on Stackoverflow

What is the main usage of index.d.ts in Typescript?

Typescript Problem Overview

Typescript Solutions

Solution 1 - Typescript

Solution 2 - Typescript

Type of Generic Stateless Component React? OR Extending generic function interface in typescript to have a further generic?

Angular 6 Unit Tests: An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown

Attributions