Assuming the question is about navInfo being a part of component bindings declaration and you want to...
<nav-bar navInfo="vm.navInfo"></nav-bar>
in the view
and have "vm.navInfo" checked against INavInfo.
The answer is no.
Since you will be instantiating your component within an HTML view,
and currently there is no tool that supports
type-checking TypeScript in HTML markup.
Angular also does not provide type binding characteristics, only the 'key' for binding and its behavior,
as it is an Angular convention rather than a language feature.
Even if you create your component with
inline HTML code all in one file
within Webstorm, which is very Angular 1.x friendly,
You could consider adding run-time checking (although it may not be advisable).
import * as angular from "angular";
export interface INavInfo {
text: string;
icon: string;
OnClick: Function;
}
function isNavInfo(x: any): x is INavInfo {
return x && typeof x.text === "string"
&& typeof x.icon === "string"
&& typeof x.OnClick === "function";
}
class NavBar implements angular.IController {
navInfo?: INavInfo;
$onInit = () => {
};
$onChanges? = (onChangesObj: angular.IOnChangesObject) => {
if (this.navInfo && !isNavInfo(this.navInfo)) {
throw "Nav Info is Not NavInfo";
}
};
clicked = ()=> {
if(this.navInfo && this.navInfo.OnClick){
this.navInfo.OnClick();
}
}
}
class OtherController {
navInfo: INavInfo ;
constructor(){
this.navInfo = {
text: "Hello",
icon: "home",
OnClick: ()=>{
console.log("link clicked!")
}
};
}
}
angular.module('NavBarTest', [])
.component(
'navBar', {
template: `<!-- there's No Type Checking here -->
<ul>
<li>
<a class="navText" href="" ng-click="$ctrl.clicked">
{{$ctrl.navInfo.text}}
<i class="naIvIcon">{{$ctrl.navInfo.icon}}</i>
</a>
</li>
</ul>>`,
bindings: {
navInfo: '<'
},
controller: NavBar,
// controllerAs: '$ctrl'
}
)
.component("navBarUser", {
template: ` <!-- there's No Type Checking here -->
<nav-bar nav-info="$ctrl.navInfo" ></nav-bar>
`,
controller: OtherController,
// controllerAs: '$ctrl'
});