Repository: angular
Issue: Type 'SafeHtml' is not assignable to type 'string'
Labels: type: bug/fix,freq2: medium,area: compiler,state: confirmed,cross-cutting: types,design complexity: major,P3,compiler: template type-checking

<!--🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅

Oh hi there! 😄

To expedite issue processing please search open and closed issues before submitting a new one.
Existing issues often contain information about workarounds, resolution, or progress updates.

🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅-->


# 🐞 bug report

### Affected Package
The issue is caused by package @angular/platform-browser


### Is this a regression?
This is kind of regression - please see description bellow.



### Description

I am getting **Typescript error** after switching to *Ivy compiler*:

```bash
[Step 4/5] src/app/app.component.html(1,26): Type 'SafeHtml' is not assignable to type 'string'.
```

In Angular class there is a member property declared as `SafeHtml`:

```typescript
@Component({
  selector: 'app',
  template: `<div [innerHTML]="description"></div>`
})
export class AppComponent {
  description: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}
  
  ngOnInit(): void {
    this.description = this.sanitizer.sanitize(SecurityContext.HTML, '<strong>whatever comes from server</strong>');
  }
}
```

My issue is how to convert `SafeHtml` and `SafeUrl` to string, so that strict template check does not emits an error - I would like to avoid calling `.toString()` on the `description` - it should work out of the box - at least it is my expectation.

Angular `SafeHtml` is declared as: 

```typescript
/**
 * Marker interface for a value that's safe to use as HTML.
 *
 * @publicApi
 */
export declare interface SafeHtml extends SafeValue {
}
```

And `innerHtml` defined in _lib.dom.d.ts_:

```typescript
interface InnerHTML {
    innerHTML: string;
}
```
The `innerHtml` is type of `string`, whereas I have `SafeHtml`.



## 🔬 Minimal Reproduction
How to reproduce:

```bash
git clone https://github.com/felikf/angular-repro-safe-html.git
npm i
npm run build
```



## 🔥 Exception or Error
<pre><code>
Type 'SafeHtml' is not assignable to type 'string'</code></pre>


## 🌍  Your Environment

**Angular Version:**
<pre><code>
Angular CLI: 8.3.4
Node: 12.11.1
OS: win32 x64
Angular: 8.2.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.4
@angular-devkit/build-angular      0.803.6
@angular-devkit/build-optimizer    0.803.6
@angular-devkit/build-webpack      0.803.6
@angular-devkit/core               8.3.4
@angular-devkit/schematics         8.3.4
@angular/cdk                       8.2.0
@angular/cli                       8.3.4
@angular/flex-layout               8.0.0-beta.27
@angular/material                  8.2.0
@angular/material-moment-adapter   8.2.0
@ngtools/webpack                   8.3.6
@schematics/angular                8.3.4
@schematics/update                 0.803.4
rxjs                               6.5.3
typescript                         3.5.3
webpack                            4.39.2

</code></pre>

**Anything else relevant?**
This happens during `npm run build`.

Also asked here: https://stackoverflow.com/questions/58265539/angular-ivy-type-check-type-safehtml-is-not-assignable-to-type-string