Type 'string' is not assignable to type 'PostCard Layout' when I am trying to as-CodePudding

I'm getting the error

Type 'string' is not assignable to type 'PostCard Layout'

I have a parent component called page-blog.component.html that I am setting the class styles in, and passing them to the child component called post-card.component.ts

In my parent HTML component when I try to set the class styling variables from the class component is when it errors out for me. Happening with the @Input() layout: PostCardLayout; section.

I found what I would feel as a dirty fix but will prob allow me to make more mistakes in the future by going into to the tsconfig.json file and setting "strictInputTypes": false,

Child class post-card.component.ts

import { Component, HostBinding, Input } from '@angular/core';

 export type PostCardLayout = 'list' | 'grid' | 'grid-sm';

 @Component({
  selector: 'app-post-card',
   templateUrl: './post-card.component.html',
  styleUrls: ['./post-card.component.scss']
 })
export class PostCardComponent {

@Input() post;

@Input() layout: PostCardLayout;

@HostBinding('class.post-card') classPostCard = true;

@HostBinding('class.post-card--layout--list') get classPostCardLayoutList(): boolean {
  return this.layout === 'list';
}

@HostBinding('class.post-card--layout--grid') get classPostCardLayoutGrid(): boolean {
  return this.layout === 'grid';
}

@HostBinding('class.post-card--layout--grid-sm') get classPostCardLayoutGridSm(): boolean {
  return this.layout === 'grid-sm';
}

constructor() { }
}

Here is the parent HTML component page-blog.component.html

                    <div >
                        <div *ngFor="let post of posts" >
                            <app-post-card
                                [post]="post"
                                [layout]="{
                                    classic: 'grid',
                                    list: 'list',
                                    grid: 'grid-sm'
                                }"
                            ></app-post-card>
                        </div>
                    </div>

CodePudding user response：

You have typed your PostCardLayout to accept one of three values:

'list' | 'grid' | 'grid-sm'

You are attempting to pass a JSON object:

[layout]="{
          classic: 'grid',
          list: 'list',
          grid: 'grid-sm'
      }[layout]"

There also appears to be a typo in that there is an extra [layout] at the end of your input.

I'm guessing between the typo and turning off the strictIputTypes your JSON is getting morphed into a string.

using "strictInputTypes": false is a terrible idea as this defeats one of the basic purposes of TypeScript.

From what I can tell from your code you want to simply assign one of the three pre-defined values:

<app-post-card
      [post]="post"
      [layout]="grid',
          list: 'list',
          grid: 'grid-sm'
      }[layout]">
</app-post-card>