CSSとJavaScriptでテキストアニメーションを実装したい

【実現したいこと】
こちらを参考にテキストのアニメーションを実装したいと思っています。

【やったこと】
まずは、コピペして、それぞれのデータを作成し、index.html,style.css,TypeScript.jsという名前で同一フォルダ内に保存しました。
そして、Xamppにてローカル環境で実行してみました。
その結果以下の様な状態になってしまいます。
CSSまでは反映されているのですが、JavaScriptが反映されず、アニメーションしません

【エラー内容】
コンソールを見てみるとTypeScript.js:15 Uncaught TypeError: Cannot read property 'style' of undefinedとなっています。
15行目に何か問題があるのはわかるのですが、それに対してどうしていいのかわかりません

【それぞれのコード】
【index.html】

index.html
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
4<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
5<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
6<meta http-equiv="Content-Script-Type" content="text/javascript">
7<script type="text/javascript" src="TypeScript.js"></script>
8
9<html lang="ja">
10<head>
11<meta http-equiv="Content-Type" content="text/html; "charset="utf-8">
12<link rel="stylesheet" href="style.css">
13<div class="rotating-text">
14  <p>CSS Animation is</p>
15  <p>
16    <span class="word alizarin">awesome.</span>
17    <span class="word wisteria">beautiful.</span>
18    <span class="word peter-river">creative.</span>
19    <span class="word emerald">fabulous.</span>
20    <span class="word sun-flower">interesting.</span>
21  </p>
22</div>
23</head></html>

【style.css】

style.css
1/*@import url(https://fonts.googleapis.com/css?family=Lato:600);*/
2body {
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  height: 100vh;
7  background: #222;
8}
9
10.rotating-text {
11  font-family: sans-serif;
12  font-weight: 600;
13  font-size: 36px;
14  color: white;
15  transform: translateX(-80px);
16}
17.rotating-text p {
18  display: inline-flex;
19  margin: 0;
20  vertical-align: top;
21}
22.rotating-text p .word {
23  position: absolute;
24  display: flex;
25  opacity: 0;
26}
27.rotating-text p .word .letter {
28  transform-origin: center center 25px;
29}
30.rotating-text p .word .letter.out {
31  transform: rotateX(90deg);
32  transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
33}
34.rotating-text p .word .letter.in {
35  transition: 0.38s ease;
36}
37.rotating-text p .word .letter.behind {
38  transform: rotateX(-90deg);
39}
40
41.alizarin {
42  color: #e74c3c;
43}
44
45.wisteria {
46  color: #8e44ad;
47}
48
49.peter-river {
50  color: #3498db;
51}
52
53.emerald {
54  color: #2ecc71;
55}
56
57.sun-flower {
58  color: #f1c40f;
59}

【TypeScript.js】

TypeScript.js
1"use strict";
2var words = document.querySelectorAll(".word");
3words.forEach(function (word) {
4  var letters = word.textContent.split("");
5  word.textContent = "";
6  letters.forEach(function (letter) {
7    var span = document.createElement("span");
8    span.textContent = letter;
9    span.className = "letter";
10    word.append(span);
11  });
12});
13var currentWordIndex = 0;
14var maxWordIndex = words.length - 1;
15words[currentWordIndex].style.opacity = "1";
16var rotateText = function () {
17  var currentWord = words[currentWordIndex];
18  var nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
19  // rotate out letters of current word
20  Array.from(currentWord.children).forEach(function (letter, i) {
21    setTimeout(function () {
22      letter.className = "letter out";
23    }, i * 80);
24  });
25  // reveal and rotate in letters of next word
26  nextWord.style.opacity = "1";
27  Array.from(nextWord.children).forEach(function (letter, i) {
28    letter.className = "letter behind";
29    setTimeout(function () {
30      letter.className = "letter in";
31    }, 340 + i * 80);
32  });
33  currentWordIndex =
34  currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
35};
36rotateText();
37setInterval(rotateText, 4000);