Worth noting that if you'd prefer to use interfaces over types (although they're largely similar) that you can typically use [**interface extension**][3] instead of [**type intersection**][2] like this:

```ts
// base type
interface Shape {
  color: string;
}

// extension
interface Square extends Shape {
  sideLength: number;
}

// intersection
type Square = Shape & {
  sideLength: number;
}
```

**See Also**: [Difference between extending and intersecting interfaces in TypeScript?][1]

[1]: https://stackoverflow.com/q/52681316/1366033
[2]: https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types
[3]: https://www.typescriptlang.org/docs/handbook/interfaces.html#extending-interfaces

I'm struggling to find the definition of the `&` operator in TypeScript. I have recently come across the following code:



    type IRecord<T> = T & TypedMap<T>;

What does that operator do, and how is it different from the union type `|`?

Typescript & operator

### Update for TS 3.5+

You can add this utility type to your project:

```ts
type Modify<T, R> = Omit<T, keyof R> & R;
```

And then use it like this:

```ts
type ISelectionGridOptions = Modify<IGridOptions, {
  isRowSelectable: (row: IGridRowOf<Profile>) => boolean;
}>
```

[**Demo in TS Playground**][3]

### Further Reading

* [Overriding interface property type defined in Typescript d.ts file][1]
* [How to override type properties in TypeScript][2]


[1]: https://stackoverflow.com/q/41285211/1366033
[2]: https://stackoverflow.com/q/43080547/1366033
[3]: https://www.typescriptlang.org/play?#code/C4TwDgpgBAsg9gEwJYDMQB4AqAaKAlAPigF4oB5AWyWC1wGsIQ4V8iAyfAbgFgAoPiADsArhSgBJAMYQAwgCcIAQzEBvPlA1QAaosFIANvsXZ1mmQAs4kuEeAQTvTVADKwOYoDuAIwhy5IPgBfPj5QSCgABV8AZzhBADE5OAoAGSQvd38SKDVHTRQkOWjgADllCAAuKGK5JEEAcx48jSNisopK6rc6xtMNFEUANzhauylZBWUqmp6m4P5eMOgZYWLkqKK47PhkNHQN2ISk1PTMkFxcpwHh0Yhx+SUKKvvJijmCEN5rQWKoChADnEqis1hRAYJspd8oU2uUqgByADSIH0EHhDicrVKcKg8Jg1HRfSg1xG1Du0geUwkFNeADodHpDIogp9vrFUbT9HB6gAKf7ggCUnCAA

This may not be possible due to current language limitations, but I'm using the latest TS (1.8.10) and am running into an issue with the ui-grid typings.  The `isRowSelectable` property on `IGridOptions` is defined as an optional boolean but the documentation says it's a function (and it is).  I am trying to override the boolean property to be a function that returns a boolean.

Normally, I just extend the typing interface and do what I need, but that's not working in this case.  Here's what I have:

    interface ISelectionGridOptions extends IGridOptions {
      isRowSelectable: (row: IGridRowOf<Profile>) => boolean;
    }

Where the relevant field in `IGridOptions` is:

    export interface IGridOptions {
      ...
      isRowSelectable?: boolean
      ...
    }

And the error I'm getting is:

    (41,11): error TS2430: Interface 'ISelectionGridOptions' incorrectly extends interface 'IGridOptionsOf<any>'.
      Types of property 'isRowSelectable' are incompatible.
        Type '(row: IGridRowOf<Profile>) => boolean' is not assignable to type 'boolean'.

Short of fixing the core typings definitions, is there a way to fix this in my code?

How do I override a property in typescript?

### Update for TS 2.4 - 2017+

[String Enums][1] are available starting in [TypeScript 2.4][2] using the following syntax:

```ts
enum Color {
    Red = "red",
    Green = "green",
    Blue = "blue"
}
```

[**Demo in TS Playground**][6]

### Further Reading

* [Create an enum with string values][7]
* [Typescript String Based Enums][5]
* [String Enums in TypeScript][3]
* [TypeScript string enums, and when and how to use them][4]

[1]: https://www.typescriptlang.org/docs/handbook/enums.html#string-enums
[2]: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html#string-enums
[3]: https://mariusschulz.com/blog/string-enums-in-typescript
[4]: https://blog.logrocket.com/typescript-string-enums-guide/
[5]: https://stackoverflow.com/q/39287818/1366033
[7]: https://stackoverflow.com/q/15490560/1366033
[6]: https://www.typescriptlang.org/play?#code/KYOwrgtgBAIglgJ2AYwC5wPYgMqoXEAcygG8BYAKCigBlgAzVKAXigCI7G2AaS6gJTiEAFk1ZtBI1G0oBfSpVCRYiFOiwBVAA5bgCUn1oMx7GgFEAYgBUehyaJbt+ASQDiACRu8K8iovDQ8EhomCDOIAAmwAAeBlRGjN4CQqLevv7KQWqhZtFaADZwyHCo4VGx5PGcJgCMSVD2qGlAA


I would like to have a set of string enums in typescript so I can do things like having the user select from a set of predefined options. 

I found a good solution in this answer: https://stackoverflow.com/questions/17380845/how-to-convert-string-to-enum-in-typescript

However, that only works for single words... (basically, the above allows you to get the enum name value -- and that can't have a space in it).

So, further looking, I found this person with a workaround: https://stackoverflow.com/questions/37839347/workaround-for-string-based-enums-in-typescript

That will allow something like this to work:


    export enum EventType {
        Photoshoot = <any>"Photoshoot",
    	BookingMeeting = <any>"Booking Meeting",
    	PostShootMeeting = <any>"Post Shoot Meeting",
    	Purchase = <any>"Purchase",
    	Print = <any>"Print"
    }

The only response basically says doing so is unsafe.  (but I should say, it DOES work -- I can type EventType.*dot* ... and Atom editor gives me the 5 camel-case options to select from (keeping things consistent in the code) I can then use that to have the string value spit out to give my users a good space-filled experience, in the future I can change the enum and for different languages/option wording without messing with the 'code' at all, etc...

Is there a better way to do this?  I'd rather not do it 'unsafely' -- but I don't know of any other way.

String enums in typescript

Yes you can - Just add `isBackground:true` to your task definition:

```
{
  // ...
  "isBackground": true
}
```

**Note**: If you don't care about parsing terminal output, you can ignore the warning about not having a `problemMatcher`.


According to this [section in the docs](https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson):

> ### Can a background task be used as a prelaunchTask in launch.json?
> 
> Yes. Since a background task will run until killed, a background task on its own has no signal that it has "completed". To use a background task as a `prelaunchTask`, you must add an appropriate background `problemMatcher` to the background task so that there is a way for the task system and debug system to know that the task "finished".
> 
> Your task could be:
> 
> ```json
> {
>   "type": "npm",
>   "script": "watch",
>   "problemMatcher": "$tsc-watch",
>   "isBackground": true
> }
> ```
> 
> **Note**: The `$tsc-watch` is a background problem matcher, as is required for a background task.
> 
> You can then use the task as a prelaunchTask in your launch.json file:
> 
> ```json
> {
>   "name": "Launch Extension",
>   "type": "extensionHost",
>   "request": "launch",
>   "runtimeExecutable": "${execPath}",
>   "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
>   "stopOnEntry": false,
>   "sourceMaps": true,
>   "outFiles": ["${workspaceRoot}/out/src/**/*.js"],
>   "preLaunchTask": "npm: watch"
> }
> ```
> 
> For more on background tasks, go to [Background / watching tasks.](https://code.visualstudio.com/docs/editor/tasks#_background-watching-tasks)


**See Also**: [How to make vscode not wait for finishing a preLaunchTask?](https://stackoverflow.com/q/44242048/1366033)

I'm using the [VS Code Debugger for Chrome][1] to debug my web app. In the `launch.json` where all the configurations are the task is defined like this

```json
{
    "name": "Debug App in Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:8080/",
    "webRoot": "${workspaceRoot}",
    "sourceMaps": true
}
```

That works fine. Opens the browser on the specific address and the debug tools work fine.

But I want before opening the browser to have a `preLaunchTask` that would build my project and create a server so when the browser is open there is an actual server on that address/port. So I added this line `"preLaunchTask": "server:dev"`. That task builds the project, starts a watch mode and creates the server. But when I added that task, the prelaunch task is executed successfully but the browser does not open at all.

I'm guessing that is because the `--watch` flag, actually keeps the task "alive" (and same maybe for the creation of the server) and the VS Code waits for the `preLaunchTask` to terminate completely before starting the main task?

My question is: Is there a way to tell VS Code that the prelaunch task actually does not terminate, so it should not wait for it to end completely before starting the main task? Or I'll not be able to do all this (building, watching, starting server and opening the browser) with only 1 button?

  [1]: http://%22server:dev%22:%20%22webpack-dev-server%20--config%20config/webpack.dev.js%20--progress%20--profile%20--watch%20--content-base%20src/%22,

Running preLaunchTask with watch mode in VS Code

Combining [Markus's answer][1] with [Use Enum as restricted key type in Typescript][2], you can use eithers of the following syntaxes to constrain object keys

Either `{ [key in RoleTypes]: string }` or `Record<RoleTypes, string>`

```ts
enum RoleTypes {
  None,
  Admin,
  SuperAdmin
}

let RoleTypesDisplay: Record<RoleTypes, string> = {
    [RoleTypes.None]: "None",
    [RoleTypes.Admin]: "Administrator",
    [RoleTypes.SuperAdmin]: "Super Admin",
};

var roleName = RoleTypesDisplay[RoleTypes.SuperAdmin];

console.log(roleName);
```

### [Demo in TS Playground][3]

[1]: https://stackoverflow.com/a/43962328/1366033
[2]: https://stackoverflow.com/q/44243060/1366033
[3]: https://www.typescriptlang.org/play?#code/KYOwrgtgBASg9gG2AFQJ4AdgGcoG8CwAUFFAHJwjAA0RJAggCYQCWINxUAymJgE6MsQRAL5EiSAC6xEKDNgAizLOgQBDVAEYAXHigBtANbBUUVtKRpMWALo6sE3qwDmowpPOyri5WtQAmHRhgAGM4XgYAHngLOSwqKHtHECcAPjE3YClozwUlFXVAkLDI7MtseMTnFKgAXjxaEn1S2IA6ckpbKAAiduAu9kammTKsFoFWTq7xkCUHVQkw-oaSPWarFu4+acnN4F4oaaXCYQBudIA3VX3eGVJVCGBajxHvfNRV4dbd-iYJs8JQiAsDIWgg4E4ABQ3JB3B4ASn+QA

I have a below `enum` in TypeScript:

```typescript
enum RoleTypes {
  None,
  Admin,
  SuperAdmin
}
```

When I run the following code:

```typescript
var roleName = RoleTypes[RoleTypes.SuperAdmin];
```

the value of the variable `roleName` is `SuperAdmin`. 

Is it possible to change it to a custom name `'Super Administrator'`, and how do I do this?


How can a enum member be aliased in TypeScript?

Here are some command line utilities that help with this


### TypeSync

> Install missing TypeScript typings for dependencies in your package.json

* [github](https://github.com/jeffijoe/typesync) - 988 ⭐
* [npm](https://www.npmjs.com/package/typesync) - 14k/wk

    ```bash
    # installation
    npm i -g typesync
    # usage
    npx typesync
    ```

### Typed-Install

> Easily install new packages and their types, every time.

* [github](https://github.com/xavdid/typed-install) - 87 ⭐
* [npm](https://www.npmjs.com/package/typed-install) - 1k/wk

    ```bash
    # installation
    npm i -g typed-install
    # usage
    typedi lodash
    ```

### TS-Typie

> A small utility for installing TypeScript definition files using npm
 
* [github](https://github.com/T-Specht/ts-typie) - 25⭐
* [npm](https://www.npmjs.com/package/ts-typie) - 0.3k/wk

    ```bash
    # installation
    npm i -g ts-typie
    # usage
    npx ts-typie
    ```

Is there a way to configure `npm` in such a way so that whenever I install a package, it will:

1. Check if it has type definitions inside it
2. If it does not, try to install `@types/PACKAGE` with the `--save-dev` flag

Ideally, I'd like this to happen automatically (as a plugin or something) without writing a shell script that will limit the API. For example, I might write a shell script such as: (note that this doesn't really answer all the requirements)

    #!/bin/bash
    npm install --save $1 && npm install --save-dev @types/$1

But this limits me because maybe I want to `--save-dev` both of the packages or want to use some special flags in the command. Also, it creates a dependency on bash which I'd like to avoid.

Alternatively, if there is a way to make a shellscript that won't be limiting in that way, that would be okay too.

Also, the above example doesn't actually check if the package has type definitions already (in which case I *don't* want to download any from `@types`).

Install type definitions automatically when I install an npm package

If you're using VS Code, there's a quick fix suggestion for this you can invoke with <kbd>`Ctrl`</kbd> + <kbd>`.`</kbd>

[![Install missing types][1]][1]

You can also [automatically add all missing types][2] with **`typesync`** like this:

```bash
npx typesync
```

If the package doesn't have it's own types, and it hasn't been added to [DefinitelyTyped][5], you'll need to [add a new definitions file][6]



### Further Reading

* [Could not find a declaration file for module 'module-name'][3]
* [Could not find a declaration file for module ''react-materialize'][4]

[1]: https://i.stack.imgur.com/L1JEq.png
[2]: https://stackoverflow.com/a/64656259/1366033
[3]: https://stackoverflow.com/q/41292559/1366033
[4]: https://stackoverflow.com/q/41462729/1366033
[5]: https://github.com/DefinitelyTyped/DefinitelyTyped
[6]: https://github.com/microsoft/TypeScript/issues/21344

I am totally new to ReactJS and I found myself stuck in the next thing.
I have installed react-cards via npm like this:

    npm install --save react-cards

Installation was ok and I want to import it in my code like this:

    import Card from 'react-cards';

But then I got error saying this:

> Could not find a declaration file for module 'react-cards':'path' implicitly has an 'any' type. Try 'npm install @types/react-cards' if it exists or add a new declaration(.d.ts) file containing 'declare module 'react-cards';'.

I have tried with npm install @types/react-cards but nothing changed.

I don't know what to do.


Typescript: Could not find a declaration file for module 'react-cards'

I suspect this is expected behavior, although I'd agree it's not super intuitive

According to the `tsconfig` docs on [Types > What does this affect?][1]

> This option does not affect how `@types/*` are included in your application code, for example if you had the above > `compilerOptions` example with code like:
> 
> ```ts
> import * as moment from "moment";
> moment().format("MMMM Do YYYY, h:mm:ss a");
> ```
> 
> The `moment` import would be fully typed.
> 
> When you have this option set, by not including a module in the types array it:
> 
> * Will not add globals to your project (e.g process in node, or expect in Jest)
> * Will not have exports appear as auto-import recommendations

[1]: https://www.typescriptlang.org/tsconfig#what-does-this-affect

## Current Setup

Here is my directory structure:

```bash
root
├──typings/           # currently empty
├──package.json
├──package-lock.json
├──tsconfig.json
└──main.ts
```


Here is my `tsconfig.json`:

```json
{
    "compilerOptions": {
        "typeRoots": [
            "./typings"
        ],
        "types": ["Phaser"]  
    }    
}
```

Here is my `main.ts` file:

```ts
let countdownNumber: Phaser.GameObjects.BitmapText;
```

Then I've run the following command in terminal:

```bash
tsc --traceResolution
```

I am trying to use `Phaser` as a global variable in my `main.ts` file.

### Expected behavior:

What should happen is `Phaser` shouldn't get resolved because compiler should start looking into my custom folder `typings`.  


### Actual behavior:

Somehow it still gets resolved. And this is what it prints: 

> Type reference directive 'Phaser' was successfully resolved to '/Applications/XAMPP/xamppfiles/htdocs/phasertest/node_modules/Phaser/types/phaser.d.ts' with Package ID 'phaser/types/phaser.d.ts@3.22.0', primary: false. 

I don't know how it finds it since in my `typeRoots`, I don't have `node_modules` specified. 

### What I have tried:

I tried to exclude `node_modules` folder, I thought maybe they still get compiled and that's why this happens, but I couldn't make `exclude` work with any of the following:

* `"exclude": ["node_modules/*"]`
* `"exclude": ["./node_modules/*"]`
* `"exclude": ["./node_modules"]`

but none of these worked. 

TypeScript config typeRoots and types not working properly

I was able to get it to work with the following launch configuration:

```json
{
    "name": "Run Mocha",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    "args": [
        "--no-timeouts",
        "--require",
        "ts-node/register",
        "${workspaceRoot}/src/**/*.spec.ts"
    ],
    "cwd": "${workspaceRoot}",
    "protocol": "inspector"
}
```

I also had to set `module` as `commonjs` in my `tsconfig.json`:

```json
{
  "compilerOptions": {
    "module": "commonjs",
  }
}
```

### Here's an [example repo][2] with all the files setup correctly

[![Debugging Example][1]][1]



**Further Reading**

* [Issue with mocha test debugging from typescript][3]
* [Running Mocha with TypeScript][4]

[1]: https://i.stack.imgur.com/9Cyrg.png
[2]: https://github.com/KyleMit/debug-mocha-typescript
[3]: https://stackoverflow.com/q/52357172/1366033
[4]: https://www.hossambarakat.net/2017/06/01/running-mocha-with-typescript/

I have started developing a Node/ExpreeJS project in TypeScript.
I should note that I am not running node directly. I am running node in a docker but I do not see any reason that this would be an issue.

I am using vscode as my editor and I am trying to configure a debug launch config for Mocha tests.

My launch configuration is

    {
        "type": "node",
        "request": "launch",
        "name": "SK - Mocha Tests",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "make",
        "runtimeArgs": [
            "test-brk"
        ],
        "port": 9321,
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen",
        "protocol": "inspector",
        "sourceMaps": true,
    }

The `make test-brk` command simply maps to a `docker exec` command that executes `npm run test-brk` within the container.

My package.json contains this script definition for `test-brk`

`"test-brk": "mocha --require source-map-support/register --require node_modules/ts-node/register --inspect-brk=0.0.0.0:9222 --debug-brk --exit test/**/*.spec.ts"`

Running the `SK - Mocha Tests` debug task from vscode launches Mocha and runs the tests as expected.
The inspect server is started and the vscode debugger successfully connects as can be seen in the output below.

    $  cd /home/andrew/workspace/service-kit/sk-base-nodejs ; /usr/bin/make test-brk 
    (docker exec node npm run test-brk)
    
    > sk-base-nodejs@0.0.1 test-brk /workspace
    > mocha --require source-map-support/register --require node_modules/ts-node/register --inspect-brk=0.0.0.0:9321 --debug-brk --exit test/**/*.spec.ts
    
    Debugger listening on ws://0.0.0.0:9321/d696c7a4-c4e1-4212-af85-ab1675856a7a
    For help, see: https://nodejs.org/en/docs/inspector
    Debugger attached.
    HTTP server listening on port 8080
    
    
      Hello World
        ✓ should return 200 and Hello World
    
    
      1 passing (34ms)
    
    Waiting for the debugger to disconnect...

However breakpoints are not being hit.
I have set in both the application TS source and the test TS source.
When the tests are running the breakpoints grey out and show

> Breakpoint ignored because generated code not found (source map problem?)

I understand that this is a source map issue between the source TS and the JS being executed for the tests.
As above I am using ts-node with Mocha there seems to be a problem because ts-node does not generate source map files for vscode to read.
This is described in [ts-node/issues/46][1] however there is no solution in that issue. It ultimately links to [vscode-chrome-debug-core/issues/533][2] which reports that it is fixed in a previous release of vscode.

There is also [vscode/issues/3144][3] which suggests transpiling the TS tests into JS and then executing the JS.. but this doesn't allow debugging the source TS.

I would greatly appreciate any input to point me in the right direction.


  [1]: https://github.com/TypeStrong/ts-node/issues/46
  [2]: https://github.com/microsoft/vscode-chrome-debug-core/issues/533
  [3]: https://github.com/microsoft/vscode/issues/3144

Vscode breakpoints for TypeScript Mocha tests

While `URLSearchParams` has lived on the [global object in node][1] since `v10.0.0`, it can be hard to pull ambient type information from there.

The `URLSearchParams` class lives in the [`url` module][2], so you can also import it directly from there:

```ts
import { URLSearchParams } from "url"
```

then use it like this:

```ts
let queryString = new URLSearchParams({page: "1", pagesize: "100"}).toString();
```

Also, make sure you install types for node

```bash
npm install @types/node --save-dev
```

### Further Reading

* [How to use global URLSearchParams in node][3]

[1]: https://nodejs.org/api/globals.html#globals_urlsearchparams
[2]: https://nodejs.org/api/url.html#url_class_urlsearchparams
[3]: https://stackoverflow.com/q/47266550/1366033

I have a Node.js project that is built with TypeScript I'm trying to use [`URLSearchParams`][1], however I can see the following error:

```
Cannot find name 'URLSearchParams'.ts(2304)
```

```
const params = new URLSearchParams();
params.append("foo", 5);
```
---
```
typescript: ^3.9.7
node.js: v12.16.3
```

  [1]: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

How to use URLSearchParams in a Node.js and TypeScript project

You can use a [**type predicate**][1] to define a user-defined type guard like this:

```ts
const isNonNullVin = (vehicle: IVehicle): vehicle is IVehicleNonNullVin =>{
    return vehicle.vin !== null
}

if (!isNonNullVin(myVehicle)) {
    throw new Error('null');
} else {
    needsVin(myVehicle);
}
```

> TypeScript will *narrow* that variable to that specific type if the original type is compatible.
    
[**Demo in TS Fiddle**][2]

[1]: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
[2]: https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgJIDUIAtgIDYoDeAsAFDIXIBuoAXMgM5hSgDmyAPsiAK554BuMpWQBbAPYATCHnpMWIVkNIBfMmVCRYiFBmy4CAOXEhDfPOlDIS5SjRBzmbZSInTZjJ4uVrSZBCZMYgCemDj4EPR64QTIALzWwnZ0yADkcABGCACMAEwAzKkANEkUbjL0qaKFZCrK-oFg3BAQkgyWIPHIABQA+lFhBhDGpuYdAJTxAHzI8HgMEPWkASBBwAwjZvwdXd1U+hEDBwTj9PsxKOtogxGbY1ZxUzYiUBBgPFCd50MAdPbIAEI4glePxaupSMAYD0Aes7ttQN1RKFjhBxpNnpQwFgoOIAO7NAkAUSguKg3VSoLwqXGPmQMgWiVsFBALTaHSRKIutNqQA

I have the following two interfaces, one which allows a nullable `vin`, the other that doesn't:

```ts
interface IVehicle {
    vin: string | null;
    model: string;
}

interface IVehicleNonNullVin {
    vin: string;
    model: string;
}
```

I want to able to convert a model from `IVehicle` to `IVehicleNonNullVin` in an execution path where I'm able to infer that `vin` is not `null`. 

Consider this example:

```ts
const myVehicle: IVehicle = {
    vin: 'abc123',
    model: 'm3'
};

const needsVin = (_: IVehicleNonNullVin) => false;

if (myVehicle.vin === null) {
    throw new Error('null');
} else {
    needsVin(myVehicle);
 // ~~~~~~~~~~~~~~~~~~~ 'IVehicle' is not assignable to 'IVehicleNonNullVin'
}
```

Which returns the following error:

> Argument of type 'IVehicle' is not assignable to parameter of type 'IVehicleNonNullVin'.  
> Types of property 'vin' are incompatible.  
> Type 'string | null' is not assignable to type 'string'.  
> Type 'null' is not assignable to type 'string'.

Even though I'm **positive** the property isn't nullable here.

**Q**: How can I convince TS that the existing model conforms to the type based on type checks in the code flow?

### [Demo in TS Playground][1]

---

### Workarounds

As a workaround, I can **cast the type** (but that ignores the existing type safety):

```ts
needsVin(myVehicle as IVehicleNonNullVin);
```

Or **build a new model** (but this doesn't scale well with lots of properties):

```ts
const nonNullVehicle: IVehicleNonNullVin = {
    model: myVehicle.model,
    vin: myVehicle.vin
}
needsVin(nonNullVehicle);
```




[1]: https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgJIDUIAtgIDYoDeAsAFDIXIBuoAXMgM5hSgDmyAPsiAK554BuMpWQBbAPYATCHnpMWIVkNIBfMmVCRYiFBmy4CAOXEhDfPOlDIS5SjRBzmbZSInTZjJ4uVrSZBCZMYgCemDj4EPR64QTIALzWwnZ0yADkcABGCACMAEwAzKkANEkUbjL0qaKFZCrK-oFg3BAQkgyWIPHIABQA+lFhBhDGpuYdAJTxAHzI8HgMEPWkwDA9oqH6EQB09vFxCbz8kzYiYFhQ4gDuzdcAolAXUN2ph3ip4z7IMguJthQgLTaHW660GEQ+tSAA

Convert interface with nullable string property to string property

You can extend the [default typescript lib][0] by adding your own object definition that takes in two generic type params.  

Add the following a `globals.d.ts` file at your project root:

```ts
interface ObjectConstructor {
    entries<TKey extends PropertyKey, TVal>(o: Record<TKey,TVal>): [TKey, TVal][];
    keys<TKey extends PropertyKey>(obj: Record<TKey,any>): TKey[];
}
```

And then use it like this:

```ts
const entries = Object.entries<ObjKeys, Boolean>(myObj) // [ObjKeys, Boolean][]
const keys = Object.keys<ObjKeys>(myObj) // ObjKeys[]
```

### [Demo in TS Playground][1]

[0]: https://github.com/microsoft/TypeScript/blob/v4.4.4/lib/lib.es2017.object.d.ts#L34-L44
[1]: https://www.typescriptlang.org/play?#code/C4TwDgpgBA8gRgKwNIRAZygXigcgGYD2BOUAPrnAIYBOJ5OAJhHpQK4A2wKIOAUPwEsAdsAjUWAY2jwEECcADCBIWmDVW8gtSgBvXlANQII6gIhoAPABVuRgB6ihDDKtNCA5gBooVgGqV2AD4ACgIALigAJTktBmtuTz8AwIBKCIBtG1RvJPYAXXS8gG5eAF9+CWVVKFBIBhk5YAjoyuo4mW40bwAhInYISiFArF19KEJwmvUITzGqagiWdjQZsaYWDi5UCLVWCDKKquAjEzMMbAb5ADpjNTOLDtQuqF6CfsGQ2oh6xEaUqAA9ACoOlHugen0BkICnlDipjngBNRVNwImDzic7uZ0gAGAp43hAA

Here's an example of my issue ([**demo in ts playground**][2])

```js
type Tkey = 'foo' | 'bar' | 'defaultKey'

const typedObject: Record<Tkey, Boolean> = {
  'foo': true,
  'bar': false,
  'defaultKey': true
}

// type does not persist string narrowing
const entries = Object.entries(typedObject) // [string, Boolean][]
```

So `key` in `[key, values]` is of type `string` and not of type `Tkey`.

[![demo of resulting type][1]][1]

As a *workaround* you can manually coerce after the fact, but it'd be nice to define the type during the operation.

```
const typedEntries = entries as [Tkey, Boolean][]
```

[1]: https://i.stack.imgur.com/BP3SG.png
[2]: https://www.typescriptlang.org/play?#code/C4TwDgpgBAKg1hEUC8UDkAzA9ltUA+6ARgIYBOehaAJhBiQK4A2wA0omgFCcDGWAdgGdgUUJGoB5IgCsIPYAC4oAJTlYy1ADzxEAGigAhHEwgl+APhRQA3pyjpsuJcDIMIuu8XJol9JoPdPGjpGFnYQH1FXCE4AX24+IREIfhcASwhBKylZeQA6FPTMgAoxCEkZOWAASigAejqoAG1hMjT+AHN9IywTMwBdJv7uBqgAWwZhcbMGEiYmJESANwgyEWAsKA6IEVpBDI1RcBjEqbLqAFFUtsyrQpuskiymnRBu41N+QeGgA

Preserve key type when using Object.entries()

I think this might be an instance of the TypeScript design limitation reported in [microsoft/TypeScript#41164](https://github.com/microsoft/TypeScript/issues/41164).  As [mentioned there](https://github.com/microsoft/TypeScript/issues/41164#issuecomment-712418462),

> Certain circularities are allowed [...] but other circularities aren't, e.g.
>
>     type Identity<T> = T;
>     type T3 = Identity<T3>;
>
> Generic instantiation is *deferred*, so at the point TS analyzes [a] declaration, it can't tell if it's in the `Record` case (would be allowed) or the `Identity` case (would not be allowed). It's only later in the process that we could tell that this is actually OK, but if it wasn't OK, it's "too late" to go back and start complaining about it.

If that's the issue, then while the following should be "okay", it seems that the compiler cannot tell early enough to allow it:

    // type IQuery = string | ["AND" | "OR", ...Array<IQuery>] error

(I changed your definition slightly to allow the `const query1 = "Hello"` line).

---

Luckily, `Array<T>` has an alternative built-in syntax `T[]` which does not seem to be deferred in that manner:

    type IQuery = string | ["AND" | "OR", ...IQuery[]] // okay
    
And this works:

    const query1: IQuery = "Hello"
    const query2: IQuery = ["AND", "Hello", "World"]
    const query3: IQuery = ["OR", ["AND", "Hello", "World"], ["AND", "Hola", "Mundo"]]
    const query4: IQuery = ["AND", ["OR", ["AND"]]]; 

    const badQuery1: IQuery = 3; // error
    // Type 'number' is not assignable to type 'IQuery'
    const badQuery2: IQuery = ["AND", "Hello", 123]; // error
    // Type 'number' is not assignable to type 'IQuery'
    const badQuery3: IQuery = 
      ["OR", query1, query2, "then", query3, query4, "if", []]; // error
    // Type '[]' is not assignable to type 'IQuery'.

[Playground link to code](https://www.typescriptlang.org/play?#code/PTAEBcE8AcFNQJIEUCusBOlQF5QGdx0BLAOwHNQAfUAbQCIBBAOQBE6rQ6B5AJToBpQAOhEN06AIaQAPMjSYAfAF1QGdAHt0AKChxEqDFlwFi5DvWZsO3PoJFC5hmkpUhQ6gNZStWgMbqSAlAAR3lIAEYALn0wnE4ACVgAGyT1Oj8AoNDDACZox0w4i1YBBOTU0roAdU0kgBM6JQzA8BCwgGZ8g0Lcel5S4rZBOkSUtOGa9HrGwUHK+PUkiUqAWRQSOrSXZqywgBYu2N7GEtmbAZO2FyUAblA3cAALIjxQF-cvLHB1dVAffxaoAARhI6t0IodDHF2nc3GpNFo3AAVGDwADkJBQAFsgRg0W9XiR1K0JHg8EQyCQJECkvBvhBUaA0QVIGidq0QWCwnkYlDjpZ5uVxqBwjl2rd7mB4dpkYyMdjceh8e8iSSyRSqTS6b9dOiWWyAUFOeDOryerRzoJsphwlbucMnrASKVrZB2nbDHthkQAGYDFywqXiBGyvRo5zKwnE0Ck8mU6m0iA6uX6oRaIA)
    



I have an array of query elements, where each element can be a term or a subquery containing  starting with either "AND" or "OR", and followed by an array of legal query elements, terms or nested subqueries, and so on.

For example, these should all be legal input:

```js
const query1 = "Hello"
const query2 = ["AND", "Hello", "World"]
const query3 = ["OR", ["AND", "Hello", "World"], ["AND", "Hola", "Mundo"]]
```

[**Variadric Tuples**][1] in **TS 4.0** should allow you to type the first element of an array and another type for the rest:

```ts
type IQuery = ["AND" | "OR", ...Array<string>]
const query = ["AND", "Hello", "World"]  // valid
```

[**Recursive Types**][2] in **TS 3.7** should allow you to define an type that uses itself:

```ts
type IQueryOps = string | Array<IQueryOps>
const query: IQueryOps = ["Hello", "World", ["Hola", "Mundo"]]  // valid
```

But I can't seem to combine the two when the circular type is spread. In this case, each query begins with an operator, and is followed up by either a string or another valid query like this:

```ts
type IOperator = "AND" | "OR"
type IQuery = [IOperator, ...Array<string | IQuery>]
```

In this case, I get the error:

> Type alias 'IQuery' circularly references itself.(2456)

Is there anyway to type this, even with workarounds, or do I have to unwrap it to the desired level of depth I'd like to support from a types perspective?

### [Demo in TS Playground][3]

### Further Reading

* [Define a type for an array where the first element is more specific than the rest][4]
* [How to create a circularly referenced type in TypeScript?][5]

[1]: https://devblogs.microsoft.com/typescript/announcing-typescript-4-0-beta/#variadic-tuple-types
[2]: https://github.com/microsoft/TypeScript/pull/33050
[3]: https://www.typescriptlang.org/play?#code/FAFwngDgpgBAkgRQK5QE5gGoENUEssAmeAxjALwwDaARAIIByAItTAD4zUDyAStQDQwAdMNqpUWMAB4AziDwA7AOYA+ALrBiAe3myYARxTpseQiQBc8ZGkw58RXKQo0GzAdQASUADZfN-DgDqmqheBNTqoJCwiIZg3FDESKjSuABusBSyCopsMKLiUjHW8YnJaVDKGtq6BsUJSSnpFkXoJQ3l5FQe3r7+1EEhYQI07ppeWH0AskjyBH6qEZHQ8JzQ4iDBnXRMLOxcvEvRVuidlHCraFgbqALCgvkSMnK4SrktYGrAAPRfMAAqURgWC8+GkMAA5O9wTBiLhUIlxiEwDBUFAAGZoKDyYhQMG4EDSbxowQACgATAAWACsADYAJTAKo6ED6WIWLIvHLsd6nfb+Zw7NyeHx+NwDULhYbbVwcUbjKYzObhVRAA
[4]: https://stackoverflow.com/q/44402096/1366033
[5]: https://stackoverflow.com/q/36966444/1366033

How to Type a Recursive Variadic Tuple

This is generally done through an identity function. This will allow you to constrain your inputs while still using their specific types like this ([demo in ts playground][1]):

```ts
function defineSites<T extends Record<string, ISiteDetails>>(template: T) {
    return template;
}

const sites = defineSites({
    stackoverflow: {url: 'https://stackoverflow.com/'},
    google: {url: 'https://www.google.com/'},
    azure: {url: 'https://portal.azure.com/'}
})
```
I have a little one-liner that I import sometimes. It's **higher order identity**.

```ts
export const HOI = <Constraint> () => <T extends Constraint> (definition: T) => definition;

export const defineSites = HOI<Record<string, ISiteDetails>>();
// use as normal
```
You may wish to write this as a function if you need it in a `.tsx` file
```ts
export function HOI<Constraint>() { 
    return () => <T extends Constraint> (definition: T) => definition;
}
```

[1]: https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABAEwKbBmVBlGVUDOAPACqKoAe+YyBiASqhHAE7JEFQuYDmANIgCSufABFUUAIYwANgQB88gBT4AtgAcZk-AC5EJAJSIA3gChEFxCwkgWSNZu2oA3KYC+p05nwtgkiKhCIqjiUrJ0ZpaItjJ6nNxgPK4epsxgnIgEeISIALwo6Jg42QRKkZac-gDWcABuqL4ycADuesYxegDkABZQUOoEOgD0Q5UQNfWNLQB0zKpDnW585pY8cHA8MqhtHYg9fQPDQ80n02sbW7Nw84vLUZIAXrbbJrv7-YMj6qxSMtOPzyuNw8bgMnigAE91IFggA5SSqHL5KqoCFwYCISHQ9GZErORAjRAAIjGEwawCazSJiAAPsTzptUNS6USAdYiZ5CQRunAQDJkIhmqwqqkEBl8JxggBxdbIPRwhFIvakurkymdTlDTI8vkCvyyUXpKCYwhQYIAIUkcsQCsRdHynUoCM0qE6QA

I have an object like this ([demo in ts playground][1]):

```js
const sites = {
    stack: {url: 'https://stackoverflow.com/'},
    google: {url: 'https://www.google.com/'},
    azure: {url: 'https://portal.azure.com/'}
} as const
```

What I'd like to do is create a union type with all the keys that were used, which I can do like this:

```js
type SiteNames = keyof typeof sites; // "stack" | "google" | "azure"
```

However, I'd also like to add type saftey to the `sites` intialization where all of the object values are of a certain type like this ([demo in ts playground][2]):

```js
interface ISiteDetails {
    url: string;
}

const sites: Record<string, ISiteDetails> = {
    stackoverflow: {url: 'https://stackoverflow.com/'},
    google: {url: 'https://www.google.com/'},
    azure: {url: 'https://portal.azure.com/'}
} as const
```

This provides some type checking when creating `sites`, but also removes the [**const assertion**][4] from the final type, so now SiteNames just resolves to a string:

```js
type SiteNames = keyof typeof sites; // string
```

**Question**: Is there any way to have both?  Strong typing when creating a `Record<any, ISiteDetails` but also the ability to extract all the object keys into a new union type?

**Workaround**: not as ergonomic, but I could add a final layer of type checking by reassigning site to an exported variable like this ([demo in ts playground][3]):

```js
const SitesTyped: Record<SiteNames, ISiteDetails> = sites;
```

[1]: https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgJIGViQCITHYAGwGdkBvAKGWuQFcpCAuZYsKUAcwG4KBfCiggD2IViywRSAXnJUarRAGshAN2gxCQgO7My9JsgDkACzBgADsUYB6awoTK1sTVoB0wgLbXDvADRzqDiEhDkIIXX1mEzNLG2stBNcgkLD3IS8ffxpkOAAvenDySKNTCytbcyEofEJXPIK0jP5eHNJhUTABCjAAT3MUTEgAOTgPSWQZRQgeoRhkXv7Z8UhiLmRbZAAie0d1F03kAB8t5NCIA+PN+qhzgQ3iYyFaQgATZC0qxUERMRWwQYgAHFgi9mACRmNpEYdqo9tpDHdrCxHs83vAiN8OvNJP8JAAhOCg5Dg0bjGSGCAAD1G5jChiAA
[2]: https://www.typescriptlang.org/play?ssl=12&ssc=47&pln=13&pc=1#code/JYOwLgpgTgZghgYwgAgJIGViQCITHYAGwGdkBvAKGWuQFcpCAuZYsKUAcwG4KBfCiggD2IViywRizAEoRhUACYAeVuxAcANGkw48BEgD5kAXnJUarRAGshAN2gxCQgO7My9JsgDkACzBgABykAemDLBBt7WCdnADphAFtgr14Nc2oOISEOQgg3D2ZffyDGUOdy2Mzs3PihJJS0mmQ4AC96PPIC7z9AkOCAoSh8QljW9tr6-l5m0mFRMAEKMABPAJQdCAA5OATJE2QrCGWhGGQVtZPxSGIuZFCWNk4Be+IfIVpCBWRnQatBETE1zAGwA4lkFMwNttdqRTF5wpEHDEvM9giw3h8vvAiP95mdJMCJAAhOAQ5BQnZ7OEQAAeOwCuS8QA
[3]: https://www.typescriptlang.org/play?ssl=13&ssc=59&pln=13&pc=1#code/JYOwLgpgTgZghgYwgAgJIGViQCITHYAGwGdkBvAKGWuQFcpCAuZYsKUAcwG4KBfCiggD2IViywRSAXnJUarRAGshAN2gxCQgO7My9JsgDkACzBgADsUYB6awoTK1sTVoB0wgLbXDvADRzqDiEhDkIIXX1mEzNLG2stBNcgkLD3IS8ffxpkOAAvenDySKNTCytbcyEofEJXPIK0jP5eHNJhUTABCjAAT3MUTEgAOTgPSWQZRQgeoRhkXv7Z8UhiLmRbZAAie0d1F03kAB8t5NCIA+PN+qhzwRExQckAFT6IABNmACUIYSg3gB5HiMxsRfGhHrh8ERiAA+CbLSQ8CgbYjGIS0QhvZBaKqKO4deaSMCPADiwQ+yCBo3GMkMO1Ue20hgEKLRGKx8CI+LEK2JEgAQnAKVSQfDDBAAB6jcxhQxAA
[4]: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions

Generate union type of all keys from an object with const assertion

First of all, this function:
```typescript
const fetchData = <T,>(): T[] => {
    const arr: T[] = []
    arr.push(2) // error
    arr.push('str') // error

    return arr
}

```
is hard to use.

Since non of your arguments are not related to `T`, TS will not allow you to `push` any value to the `arr`. Of course, you can use type assertion `as`, but it is very unsafe:
```typescript
const fetchData = <T,>(): T[] => {
    const arr: T[] = []
    arr.push('str' as any as T) // error

    return arr
}

const emptyStringArray = fetchData<number>(); // number[]
emptyStringArray[0].toExponential() // runtime error
```
Related [question/answer][1], [my article][2]

The answer is easy and simple: it is impossible in this case to separate `T` from function definition without workarounds. 

Here you have simplest way:
```typescript
const fetchData = <T,>() => {
  const arr: T[] = []
  return arr
}
```
However, if you want to mutate your array inside `fetchData`,  this function signature is not useful. This function is not allowed to do anything with `arr`. All you can do is to return `arr` without any mutations.

In order to mutate this list, you need create higher order function and during calling `fetchData` provide explicit generic argument:
```typescript
type FetchData = <T>() => T[]
const fetchData: FetchData = () => []

const higherOrder = <T,>(elem: T) => {
  const arr = fetchData<T>();
  arr.push(elem)

  return arr
}



const test = higherOrder('str'); // ok, string[]
const test2 = higherOrder(42); // ok, number[]

```
 [Playground][3]


  [1]: https://stackoverflow.com/questions/69187022/why-cant-the-generic-interface-in-ts-infer-the-type-correctly/69188596#69188596
  [2]: https://catchts.com/infer-arguments#generic_constraints
  [3]: https://tsplay.dev/N7K24N

I can define and use a generic function like this:

```ts
const fetchData = <T>(): T[] => {
  const arr: T[] = []
  // if stuff push to arr
  return arr
}

const emptyStringArray = fetchData<string>();
```

However, in my actual scenario, I have a lot of params and would like to separate out the typings and function assignment.

I've attempted to write like this:

```ts
type IFetchData = <T>() => T[]

const fetchData2: IFetchData = () => {
  const arr: T[] = []
  // if stuff push to arr
  return arr
}

const emptyStringArray = fetchData2<string>();
```

However, now the function definition doesn't recognize the `T` as an available type.

> Cannot find name 'T'.

I've tried a lot of different configurations on where to put the `<T>`, but nothing seems to work - any ideas?

### [Demo in TS Playground][5]

---

### Related Questions

* [How to create a generic type alias for a generic function?][1]
* [Generic function type alias][2]
* [Function with Generic Return Type][3]
* [Type of generic function][4]

[1]: https://stackoverflow.com/q/62720954/1366033
[2]: https://stackoverflow.com/q/58770087/1366033
[3]: https://stackoverflow.com/q/60178347/1366033
[4]: https://stackoverflow.com/q/48425137/1366033 

[5]: https://www.typescriptlang.org/play?jsx=0#code/LAKAxg9gdgzgLgAgGYFM5gBYBECGccIC8CAPACoB8AFAJQBcCZA2gLpEUIDeoCCksiHACchDZm2KseCAPQyEASyQJ4AVyTKADqpgYEcCAmFDpQtKqFQjI0AF9Q-eAhQBbTXACeAZThCFUAHMAQREcDwBGImQ0TFx8Eng-QOoaAG5QDJBPTRQEAEkAMRjsPAJichT2RilwaCdUdBL8ACYGQuK4soRaKu4QXkdBETFWKJreOUVlNQ0EbV19Q2NTc0trExB7EAc6xFd3b19-YNCPZqiG2NLmhKPk2nTtkCA

Define generic function type and apply to function assignment

My suggestion is to use an http library that supports both promises and gzip built in.  My current favorite is [`got()`][1].   `http.get()` is like the least featured http request library anywhere. You really don't have to write all this yourself.  Here's what your entire code would look like with the got() library:

    const got = require('got');
    
    function getRequest(url) {
        return got(url).json();
    }

This library handles all these things you need for you automatically:

1. Promises
2. JSON conversion
3. Gzip decoding
4. 2xx status detection (other status codes like 404 are turned into a promise rejection which your code does not do).

And, it has many, many other useful features for other general use.  The days of coding manually with `http.get()` should be long over.  No need to rewrite code that has already been written and well-tested for you.

FYI, there's a list of very capable http libraries here: https://github.com/request/request/issues/3143.  You can pick the one that has the API you like the best.

  [1]: https://www.npmjs.com/package/got


### Problem

Related to [Get UTF-8 html content with Node's http.get][1] - but that answer isn't working for me.

I'm trying to call the [Stack Overflow API questions][2] endpoint:

```none
https://api.stackexchange.com/2.3/questions?site=stackoverflow&filter=total
```

Which should return the following JSON response:

```json
{"total":21951385}
```

### Example Code

I'm using the [`https`][3] node module to submit a [`get`][4] request like this:

```ts
const getRequest = (url: string) => new Promise((resolve, reject) => {
    const options: RequestOptions = {
        headers: {
            'Accept': 'text/*',
            'Accept-Encoding':'identity',
            'Accept-Charset' : 'utf8',
        }
    }

    const req = get(url, options, (res) => {
        res.setEncoding('utf8');
        let responseBody = '';
        res.on('data', (chunk) => responseBody += chunk);
        res.on('end', () => resolve(responseBody));
    });

    req.on('error', (err) => reject(err));
    req.end();
})
```

And then invoking it like this:

```ts
const questionsUrl = 'https://api.stackexchange.com/2.3/questions?&site=stackoverflow&filter=total'
const resp = await getRequest(questionsUrl)
console.log(resp)
```

However, I get the response:

```none
▼�
�V*�/I�Q�22�454�0�♣��♥‼���↕
```

### What I've Tried

I've tried doing several variations of the following:

* I'm calling [`setEncoding`][5] to `utf8` on the stream
* I've set the [`Accept`][6] header to `text/*` - which

  > Provides a text MIME type, but without a subtype

* I've set the [`Accept-Encoding`][7] header to `identity` -  which

  > Indicates the identity function (that is, without modification or compression)

This code also works just fine with pretty much any other API server, for example using the following url:

```none
https://jsonplaceholder.typicode.com/todos/1
```

But the StackOverlow API works anywhere else I've tried it, so there must be a way to instruct node how to execute it.


  [1]: https://stackoverflow.com/q/27998950/1366033
  [2]: https://api.stackexchange.com/docs/questions#order=desc&sort=activity&filter=total&site=stackoverflow&run=true
  [3]: https://nodejs.org/api/https.html
  [4]: https://nodejs.org/api/https.html#httpsgeturl-options-callback
  [5]: https://nodejs.org/api/stream.html#readablesetencodingencoding
  [6]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept
  [7]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Encoding
