Why angular Component defined interface?

I'm learning about decorator in typescript.

In that book, decorator is a simple function implementation, and decorator can get only one parameter.

Right below.

function logger(arg:string){
    //decorator todo    
}

@logger("test")
class TestClass {}

In fact, this structure was seen in Angular too.

So I went to the definition of the most used "Component" in Angular.

But the definition of Component is interface.

Right Below is defined "Component" in Angular

directive.d.ts
//also Directive is interface too
export interface Component extends Directive {
    changeDetection?: ChangeDetectionStrategy;
    ....
}

Of course, it inherits several other interfaces, but the conclusion is that the definition of Component is interface.

I have used the same example in typescript without using Angular for testing.

interface Component{
    templateUrl?: string;
    template?: string;
    styleUrls?: string[];
}

function logger(name:string){
    return function(target:Function){
        return console.log(`class Name: ${name}`);
    }
}

//@logger("BOOK")
@Component({
    selector: 'bap-select-cscV2',
    templateUrl: './csc-v2.component.html',
    styleUrls: ['./csc-v2.component.css']
  })
class BOOK{
    constructor(private title: string){}
};

I have two questions here.

First, when I build that script into ng-node using @logger without using @Component, "Class Name: Book" is logged.

I understand that Decorator is metadata. I did not even create a class, but I do not know why the logger works.

Secondly, I dont know why interface(named Component) does not behave like an angular.

Error is : Component only refers to a type, but is being used as a value here.