I am consuming a React component called [shiitake][1] from npm into my project where I use TypeScript. That library does not have TypeScript declarations so I thought I would write one. The declaration file looks like below (it may not be complete but don&#39;t worry about it too much):

    import * as React from &#39;react&#39;;
    
    declare module &#39;shiitake&#39; {
    
        export interface ShiitakeProps {
            lines: number;
        }
    
        export default class Shiitake extends React.Component&lt;ShiitakeProps, any&gt; { 
        }
    }

I have put this inside `./typings/shiitake.d.ts` file and on VS Code, I am seeing the below error:

&gt; [ts] Invalid module name in augmentation. Module &#39;shiitake&#39; resolves to an untyped module at &#39;d:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js&#39;, which cannot be augmented.

On the consumption side, I am still getting the same error even if with the above declaration (since I have `noImplicitAny` compiler switch turned on):

    /// &lt;reference path=&quot;../../../../typings/shiitake.d.ts&quot; /&gt;
    import * as React from &#39;react&#39;;
    import Shiitake from &#39;shiitake&#39;;

&gt; [ts] Could not find a declaration file for module &#39;shiitake&#39;. &#39;d:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js&#39; implicitly has an &#39;any&#39; type.

The standard why of acquiring declaration files for this type of modules is through [`@types/` way][2] and it works well. However, I cannot get the custom typings work. Any thoughts?


  [1]: https://github.com/bsidelinger912/shiitake
  [2]: https://blog.mariusschulz.com/2016/10/23/typescript-2-0-acquiring-type-declaration-files

TypeScript custom declaration files for untyped npm modules

Essentially I want to ensure that an object argument contains all of the required properties, but can contain any other properties it wants.  For example:

    function foo(bar: { baz: number }) : number {
        return bar.baz;
    }
    
    foo({ baz: 1, other: 2 });

But this results in:

    Object literal may only specify known properties, and &#39;other&#39; does not exist in type &#39;{ baz: number; }&#39;.

Can you declare a object literal type that allows unknown properties in typescript?

What is the purpose of the `declare` keyword?


    type Callback = (err: Error | String, data: Array&lt;CalledBackData&gt;) =&gt; void;

vs.

    declare type Callback = (err: Error | String, data:Array&lt;CalledBackData&gt;) =&gt; void;


Cannot find docs that explain the purpose of the `declare` keyword in TS.


Purpose of declare keyword in TypeScript

When I enable `noImplicitThis` in `tsconfig.json`, I get this error for the following code:

&gt;     &#39;this&#39; implicitly has type &#39;any&#39; because it does not have a type annotation.

    class Foo implements EventEmitter {
      on(name: string, fn: Function) { }
      emit(name: string) { }
    }

    const foo = new Foo();
    foo.on(&#39;error&#39;, function(err: any) {
      console.log(err);
      this.emit(&#39;end&#39;);  // error: `this` implicitly has type `any`
    });

Adding a typed `this` to the callback parameters results in the same error:

    foo.on(&#39;error&#39;, (this: Foo, err: any) =&gt; { // error: `this` implicitly has type `any`

A workaround is to replace `this` with the object:

    foo.on(&#39;error&#39;, (err: any) =&gt; {
      console.log(err);
      foo.emit(&#39;end&#39;);
    });

But what is the proper fix for this error?

---

**UPDATE:** It turns out adding a typed `this` to the callback indeed addresses the error. I was seeing the error because I was using an arrow function with a type annotation for `this`:

[![typescript playground][1]][1]

  [1]: https://i.stack.imgur.com/k4dmb.png

&#39;this&#39; implicitly has type &#39;any&#39; because it does not have a type annotation

In my Typescript 2.2.1 project in Visual Studio 2015 Update 3, I am getting hundreds of errors in the error list like:

&gt;Cannot write file &#39;C:/{{my-project}}/node_modules/buffer-shims/index.js&#39; because it would overwrite input file.

It looks like this all the time.  It doesn&#39;t actually prevent building, and everything works just fine, but the error list is distracting and difficult to locate &quot;real&quot; errors when they occur.

[![visual studio error list][1]][1]

Here is my `tsconfig.json` file

    {
      &quot;compileOnSave&quot;: true,
      &quot;compilerOptions&quot;: {
        &quot;baseUrl&quot;: &quot;.&quot;,
        &quot;module&quot;: &quot;commonjs&quot;,
        &quot;noImplicitAny&quot;: true,
        &quot;removeComments&quot;: true,
        &quot;sourceMap&quot;: true,
        &quot;target&quot;: &quot;ES5&quot;,
        &quot;forceConsistentCasingInFileNames&quot;: true,
        &quot;strictNullChecks&quot;: true,
        &quot;allowUnreachableCode&quot;: false,
        &quot;allowUnusedLabels&quot;: false,
        &quot;noFallthroughCasesInSwitch&quot;: true,
        &quot;noImplicitReturns&quot;: true,
        &quot;noImplicitThis&quot;: true,
        &quot;noUnusedLocals&quot;: true,
        &quot;noUnusedParameters&quot;: true,
    
        &quot;typeRoots&quot;: [],
        &quot;types&quot;: [] //Explicitly specify an empty array so that the TS2 @types modules are not acquired since we aren&#39;t ready for them yet.
      },
      &quot;exclude&quot;: [&quot;node_modules&quot;]
    }



How can I get rid of all these errors?

  [1]: https://i.stack.imgur.com/wTs9r.png

Typescript error &quot;Cannot write file ... because it would overwrite input file.&quot;

I&#39;m currently working on a ReactJS project which uses Webpack2 and TypeScript. Everything works perfectly apart from one thing - I can&#39;t a find a way to move interfaces that I&#39;ve written myself into separate files so that they are visible to the whole application.

For prototyping purposes I initially had interfaces defined in files that use them but eventually I started adding some that were needed in multiple classes and that&#39;s when all the problems started. No matter what changes I make to my `tsconfig.json` and no matter where I put the files my IDE and Webpack both complain about not being able to find names (*&quot;Could not find name &#39;IMyInterface&#39;&quot;*). 

Here&#39;s my current `tsconfig.json` file:

```json
{
  &quot;compilerOptions&quot;: {
    &quot;baseUrl&quot;: &quot;src&quot;,
    &quot;outDir&quot;: &quot;build/dist&quot;,
    &quot;module&quot;: &quot;commonjs&quot;,
    &quot;target&quot;: &quot;es5&quot;,
    &quot;lib&quot;: [
      &quot;es6&quot;,
      &quot;dom&quot;
    ],
    &quot;typeRoots&quot;: [
      &quot;./node_modules/@types&quot;,
      &quot;./typings&quot;
    ],
    &quot;sourceMap&quot;: true,
    &quot;allowJs&quot;: true,
    &quot;jsx&quot;: &quot;react&quot;,
    &quot;moduleResolution&quot;: &quot;node&quot;,
    &quot;rootDir&quot;: &quot;src&quot;,
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;noImplicitReturns&quot;: true,
    &quot;noImplicitThis&quot;: true,
    &quot;noImplicitAny&quot;: false,
    &quot;strictNullChecks&quot;: true,
    &quot;suppressImplicitAnyIndexErrors&quot;: true,
    &quot;noUnusedLocals&quot;: true
  },
  &quot;exclude&quot;: [
    &quot;node_modules&quot;,
    &quot;build&quot;,
    &quot;scripts&quot;,
    &quot;acceptance-tests&quot;,
    &quot;webpack&quot;,
    &quot;jest&quot;,
    &quot;src/setupTests.ts&quot;
  ],
  &quot;types&quot;: [
    &quot;typePatches&quot;
  ]
}
```

As you can see, my `tsconfig.json` is in the root of the project directory, all source is in `./src`, I placed my custom `.d.ts` files in `./typings` and included it in `typeRoots`.

I tested it with TypeScript 2.1.6 and 2.2.0 and neither works.

One way of getting it all to work is to move my `typings` directory into `src` and then `import {IMyInterface} from &#39;typings/blah&#39;` but that doesn&#39;t feel right to me as it&#39;s not something I need to use. I want those interfaces to just be &#39;magically&#39; available throughout my application.

Here&#39;s a sample `app.d.ts` file:

```typescript
interface IAppStateProps {}
interface IAppDispatchProps {}
interface IAppProps extends IAppStateProps, IAppDispatchProps {}
```

Do I need to `export` them or maybe `declare`? I hope I don&#39;t have to wrap them in a namespace?!

## Update (October 2020)

Seeing how this question is still surprisingly popular I wanted to explain the solution in more detail.

Firstly, what could and should be confusing to people is that the interface example I gave at the end of my question actually doesn&#39;t have any `export` keywords even though I&#39;m almost certain I did have them in my files at the time of asking the question. I believe I didn&#39;t include them in the question thinking they didn&#39;t make any difference, whether they were there or not. Well, it turns out that it&#39;s not true and the `export` keyword is exactly what makes or breaks you being able to just &quot;use&quot; the interfaces versus having to explicitly `import` them.

So, the way it works in TypeScript is as follows:

If you want an interface/type that you can simply use without having to import it in the consuming module said interface must reside in a `.ts` or ideally a `.d.ts` file **without any imports or exports being present in the same file**. This is of utmost importance because as soon as you are exporting at least one thing from the same file it becomes a module and everything that is in that module must be subsequently imported by consumers.

To give you an example let&#39;s assume you want to have a type called `Dictionary` that you want to be able to use without importing. The way to declare it would be as follows:

```typescript
// types.d.ts
interface Dictionary {}
interface Foo {}
interface Bar {}
```

To use it you simply do:

```typescript
// consumer.ts
const dict: Dictionary = {};
```

However, it will no longer work if for some reason **any** of the interfaces/types in that file are exported, e.g.:

```typescript 
// types.d.ts
interface Dictionary {}
interface Foo {}
export interface Bar {}
```

It will also not work if there are imports in that file:

```typescript
// types.d.ts
import { OtherType } from &#39;other-library&#39;;

interface Dictionary {}
interface Foo extends OtherType {}
interface Bar {}
```

If that is the case the only way to be able to use the `Dictionary` type would be to also export it and then import it in the consumer:

```typescript
// types.d.ts
export interface Dictionary {}
interface Foo {}
export interface Bar {}

// consumer.ts
import { Dictionary } from &#39;./types&#39;;

const dict: Dictionary = {};
```

#### `--isolatedModules`

There is an additional quirk to keep in mind when using the `isolatedModules` modules flag in TypeScript, which, importantly, is enabled by default (and cannot be disabled) when using Create React App - `.ts` files MUST export at least one thing as otherwise you will be getting the *&quot;All files must be modules when the &#39;--isolatedModules&#39; flag is provided.&quot;* error. That means that putting the `Dictionary` interface in a `types.ts` files without the export keyword won&#39;t work. It must either be an export from a `.ts` file of be a declaration without the export in a `.d.ts` file:

```typescript
// types.d.ts
interface Dictionary {}        // works
export interface Dictionary {} // works

// types.ts
interface Dictionary {}        // doesn&#39;t work with --isolatedModules enabled
export interface Dictionary {} // works

```

N.B.  
As @dtabuenc mentions in his answer ambient modules (`.d.ts` files) are discoraged and my correction shouldn&#39;t be taken as advice. It&#39;s just an attempt at explaining how normal modules and ambient modules work in TypeScript.

How to configure custom global interfaces (.d.ts files) for TypeScript?

I&#39;m getting error in my Vs Code terminal and command prompt that **&#39;ts-node&#39; is not recognized as an internal or external command, operable program or batch file.** while i&#39;m trying the start command in the terminal **npm run dev** and i have added my package.json file also.

    {
	&quot;name&quot;: &quot;tsnode&quot;,
	&quot;version&quot;: &quot;1.0.0&quot;,
	&quot;description&quot;: &quot;ts-node experiment.&quot;,
	&quot;scripts&quot;: {
		&quot;dev&quot;: &quot;nodemon --exec &#39;ts-node --cache-directory .tscache&#39; ./server.ts&quot;,
		&quot;start&quot;: &quot;ts-node --fast ./server.ts&quot;
	},
	&quot;author&quot;: &quot;Mugesh&quot;,
	&quot;license&quot;: &quot;ISC&quot;,
	&quot;dependencies&quot;: {
		&quot;@types/body-parser&quot;: &quot;^1.16.3&quot;,
		&quot;@types/chalk&quot;: &quot;^0.4.31&quot;,
		&quot;@types/express&quot;: &quot;^4.0.35&quot;,
		&quot;@types/node&quot;: &quot;^7.0.18&quot;,
		&quot;body-parser&quot;: &quot;^1.17.1&quot;,
		&quot;chalk&quot;: &quot;^1.1.3&quot;,
		&quot;express&quot;: &quot;^4.15.2&quot;,
		&quot;nodemon&quot;: &quot;^1.11.0&quot;,
		&quot;ts-node&quot;: &quot;^3.0.4&quot;,
		&quot;typescript&quot;: &quot;^2.3.4&quot;
	}
}

&#39;ts-node&#39; is not recognized as an internal or external command, operable program or batch file

I have a very simple functional component as follows:

    import * as React from &#39;react&#39;;
    
    export interface AuxProps  { 
        children: React.ReactNode
     }
    
     
    const aux = (props: AuxProps) =&gt; props.children;
    
    export default aux;


And another component:

    import * as React from &quot;react&quot;;
    
    export interface LayoutProps  { 
       children: React.ReactNode
    }
    
    const layout = (props: LayoutProps) =&gt; (
        &lt;Aux&gt;
            &lt;div&gt;Toolbar, SideDrawer, Backdrop&lt;/div&gt;
            &lt;main&gt;
                {props.children}
            &lt;/main&gt;
        &lt;Aux/&gt;
    );
    
    export default layout;


I keep on getting the following error:

&gt; [ts]
JSX element type &#39;ReactNode&#39; is not a constructor function for JSX elements.
  Type &#39;undefined&#39; is not assignable to type &#39;ElementClass&#39;. [2605]

How do I type this correctly?


TypeScript and React - children type?

For either case:

    document.getElementById(&#39;body&#39;);
    // or
    window.document.getElementById(&#39;body&#39;);

I get `error TS2304: Cannot find name &#39;window&#39;.`

Am I missing something in `tsconfig.json` for a definition file I should install?

I get the message when running `tsc` and in `vscode`

tsconfig.json:

    {
        &quot;compilerOptions&quot;: {
            &quot;allowJs&quot;: true,
            &quot;emitDecoratorMetadata&quot;: true,
            &quot;experimentalDecorators&quot;: true,
            &quot;jsx&quot;: &quot;react&quot;,
            &quot;module&quot;: &quot;commonjs&quot;,
            &quot;moduleResolution&quot;: &quot;node&quot;,
            &quot;noEmitOnError&quot;: true,
            &quot;noImplicitAny&quot;: false,
            &quot;sourceMap&quot;: true,
            &quot;suppressImplicitAnyIndexErrors&quot;: true,
            &quot;target&quot;: &quot;ES2016&quot;,
            &quot;typeRoots&quot;: [
                &quot;node_modules/@types/&quot;,
                &quot;typings/index.d.ts&quot;
            ]
        },
        &quot;exclude&quot;: [
            &quot;node_modules&quot;,
            &quot;**/*-aot.ts&quot;
        ]
    }

My Answer:
For use with `tsconfig.json` I target `es5` and use `lib: [&quot;es2015&quot;, &quot;dom&quot;]`

Typescript cannot find name window or document

I try to convert an existing project to use Typescript and I have problems doing so with my testing setup.

I had a setup file for my tests that sets up jsdom so that all my DOM interacting code works during my tests. Using Typescript (ts-node with mocha) I always get errors like this:

    Property &#39;window&#39; does not exist on type &#39;Global&#39;.

To prevent this I tried patching the NodeJS.Global interface like this:

    declare namespace NodeJS{
      interface Global {
        document: Document;
        window: Window;
        navigator: Navigator;
      }
    }

But this didn&#39;t change anything.

How do I enable those browser properties on the NodeJS global variable?

**Extras:**

This is my mocha `setup.ts`:

    import { jsdom, changeURL } from &#39;jsdom&#39;;
    
    const exposedProperties = [&#39;window&#39;, &#39;navigator&#39;, &#39;document&#39;];
    
    global.document = jsdom(&#39;&#39;);
    global.window = global.document.defaultView;
    Object.keys(global.document.defaultView).forEach((property) =&gt; {
      if (typeof global[property] === &#39;undefined&#39;) {
        exposedProperties.push(property);
        global[property] = global.document.defaultView[property];
      }
    });
    
    global.navigator = {
      userAgent: &#39;node.js&#39;,
    };
    
    changeURL(global.window, &#39;http://example.com/&#39;);

How to prevent &quot;Property &#39;...&#39; does not exist on type &#39;Global&#39;&quot; with jsdom and typescript?

I am currently working on a TypeScript application which is comprised of multiple Node modules written in TypeScript, that are installed into the `node_modules` directory.

Before continuing, I would like to note that I am using TypeScript 2.0, I am not adverse to using the 2.1 dev release if need be as well. I just want to get this working.

The structure of each Node module is something along the lines of:

    dist/
        es2015/
            index.js
            utils/
                Calculator.js
                Calculator.d.ts
                Date.js
                Date.d.ts
                Flatpack.js
                Flatpack.d.ts
    src/
        index.ts
        utils/
            Calculator.ts
            Date.ts
            Flatpack.ts

The dist folder is the generated source, with this path being configured using `outDir` inside of my `tsconfig.json` file. I have also configured the `main` property in my `package.json` to be `dist/es2015/index.js`.

**Important things to note:**

* In my project I am using `moduleResolution` type of `node`
* I am using TypeScript 2.0
* I am not asking how to import a file from within the package. I am installing the package via Npm and then importing it via `packagename/` from within an application that is using this module.

Now comes my question/issue. Whilst importing files from this module, I would like to be able to do this:

    import {Sin, Cos, Tan} from &quot;common-utils/utils/Calculator&quot;;

However, the file cannot resolve to the `dist/es2015/utils` directory. Ideally I would like my imports to resolve from this specific `dist` folder and not from the root, which is what appears to be happening.

The above import needs to be written as the following to get it to work:

    import {Sin, Cos, Tan} from &quot;common-utils/dist/es2015/utils/Calculator&quot;;

However, writing `dist/es2015` each time is not ideal and it just makes some of the imports look really long. Is there a way I can configure my module to resolve to the `dist/es2015` directory? I don&#39;t want to have to put in overrides inside of my project, ideally each module would specify where files are resolved from. 

If you are still unsure what I am asking (and I apologise if this is confusing) in Jspm when you create a plugin/module to be used with Jspm, you can specify inside of the `package.json` for the module something like the following:

      &quot;jspm&quot;: {
        &quot;registry&quot;: &quot;npm&quot;,
        &quot;jspmPackage&quot;: true,
        &quot;main&quot;: &quot;my-module&quot;,
        &quot;format&quot;: &quot;amd&quot;,
        &quot;directories&quot;: {
          &quot;dist&quot;: &quot;dist/amd&quot;
        },

I am looking for the equivalent of the above in TypeScript (if it exists). A mapping directive, so when the end user runs `npm install my-cool-package` and then in their app tries to import something, all imports by default resolve to the `commonjs` directory (the above example for Jspm uses amd, but same premise).

Is this possible or am I misunderstanding something here? I know some new path mapping features were added into the latest release, but documentation on using them is almost nonexistent.


TypeScript Import Path Alias

What does `Record&lt;K, T&gt;` mean in Typescript?  

Typescript 2.1 introduced the `Record` type, describing it in an example:

&gt;     // For every properties K of type T, transform it to U
&gt;     function mapObject&lt;K extends string, T, U&gt;(obj: Record&lt;K, T&gt;, f: (x: T) =&gt; U): Record&lt;K, U&gt;

see [Typescript 2.1](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#partial-readonly-record-and-pick)

And the [Advanced Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html) page mentions `Record` under the Mapped Types heading alongside `Readonly`, `Partial`, and `Pick`, in what appears to be its definition:

&gt;     type Record&lt;K extends string, T&gt; = {
&gt;         [P in K]: T;
&gt;     }

&gt; Readonly, Partial and Pick are homomorphic whereas Record is not. One clue that Record is not homomorphic is that it doesn’t take an input type to copy properties from:
&gt; 
&gt;     type ThreeStringProps = Record&lt;&#39;prop1&#39; | &#39;prop2&#39; | &#39;prop3&#39;, string&gt;

And that&#39;s it. Besides the above quotes, there is no other mention of `Record` on [typescriptlang.org](https://www.google.com/search?q=site:https://www.typescriptlang.org/+record&amp;filter=0&amp;biw=1372&amp;bih=835).  

## Questions
1. Can someone give a simple definition of what `Record` is? 

1. Is `Record&lt;K,T&gt;` merely a way of saying &quot;all properties on this object will have type `T`&quot;? Probably not _all_ properties, since `K` has some purpose...

1. Does the `K` generic forbid additional keys on the object that are not `K`, or does it allow them and just indicate that their properties are not transformed to `T`?

1. With the given example:

       type ThreeStringProps = Record&lt;&#39;prop1&#39; | &#39;prop2&#39; | &#39;prop3&#39;, string&gt;

    Is it exactly the same as this?:

       type ThreeStringProps = {prop1: string, prop2: string, prop3: string}



What is the Record type in typescript?

According to [this][1] article typings system for typescript 2.0 has changed and so it is not clear how to attach custom typings now. Should I always create NPM package for that?

Thank you in advance!


  [1]: https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/

How to add custom &quot;typings&quot; in typescript 2.0 / 3.0

I&#39;ve been researching around for a further explanation into the *skipLibCheck* TypeScript compiler argument to determine the safety of having this set to **true**. The most in-depth explanation I found is the following:

&gt; New --skipLibCheck
TypeScript 2.0 adds a new --skipLibCheck compiler option that causes type checking of declaration files (files with extension .d.ts) to be skipped. When a program includes large declaration files, the compiler spends a lot of time type checking declarations that are already known to not contain errors, and compile times may be significantly shortened by skipping declaration file type checks.

&gt; Since declarations in one file can affect type checking in other files, some errors may not be detected when --skipLibCheck is specified. For example, if a non-declaration file augments a type declared in a declaration file, errors may result that are only reported when the declaration file is checked. However, in practice such situations are rare.

I understand that you obviously get a performance benefit from the compiler not having to type check files which are considered not to contain errors but I&#39;ve seen this flag being used to get around errors being emitted from the compiler in relation to the declaration files having problems.

Surely using this flag to get around this decreases the integrity of the typing of your application?

Usage of the TypeScript compiler argument &#39;skipLibCheck&#39;

( Editor: VS Code; Typescript: 2.2.1 )

The purpose is to get the headers of the response of the request

Assume a POST request with HttpClient in a Service 

    import {
        Injectable
    } from &quot;@angular/core&quot;;
    
    import {
        HttpClient,
        HttpHeaders,
    } from &quot;@angular/common/http&quot;;
    
    @Injectable()
    export class MyHttpClientService {
        const url = &#39;url&#39;;
    
        const body = {
            body: &#39;the body&#39;
        };
    
        const headers = &#39;headers made with HttpHeaders&#39;;
    
        const options = {
            headers: headers,
            observe: &quot;response&quot;, // to display the full response
            responseType: &quot;json&quot;
        };
    
        return this.http.post(sessionUrl, body, options)
            .subscribe(response =&gt; {
                console.log(response);
                return response;
            }, err =&gt; {
                throw err;
            });
    }

[HttpClient Angular Documentation](https://angular.io/api/common/http/HttpClient)

The first problem is that I have a Typescript error :


    &#39;Argument of type &#39;{ 
        headers: HttpHeaders; 
        observe: string; 
        responseType: string;
    }&#39; is not assignable to parameter of type&#39;{ 
        headers?: HttpHeaders;
        observe?: &quot;body&quot;;
        params?: HttpParams; reportProgress?: boolean;
        respons...&#39;.
    
    Types of property &#39;observe&#39; are incompatible.
    Type &#39;string&#39; is not assignable to type &#39;&quot;body&quot;&#39;.&#39;
    at: &#39;51,49&#39; source: &#39;ts&#39;

Indeed, when I go to the ref of post() method, I point on this prototype (I Use VS code)

    post(url: string, body: any | null, options: {
            headers?: HttpHeaders;
            observe?: &#39;body&#39;;
            params?: HttpParams;
            reportProgress?: boolean;
            responseType: &#39;arraybuffer&#39;;
            withCredentials?: boolean;
        }): Observable&lt;ArrayBuffer&gt;;

But I want this overloaded method :

    post(url: string, body: any | null, options: {
        headers?: HttpHeaders;
        observe: &#39;response&#39;;
        params?: HttpParams;
        reportProgress?: boolean;
        responseType?: &#39;json&#39;;
        withCredentials?: boolean;
    }): Observable&lt;HttpResponse&lt;Object&gt;&gt;;

So, I tried to fix this error with this structure :

      const options = {
                headers: headers,
                &quot;observe?&quot;: &quot;response&quot;,
                &quot;responseType?&quot;: &quot;json&quot;,
            };

And It compiles! But I just get the body request as in json format.

Futhermore, why I have to put a ? symbol at the end of some name of fields ? As I saw on Typescript site, this symbol should just tell to the user that it is optional ?

I also tried to use all the fields, without and with ? marks

**EDIT** 

I tried the solutions proposed by [Angular 4 get headers from API response](https://stackoverflow.com/questions/44292270/angular-4-get-headers-from-api-response). For the map solution:

    this.http.post(url).map(resp =&gt; console.log(resp));

Typescript compiler tells that map does not exists because it is not a part of Observable&lt;Object&gt;

I also tried this
    
    import { Response } from &quot;@angular/http&quot;;

    this.http.post(url).post((resp: Response) =&gt; resp)

It compiles, but I get a unsupported Media Type response.
These solutions should work for &quot;Http&quot; but it does not on &quot;HttpClient&quot;.

**EDIT 2**

I get also a unsupported media type with the @Supamiu solution, so it would be an error on my headers. So the second solution from above (with Response type) should works too. But personnaly, I don&#39;t think it is a good way to mix &quot;Http&quot; with &quot;HttpClient&quot; so I will keep the solution of Supamiu



Angular 4.3.3 HttpClient : How get value from the header of a response?

Suppose I have two enums as described below in Typescript, then How do I merge them

    enum Mammals {
        Humans,
        Bats,
        Dolphins
    }

    enum Reptiles {
        Snakes,
        Alligators,
        Lizards
    }

    export default Mammals &amp; Reptiles // For Illustration purpose, Consider both the Enums have been merged.

Now, when I `import` the `exported value` in another file, I should be able to access values from both the enums.  

    import animalTypes from &quot;./animalTypes&quot;
    
    animalTypes.Humans //valid
    
    animalTypes.Snakes // valid


How can I achieve such functionality in TypeScript?


How to merge two enums in TypeScript

I do not understand the meaning of `types` field in `tsconfig.json`. In documentation I have read such text: 

            


&lt;!-- language: lang-js --&gt;

    &quot;types&quot;: {
      &quot;description&quot;: &quot;Type declaration files to be included in compilation. Requires TypeScript version 2.0 or later.&quot;,
      &quot;type&quot;: &quot;array&quot;,
      &quot;items&quot;: {
        &quot;type&quot;: &quot;string&quot;
      }
    },


As far, as I understand if I install `@types/express` I should add such string in `tsconfig.json`

    {
      &quot;compilerOptions&quot;: {
         ...
         &quot;types&quot;: [&quot;lodash&quot;]
       }
    } 

but everything works fine without it. And now I do not understand, why I need `types` field

Typescript 2.0. &quot;types&quot; field in tsconfig.json

If I&#39;d like to assign a type to a variable that will later be assigned a setInterval like so:

    this.autoSaveInterval = setInterval(function(){
          if(this.car.id){
            this.save();
          }
          else{
            this.create();
          }
        }.bind(this), 50000);

What type should be assigned to this.autosaveInterval vairable?

TypeScript - what type is f.e. setInterval

My question is very brief. I am new to TypeScript, been searching around here and there but didn&#39;t find yet an answer.

Does any experienced TypeScripter know if there is a character Type or an easy way to achieve one?

TypeScript character type?

I was trying to create a `&lt;PrivateRoute&gt;` as describe in the react-router [documents][1] using TypeScript. Can anyone help me out?

**The privateRoute in react-router document:**

    const PrivateRoute = ({ component: Component, ...rest }) =&gt; (
      &lt;Route {...rest} render={props =&gt; (
        fakeAuth.isAuthenticated ? (
          &lt;Component {...props}/&gt;
        ) : (
          &lt;Redirect to={{pathname: &#39;/login&#39;, state: { from: props.location }
       }}/&gt;
      )
     )}/&gt;
    )

**Below is my TypeScript version(it won&#39;t work) :**

    const PrivateRoute = (theProps: { path: string, component: React.SFC&lt;RouteComponentProps&lt;any&gt; | undefined&gt; | React.ComponentClass&lt;RouteComponentProps&lt;any&gt; | undefined&gt; }) =&gt; {
        return &lt;Route path={theProps.path} render={props =&gt; (
            fakeAuth.isAuthenticated ? (
                &lt;React.Component {...theProps} /&gt; &lt;!-- **** It will raise error *** --&gt;
            ) : (
                    &lt;Redirect to={{
                        pathname: &#39;/&#39;,
                        state: { from: props.location }
                    }} /&gt;
                )
        )} /&gt;
    }

The `&lt;React.Component {...thisProps} /&gt;` is not right. The error is: NodeInvocationException: inst.render is not a function
TypeError: inst.render is not a function

  [1]: https://reacttraining.com/react-router/web/example/auth-workflow

All typescript2.0 Solutions on Gang of Coders

Total of 20 typescript2.0 Solutions

TypeScript custom declaration files for untyped npm modules

Can you declare a object literal type that allows unknown properties in typescript?

Purpose of declare keyword in TypeScript

'this' implicitly has type 'any' because it does not have a type annotation

Typescript error "Cannot write file ... because it would overwrite input file."

How to configure custom global interfaces (.d.ts files) for TypeScript?

'ts-node' is not recognized as an internal or external command, operable program or batch file

TypeScript and React - children type?

Typescript cannot find name window or document

How to prevent "Property '...' does not exist on type 'Global'" with jsdom and typescript?

TypeScript Import Path Alias

What is the Record type in typescript?

How to add custom "typings" in typescript 2.0 / 3.0

Usage of the TypeScript compiler argument 'skipLibCheck'

Angular 4.3.3 HttpClient : How get value from the header of a response?

How to merge two enums in TypeScript

Typescript 2.0. "types" field in tsconfig.json

TypeScript - what type is f.e. setInterval

TypeScript character type?

How to rewrite the protected/private route using TypeScript and React-Router 4, 5 or 6?