What is the difference between angle brackets and "as'' in Typescript 2? [duplicate]

Question

What is the difference between using as or <> in the code below?

Option A - use 'as' for the return value

convertResultToParams(columnView:IColumnViewResult):IColumnViewParams {
    const params = {};

    Object.keys(this.getDefaultParams())
        .map(key => params[key] = columnView[key]);

    return params as IColumnViewParams;
}

Option B - use 'brackets' for the return value

convertResultToParams(columnView:IColumnViewResult):IColumnViewParams {
    const params = {};

    Object.keys(this.getDefaultParams())
        .map(key => params[key] = columnView[key]);

    return <IColumnViewParams>params;
}

And why can't I just declare the type in the variable declaration?

Answer 1

Your interface probably has members that are required, so initializing to {} is not valid. You can cast {} to the interface type if you are initializing it then, and will add the fields shortly.

const params = {} as IColumnViewParams

Initially Typescript used <> for casting, but with the addition of jsx support this became a problem so the as casting operator was added. There is not difference in the casting, just the context where you can use them. as can be used anywhere, <> cannot be used in tsx