this.extendedPrice = ko.computed(function () {
        return this.product()
             ? this.product().salesPrice() * 0.8 + parseFloat(this.product().salesPrice())
             : 0;
        },

this.extendedPrice = ko.computed({
        read: function () {
            return this.product()
                 ? this.product().salesPrice() * 0.8 + parseFloat(this.product().salesPrice())
                 : 0;
        },
        owner: this,
     });

<input data-bind="visible:product, value:extendedPrice"/>

<input data-bind="visible:product, value:extendedPrice()"/>

this.extendedPrice = <KnockoutComputed<number>>ko.computed({
            read: function () {
                return this.product()
                     ? this.product().salesPrice() * 0.8 + parseFloat(this.product().salesPrice())
                     : 0;
            },

            write: function (value: string) {
                var num = parseFloat(value.replace(/[^.d]/g,""));
                num = isNaN(num) ? 0 : num;
                var unitPrice = num / this.quantity();
                this.product().salesPrice(unitPrice);
            },

            owner: this,
        });

///<reference path="data.ts" />
///<reference path="../typedefinitions/jquery.d.ts" />
///<reference path="../typedefinitions/knockout.d.ts" />

        module guitarsalesportalmodule {
    export class Mod {
        constructor(public Name: string, public Id: number) { }
    }

    export class Cat {
        constructor(public Name: string, public Id: number) { }
    }

    export class Product {
        salesPrice: KnockoutObservable<number>;

        constructor(public modelId: number, sp: number, public listPrice: number, public rating: number, public photo: string, public description: string, public model: Mod, public category: Cat) {
            this.salesPrice = ko.observable(sp);
        }
    }

    export class LineItem {
        product: KnockoutObservable<Product>;
        quantity: KnockoutObservable<number>;
        extendedPrice: KnockoutComputed<number>;

        constructor(product: Product, quantity: number) {
            this.product = ko.observable(product);
            this.quantity = ko.observable(quantity);
            this.extendedPrice = <KnockoutComputed<number>>ko.computed({
                read: ()=>{
                    return this.product()
                        ? this.product().salesPrice() * 0.8 + parseFloat(this.product().salesPrice().toString())/*Just leaving it as this.product().salesPrice() results in it being considered string and getting concatenated. Doing parseFloat(this.product().salesPrice().toString()) instead of parseFloat(this.product().salesPrice()) strangely doesn't work either saying it's not a string but a number(doesn't happen when I use function instead of ()=>).*/
                        : 0;
                },

                write: (value: string) => {
                    var num = parseFloat(value.replace(/[^.d]/g,""));
                    num = isNaN(num) ? 0 : num;
                    var unitPrice = num / this.quantity();
                    this.product().salesPrice(unitPrice);
                },

                owner: this,
            });
        }
    }

    export class Vm {
        products: KnockoutObservableArray<Product>;
        lines: KnockoutObservableArray<LineItem>;
        grandTotal: KnockoutComputed<number>;

        constructor() {
            this.loadProducts();
            this.lines = ko.observableArray([new LineItem(undefined, undefined)]);
            this.grandTotal = ko.computed(
                () => {
                    var total = 0;
                    this.lines().forEach((line) => {
                        if (line.extendedPrice() && line.quantity()) {
                            total += line.extendedPrice() * line.quantity();
                        }
                    });
                    return total;
                },
                this);
        }

        loadProducts() {
            this.products = ko.observableArray([]);
            $.each(data.Products, (i) => {
                this.products.push(new Product(
                    data.Products[i].ModelId,
                    data.Products[i].SalePrice,
                    data.Products[i].ListPrice,
                    data.Products[i].Rating,
                    data.Products[i].Photo,
                    data.Products[i].Description,
                    data.Products[i].Model,
                    data.Products[i].Category));
            });
        }

        addLineItem = () => {
            this.lines.push(new LineItem(undefined, undefined));
        }

        removeLineItem = (line) => {
            this.lines.remove(line);
        }

        formatCurrency(curr: string) {
            return "$" + parseFloat(curr).toFixed(2);
        }
    }

    export var viewModel = new Vm();
}

//apply bindings
window.onload = () => {
    ko.applyBindings(guitarsalesportalmodule.viewModel);
};

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../css/fonts.css" rel="stylesheet" />
    <link href="../css/styles.css" rel="stylesheet" />
    <script src="../scripts/jquery-2.1.0.js"></script>
    <script src="../scripts/knockout-3.1.0.js"></script>
    <script src="../scripts/data.js"></script>
    <script src="../scripts/guitarsalesportal.js"></script>
</head>
<body>
    <div class="showroom">
        <table>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Extended Price</th>
                <th>Remove</th>
            </tr>
            <tbody data-bind="foreach: lines">
                <tr>
                    <td>
                        <select data-bind="options:$parent.products, value:product, optionsText:'description', optionsCaption:'Choose...'"></select>
                    </td>
                    <td data-bind="if:product">
                        <input data-bind="value:product().salesPrice"/>
                    </td>
                    <td>
                        <input data-bind="visible:product, value:quantity"/>
                    </td>
                    <td>
                        <input data-bind="visible:product, value:extendedPrice()"/>
                        <!--<input data-bind="visible:product, value:extendedPrice"/>-->
                    </td>
                    <td>
                        <a href="#" data-bind="click: $parent.removeLineItem">Remove</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <a href="#" data-bind="click: addLineItem">Add</a>
        <div>Grand Total: <span data-bind="text:formatCurrency(grandTotal()), valueUpdate:'afterkeydown'"></span></div>
    </div>
</body>
</html>

this.extendedPrice = ko.computed( () =>  { // Notice () =>
    return this.product()
         ? this.product().salesPrice() * 0.8 + parseFloat(this.product().salesPrice())
         : 0;
    },