TypeScript で文字列を一文字ずつスタイルを適用する

ひとまず共通関数を定義

function decorateText(text: string, params: {[index: string]: string}[]): string {
    var result = '';
    var textArr = text.split('');
    var textLen = textArr.length;
    var paramsLen = params.length;
    for (var i = 0; i < textLen; i++) {
        var attr = '';
        let param = params[(i % paramsLen)];
        for (var key in param) {
            attr += ` ${key}="${param[key]}"`
        }
        result += `<span ${attr}>${textArr[i]}</span>`;
    }
    return result;
}

呼び出し側は

var decorateParams = [
    {"style" : "color: #000000;"},
    {"style" : "color: #ff0000;"}
];
decorateText("aaaaaaaaaa", decorateParams);

こんな感じです。