I use TypeScript 2 in my project. I&#39;d like to use some js library, but also typings for that library. I can install types with simple `npm install @types/some-library `. I&#39;m not sure if I should `--save` or `--save-dev` them. It seems to me that even DefinetelyTyped GitHub readme kind of mentions both versions, but never explains them. I would think that @types should be in `devDependencies`, as types are needed for development and aren&#39;t used in runtime, but I saw many times @types in just `dependencies`. I&#39;m confused.

How should I decide whether @types/* goes into `dependencies` or `devDependencies`? Are there actually some more or less official instructions?

How do I decide whether @types/* goes into `dependencies` or `devDependencies`?

In my react and typescript app, I use:

    onChange={(e) =&gt; data.motto = (e.target as any).value}

How do I correctly define the typings for the class, so I wouldn&#39;t have to hack my way around the type system with `any`?

	export interface InputProps extends React.HTMLProps&lt;Input&gt; {
	...

	}

	export class Input extends React.Component&lt;InputProps, {}&gt; {
	}


If I put `target: { value: string };` I get :

	ERROR in [default] /react-onsenui.d.ts:87:18
	Interface &#39;InputProps&#39; incorrectly extends interface &#39;HTMLProps&lt;Input&gt;&#39;.
	  Types of property &#39;target&#39; are incompatible.
	    Type &#39;{ value: string; }&#39; is not assignable to type &#39;string&#39;.


Typescript input onchange event.target.value

Is there a way to change the type of interface property defined in a `*.d.ts` in typescript?

for example:
An interface in `x.d.ts` is defined as  

    interface A {
      property: number;
    }

I want to change it in the typescript files that I write to 

    interface A {
      property: Object;
    }

or even this would work

    interface B extends A {
      property: Object;
    }

Will this approach work? It didn&#39;t work when I tried on my system. Just want to confirm if it&#39;s even possible?


Overriding interface property type defined in Typescript d.ts file

I want to extend Express Session typings to allow use my custom data in session storage. I have an object `req.session.user` which is an instance of my class `User`:

    export class User {
        public login: string;
        public hashedPassword: string;

        constructor(login?: string, password?: string) {
            this.login = login || &quot;&quot; ;
            this.hashedPassword = password ? UserHelper.hashPassword(password) : &quot;&quot;;
        }
    }
So i created my `own.d.ts` file to merge definition with existing express session typings:

    import { User } from &quot;./models/user&quot;;

    declare module Express {
        export interface Session {
            user: User;
        }
    }

But it&#39;s not working at all - VS Code and tsc don&#39;t see it. So I created test definition with simple type:

    declare module Express {
        export interface Session {
            test: string;
        }
    }
And the test field is working ok, so the import cause problem.

I also tried to add `/// &lt;reference path=&#39;models/user.ts&#39;/&gt;` instead import but the tsc didn&#39;t see the User class - how can I use my own class in *d.ts file?

**EDIT:**
I set tsc to generate definition files on compile and now I have my user.d.ts:

    export declare class User {
        login: string;
        hashedPassword: string;
        constructor();
        constructor(login: string, password: string);
    }

And the own typing file for extending Express Sesion:

    import { User } from &quot;./models/user&quot;;
    declare module Express {
        export interface Session {
            user: User;
            uuid: string;
        }
    }

But still not working when import statement on top. Any ideas?

Import class in definition file (*d.ts)

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;ve noticed there&#39;s an npm organization [@types](https://www.npmjs.com/~types), which contains typing packages, but can&#39;t find any documentation on it. How are these meant to be used? 

Is it meant to be used with [typings](https://github.com/typings/typings) tool? If so, how to install them? For instance, there&#39;s a [`@types/openlayers`](https://www.npmjs.com/package/@types/openlayers) package, but `typings search npm:openlayers` returns nothing. 

Is it meant to be used separately from the typings tool? E.g. installed directly with `npm`?

TypeScript typings in npm @types org packages

I have this Product interface:

    export interface Product{
      code: string;
      description: string;
      type: string;
    }

Service with method calling product endpoint:

      public getProducts(): Observable&lt;Product&gt; {
        return this.http.get&lt;Product&gt;(`api/products/v1/`);
      }
	  
And component where I use this service to get the Products.

    export class ShopComponent implements OnInit {
    	public productsArray: Product[];
    	
    	ngOnInit() {
    		this.productService.getProducts().subscribe(res =&gt; {
    		  this.productsArray = res;
    		});
    	}
    }

With this state I&#39;m getting error:

&gt; [ts] Type &#39;Product&#39; is missing the following properties from type
&gt; &#39;Product[]&#39;: length, pop, push, concat, and 26 more. [2740]

Removing typing on `productsArray` variable removes the error, but don&#39;t get why this is not working, since server response is an array of objects in the type of `Products`?

Typescript: Type X is missing the following properties from type Y length, pop, push, concat, and 26 more. [2740]

I&#39;m trying to build angular2 application for **production** for that I&#39;m following this [blog][1]. After my **ngc** successful compilation when the **tsc compilation** takes place it generates below error shown in the image: 

[![enter image description here][2]][2]


After searching for a while I found this [blog][3] which explains the problem in **&quot;The context property&quot;** section which I&#39;m not able to understood properly may be it give some good idea to you that what&#39;s happening wrong.
basically when we&#39;re making a variable private we&#39;re getting ***&quot;ERROR: Property is private and only accessible within class&quot;***. I&#39;m not understanding why is it coming. 

Kindly help us as we&#39;re banging our head in this problem for past couple of days.


  [1]: http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
  [2]: https://i.stack.imgur.com/6pCBj.png
  [3]: http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/

Property &#39;X&#39; is private and only accessible within class &#39;xyzComponent&#39;

I can&#39;t find TypeScript definition `@type/{name}` for one of my installed NodeJS packages, so I attempt to write a `d.ts` file for it, and put the file in `{project root}\typings` folder. This is how I do:

    // My source code: index.ts
    import Helper from &#39;node-helper-lib&#39;;


    // My definition: \typings\node-helper-lib.d.ts
    declare....(something else)

    declare module &#39;node-helper-lib&#39; {
       class Helper { ... }
       export = Helper;
    }

However, Visual Studio Code keeps yielding this error and puts red line under `declare module &#39;node-helper-lib&#39;`:

&gt; [ts] Invalid module name in augmentation. Module &#39;node-helper-lib&#39;
&gt; resolves to an untyped module at &#39;{project
&gt; path}\node_modules\node-helper-lib\index.js&#39;, which cannot be
&gt; augmented.

Isn&#39;t it legit that because the library is untyped, so I should be allowed to add typing to it?

**UPDATE:**

I am using:

 - TypeScript: 2.1.4
 - Visual Studio Code: 1.9.1
 - Node JS: 6.9.4
 - Windows 10 x64

Having error &quot;Module &#39;name&#39; resolves to an untyped module at...&quot; when writing custom TypeScript definition file

After trying suggestions posted in [other places][1], I find myself unable to get a typescript project running that uses an untyped NPM module. Below is a minimal example and the steps that I tried.

For this minimal example, we will pretend that `lodash` does not have existing type definitions. As such, we will ignore the package `@types/lodash` and try to manually add its typings file `lodash.d.ts` to our project.

Folder structure

 - node_modules
   - lodash
 - src
   - foo.ts
 - typings
   - custom
     - lodash.d.ts
   - global
   - index.d.ts
 - package.json
 - tsconfig.json
 - typings.json


Next, the files. 

File `foo.ts`

    ///&lt;reference path=&quot;../typings/custom/lodash.d.ts&quot; /&gt;
    import * as lodash from &#39;lodash&#39;;
    
    console.log(&#39;Weeee&#39;);

File `lodash.d.ts` is copied directly from the original `@types/lodash` package.

File `index.d.ts`

    /// &lt;reference path=&quot;custom/lodash.d.ts&quot; /&gt;
    /// &lt;reference path=&quot;globals/lodash/index.d.ts&quot; /&gt;

File `package.json`

    {
      &quot;name&quot;: &quot;ts&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;description&quot;: &quot;&quot;,
      &quot;main&quot;: &quot;index.js&quot;,
      &quot;typings&quot;: &quot;./typings/index.d.ts&quot;,
      &quot;dependencies&quot;: {
        &quot;lodash&quot;: &quot;^4.16.4&quot;
      },
      &quot;author&quot;: &quot;&quot;,
      &quot;license&quot;: &quot;ISC&quot;
    }

File `tsconfig.json`

    {
      &quot;compilerOptions&quot;: {
        &quot;target&quot;: &quot;ES6&quot;,
        &quot;jsx&quot;: &quot;react&quot;,
        &quot;module&quot;: &quot;commonjs&quot;,
        &quot;sourceMap&quot;: true,
        &quot;noImplicitAny&quot;: true,
        &quot;experimentalDecorators&quot;: true,
        &quot;typeRoots&quot; : [&quot;./typings&quot;],
        &quot;types&quot;: [&quot;lodash&quot;]
      },
      &quot;include&quot;: [
        &quot;typings/**/*&quot;,
        &quot;src/**/*&quot;
      ],
      &quot;exclude&quot;: [
        &quot;node_modules&quot;,
        &quot;**/*.spec.ts&quot;
      ]
    }

File `typings.json`

    {
        &quot;name&quot;: &quot;TestName&quot;,
        &quot;version&quot;: false,
        &quot;globalDependencies&quot;: {
            &quot;lodash&quot;: &quot;file:typings/custom/lodash.d.ts&quot;
        }
    }


As you can see, I have tried many different ways of importing typings:

 1. By directly importing it in `foo.ts`
 2. By a `typings` property in `package.json`
 3. By using `typeRoots` in `tsconfig.json` with a file `typings/index.d.ts`
 4. By using an explicit `types` in `tsconfig.json`
 5. By including the `types` directory in `tsconfig.json`
 6. By making a custom `typings.json` file and running `typings install`

Yet, when I run Typescript:

    E:\temp\ts&gt;tsc
    error TS2688: Cannot find type definition file for &#39;lodash&#39;.

What am I doing wrong?

  [1]: https://stackoverflow.com/questions/37641960/typescript-how-to-define-custom-typings-for-installed-npm-package


TypeScript 2: custom typings for untyped npm module

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 have two sets of string values that I want to map from one to the other as a constant object.  I want to generate two types from that mapping: one for keys and one for values.  

&lt;!-- language: lang-ts --&gt;

    const KeyToVal = {
        MyKey1: &#39;myValue1&#39;,
        MyKey2: &#39;myValue2&#39;,
    };

The keys are easy enough:

&lt;!-- language: lang-ts --&gt;

    type Keys = keyof typeof KeyToVal;

I&#39;m having trouble getting a *compile-time* type for the values.  I thought maybe one of these would work:

&lt;!-- language: lang-ts --&gt;

    type Values = typeof KeyToVal[Keys];
    type Values&lt;K&gt; = K extends Keys ? (typeof KeyToVal)[K] : never;
    type Prefix&lt;
        K extends Keys = Keys, 
        U extends { [name: string]: K } = { [name: string]: K }
    &gt; = {[V in keyof U]: V}[K];

All of these just made `Values` to be `string`.  I also tried adapting the two answers to https://stackoverflow.com/questions/50822693/how-to-infer-typed-mapvalues-using-lookups-in-typescript, but either I got my adaptations wrong, or the answers didn&#39;t fit my scenario in the first place.

Types from both keys and values of object in Typescript

I&#39;ve got the &quot;Object is possibly null&quot; error many times and usually I use a safety &quot;if statement&quot; in case it returns null.

I&#39;ve got the following function: 


&lt;!-- language: lang-js --&gt;

    const ModalOverlay = (props: any[]) =&gt; {
      const overlayEl = useRef(null);
        useEffect(() =&gt; {
        overlayEl.current.focus();
        });
        return &lt;div {...props} ref={overlayEl} /&gt;;
      }

But `overlayEl.current` gets the error &quot;Object is not defined&quot;. So I&#39;ve tried:


&lt;!-- language: lang-js --&gt;

    if (!overlayEl) {
        return null
      } else {
        useEffect(() =&gt; {
        overlayEl.current.focus();
        });
        return &lt;div {...props} ref={overlayEl} /&gt;;
      }


Which didn&#39;t work. I&#39;ve tried also: 

&lt;!-- language: lang-js --&gt;

    overlay &amp;&amp; overlayEl.current.focus();

Any hints would be highly appreciated! Thanks



Typescript, how to pass &quot;Object is possibly null&quot; error?

I have the following piece of code, which receives a history object as prop:

    const ChildComponent = ({ history }) =&gt; (
            &lt;div className={styles.body}&gt;
                &lt;div className={styles.cta}&gt;
                    &lt;FloatingActionButton onClick={() =&gt; history.push(routes[4].path)}&gt;
                        &lt;span&gt;Click me&lt;/span&gt;
                    &lt;/FloatingActionButton&gt;
                &lt;/div&gt;
            &lt;/div&gt;
    );

How do I add typecheck for this history prop, **which is received by wrapping it&#39;s parent with withRouter HOC**? One way I could think of is to write something like this:

    interface Props {
        history: {
            push(url: string): void;
        };
    }

But I&#39;m sure this is not the right way, because rest of the properties of the history object are being lost.

Can you suggest the right way of doing this?

**UPDATED the code based on @Oblosys&#39;s answer**

    import { withRouter, RouteComponentProps } from &quot;react-router-dom&quot;;

    interface Props extends RouteComponentProps&lt;any&gt; {
       /* Parent component&#39;s props*/
    }
    
    class Parent extends React.Component&lt;Props, {}&gt; {
        render() {
            return &lt;ChildComponent history={this.props.history} /&gt;;
        }
    }
    
    //Child component related stuff
    interface ChildComponentProps extends RouteComponentProps&lt;any&gt; {}
    
    const ChildComponent: React.SFC&lt;ChildComponentProps&gt; = (props) =&gt; (
      &lt;div className={styles.body}&gt;
         &lt;div className={styles.cta}&gt;
             &lt;FloatingActionButton onClick={() =&gt; history.push(routes[4].path)}&gt;
                &lt;span&gt;Click me&lt;/span&gt;
             &lt;/FloatingActionButton&gt;
         &lt;/div&gt;
       &lt;/div&gt;
    );

    function mapStateToProps(state: types.AppState) {
        /* related code */
    }
    
    function mapDispatchToProps(dispatch: Redux.Dispatch&lt;types.AppState&gt;{
        /* related code */
    }

    export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Parent));

But, now I&#39;m getting the following error:

    Type &#39;{ history: History; }&#39; is not assignable to type &#39;ChildComponentProps&#39;.
        Property &#39;match&#39; is missing in type &#39;{ history: History; }&#39;

Typescript: How to add type check for history object in React?

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;

I want to type an object which can only have keys &#39;a&#39;, &#39;b&#39; or &#39;c&#39;.

So I can do it as follows:

    Interface IList {
        a?: string;
        b?: string;
        c?: string;
    }

They are all optional! 
Now I was wondering if this can be written with `Record` in just one line

    type List = Record&lt;&#39;a&#39; | &#39;b&#39; | &#39;c&#39;, string&gt;;

The only issue is that all keys need to be defined. So I ended up with

    type List = Partial&lt;Record&lt;&#39;a&#39; | &#39;b&#39; | &#39;c&#39;, string&gt;&gt;;

This works,  but I can imagine there is a better way to do this without Partial. Is there an other way to make the keys optional inside Record ?

Define a list of optional keys for Typescript Record

I am getting *File node_modules/@types/webrtc/index.d.ts is not a module* with this code:

    import * as webrtc from &quot;webrtc&quot;;
    const peerConnection1 = new RTCPeerConnection();

I have installed the typings using `npm i @types/webrtc --save-dev`. Hovering over `RTCPeerConnection` in `const peerConnection1 = new RTCPeerConnection();` display type annotations in Visual Studio Code so at least the code editor sees the types. Running `tsc` (or `webpack` with `ts-loader`) fails with the error.

I have tried `npm i webrtc --save` in a misguided attempt for solving this, but it did not change anything and I really only want the typings anyway, WebRTC is right there in the browser, I don&#39;t need a package for that. (Support aside.)

The `index.d.ts` file indeed is not a module, it just references two other files with interfaces in them. So I thought to remove `import * as webrtc from &quot;webrtc&quot;;` hoping the typings will still be visible by `tsc` somehow. (But that&#39;s impossible since I exclude `node_modules` in TypeScript config file.) When I do that `RTCPeerConnection` is no longer recognized.

Adding `/// &lt;reference src=&quot;node_modules/@types/webrtc/&quot; /&gt;` did not help, `tsc` says *Invalid reference directive syntax*.

You can view a repository with minimal repro [here on GitLab](https://gitlab.com/TomasHubelbauer/qr-signalling-channel). I am not too well versed in TypeScript typings acquisition so please forgive my ignorance if I&#39;m going about this all wrong.

TypeScript typings give me &quot;index.d.ts is not a module&quot;

I define an `AbstractModel` like so:

    export interface AbstractModel {
       [key: string]: any
    }

Then I declare the type `Keys`:

    export type Keys = keyof AbstractModel;

I would expect that anything with the Keys type would be interpreted univocally as a string, for example:

    const test: Keys;
    test.toLowercase(); // Error: Property &#39;toLowerCase&#39; does not exist on type &#39;string | number&#39;. Property &#39;toLowerCase&#39; does not exist on type &#39;number&#39;.

Is this a bug of Typescript (2.9.2), or am I missing something?

Keyof inferring string | number when key is only a string

I&#39;m trying to use the Google Analytics with angular 4, but i can&#39;t find any @type to ga.js in ts.

For a quick solution I used this in every component:

    declare let ga: any;

Following how I resolved it:

 Create a function to load the GA dynamically that inserts the GA script with current trackingId and user.

 

        loadGA(userId) {
            if (!environment.GAtrackingId) return;
    
            let scriptId = &#39;google-analytics&#39;;
    
            if (document.getElementById(scriptId)) {
                return;
            }
    
            var s = document.createElement(&#39;script&#39;) as any;
            s.type = &quot;text/javascript&quot;;
            s.id = scriptId;
            s.innerText = &quot;(function(i,s,o,g,r,a,m){i[&#39;GoogleAnalyticsObject&#39;]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,&#39;script&#39;,&#39;//www.google-analytics.com/analytics.js&#39;,&#39;ga&#39;);ga(&#39;create&#39;, { trackingId: &#39;&quot; + **environment.GAtrackingId** + &quot;&#39;, cookieDomain: &#39;auto&#39;, userId: &#39;&quot; + **userId** + &quot;&#39;});ga(&#39;send&#39;, &#39;pageview&#39;, &#39;/&#39;);&quot;;
    
            document.getElementsByTagName(&quot;head&quot;)[0].appendChild(s);
        }

 Create the service to implement the methods that you will need.

    import { Injectable } from &#39;@angular/core&#39;;
    import { environment } from &#39;../../../environments/environment&#39;;
    
    declare let ga: any;
    
    @Injectable()
    export class GAService {
        constructor() {
        }
        
        /**
         * Checks if the GA script was loaded.
         */
        private useGA() : boolean { 
            return environment.GAtrackingId &amp;&amp; typeof ga !== undefined;
        }
        
        /**
         * Sends the page view to GA.
         * @param  {string} page The path portion of a URL. This value should start with a slash (/) character.
         */
        sendPageView(
            page: string
        ) {
            if (!this.useGA()) return;
            if (!page.startsWith(&#39;/&#39;)) page = `/${page}`;      
            ga(&#39;send&#39;, &#39;pageview&#39;, page);
        }
    
    
        /**
         * Sends the event to GA.
         * @param  {string} eventCategory Typically the object that was interacted with (e.g. &#39;Video&#39;)
         * @param  {string} eventAction The type of interaction (e.g. &#39;play&#39;)
         */
        sendEvent(
            eventCategory: string,
            eventAction: string
        ) { 
            if (!this.useGA()) return;
            ga(&#39;send&#39;, &#39;event&#39;, eventCategory, eventAction);
        }
    }

Then I finally use the service injected in component.

    constructor(private ga: GAService) {}
    
    ngOnInit() { this.ga.sendPageView(&#39;/join&#39;); }

Angular 4+ using Google Analytics

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

How to import CSS modules in Typescript with Webpack?

1. Generate (or auto-generate) `.d.ts` files for CSS? And use classic Typescript `import` statement? With `./styles.css.d.ts`:

        import * as styles from &#39;./styles.css&#39;

2. Import using `require` Webpack function?

        let styles = require(&quot;./styles.css&quot;);

But for the last approach I must define the `require` function.

What is the best approach or best option and one that can also handle IntelliSense for the CSS file definitions and classes?

How to import CSS modules with Typescript, React and Webpack

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 don&#39;t quite get what the difference between Map and Record in Typescript is. 

The only comparison I found was 
&gt;A very useful built-in type introduced by Typescript 2.1 is Record: it allows you to create a typed map and is great for creating composite interfaces. 

https://levelup.gitconnected.com/advanced-typescript-types-with-examples-1d144e4eda9e, 

but typing Maps like this: 
```typescript
const testMap = new Map&lt;number, string&gt;();
```
also works, so I don&#39;t really understand the difference.

What&#39;s the difference between Map and Record

Even though I&#39;ve installed &amp; referenced the Typings library &#39;react&#39; like this

` /// &lt;reference path=&quot;../../../typings/browser.d.ts&quot; /&gt; `

I&#39;m still getting the error below:
[![enter image description here][1]][1]

Is there another Typings library I should be installing as well?


  [1]: http://i.stack.imgur.com/Rg3xf.png

error TS2602: JSX element implicitly has type &#39;any&#39; because the global type &#39;JSX.Element&#39; does not exist

With TypeScript 2.7.2, in VSCode version 1.21 with @types/express and the code that follows, in some cases VSCode throws errors stating that 
```
A namespace-style import cannot be called or constructed, and will cause a failure at runtime.
``` 

However on other machines with similar setups and similar `tsconfig.json` files the code just works. What is happening here...

    import { Bank } from &#39;./Bank&#39;;
    import * as Express from &#39;express&#39;;  &lt;== errors here..
    
    let app: Express.Express;
    this.app = Express();                &lt;== and here


Why is this happening? 

TIA, 

John.


A namespace-style import cannot be called or constructed, and will cause a failure at runtime

So far we are used to **tsd** or (The better version of it) **typings**

But now that TypeScript 2 offers the new `@types` feature, how should I convert my current project to work with @types?

I have tsd.json (typings.json is some cases) with all the dependencies, what are the steps to do the move to TypeScript 2?

What are the *new* best practices?
Does @types support specific versions?



How should I use @types with TypeScript 2

Is there a way to make a file in your typescript file that defines globally accessible types?

I like typescript but find that when i want to be truly type safe I have to explicitly import types from all over the system. It&#39;s rather annoying.

Global types in typescript

I&#39;m trying to provide typings for the package that does not have them:

    error TS7016: Could not find a declaration file for module &#39;inputmask-core&#39;. &#39;./node_modules/inputmask-core/lib/index.js&#39; implicitly has an &#39;any&#39; type.
    Try `npm install @types/inputmask-core` if it exists or add a new declaration (.d.ts) file containing `declare module &#39;inputmask-core&#39;;`

I&#39;m using ts-loader in webpack with typescript 2.4.2, and I have the following type roots set up in tsconfig.json:

    &quot;typeRoots&quot;: [
      &quot;./node_modules/@types&quot;,
      &quot;./src/client/types&quot;
    ]

I tried to mimic the package structure in `node_modules/@types`:

    src/client/types
    |--inputmask-core
      |--index.d.ts

With the following in `index.d.ts`:

    declare class InputMask {}
    export default InputMask;

But the error is still there. What am I doing wrong? Where should I place those custom .d.ts files?

And what is the difference between `node_modules/@types` and any other type root? Why does TypeScript treat them differently?

Where should I place custom .d.ts files?

I see &quot;DefinitelyTyped&quot; is something related to TypeScript/JavaScript development, but I couldn&#39;t understand its use or some code sample to understand about it.

I looked at 
http://definitelytyped.org/  and http://bartvds.github.io/projects/dt.html but couldn&#39;t understand it better.

Any pointers, article, Code sample is much appreciated.

What is &quot;DefinitelyTyped&quot;?

I was hoping to reuse certain values in enum.
Any suggestions of how to achieve such functionality.

    enum someEnum {
        a = &#39;Some String&#39;,
        b = 2,
    };

    enum extendedEnum {
        c = &#39;string&#39;,
        b = someEnum.b
    }

    type someEnumType&lt;T extends someEnum&gt; = T extends someEnum.a ? string :
        T extends someEnum.b ? number : never;

    type extendedEnumType&lt;T extends extendedEnum&gt; =
        T extends extendedEnum.c ? string:          // Gives Error
        T extends extendedEnum.b ? number : never;  // Gives Error

Extending Enum in typescript

I am new to Angular2 and I&#39;m enjoying it so far but there is one problem: **Typings**. I can&#39;t figure out how to use them and what exactly they are. Some places say to use typings, others say to use npm to install definitions. 

I&#39;m confused!! 

What are Typings in Typescript

I have a npm module called RiveScript that usually (in Javascript) gets instantiated that way:

    var RiveScript = require(&#39;rivescript&#39;);
    var rivescript = new RiveScript();

I&#39;m trying to write a declaration file for the module, but am stuck at the first step. Here&#39;s what I&#39;ve written so far:

    declare module &quot;rivescript&quot; {
    	
    	interface RivescriptOptions {
    		utf8?: boolean;
    	}
    	
    	class RiveScript {
    		constructor(options?: RivescriptOptions);
    	}
    	
    	export default RiveScript;
    }

Then I guess in Typescript I would be using the module this way (*default import*):

    import RiveScript from &#39;rivescript&#39;;
    let rivescript = new RiveScript();

However, `tsc` generates this, which is not valid as it references a `default()` function:

    const rivescript_1 = require(&#39;rivescript&#39;);
    let rivescript = new rivescript_1.default();

What am I doing wrong?

All Typescript Typings Solutions on Gang of Coders

Total of 32 Typescript Typings Solutions

How do I decide whether @types/* goes into `dependencies` or `devDependencies`?

Typescript input onchange event.target.value

Overriding interface property type defined in Typescript d.ts file

Import class in definition file (*d.ts)

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

TypeScript typings in npm @types org packages

Typescript: Type X is missing the following properties from type Y length, pop, push, concat, and 26 more. [2740]

Property 'X' is private and only accessible within class 'xyzComponent'

Having error "Module 'name' resolves to an untyped module at..." when writing custom TypeScript definition file

TypeScript 2: custom typings for untyped npm module

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

Types from both keys and values of object in Typescript

Typescript, how to pass "Object is possibly null" error?

Typescript: How to add type check for history object in React?

Usage of the TypeScript compiler argument 'skipLibCheck'

Define a list of optional keys for Typescript Record

TypeScript typings give me "index.d.ts is not a module"

Keyof inferring string | number when key is only a string

Angular 4+ using Google Analytics

Typescript 2.0. "types" field in tsconfig.json

How to import CSS modules with Typescript, React and Webpack

TypeScript character type?

What's the difference between Map and Record

error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist