Word with TypeScript

You can use the Yeoman Generator to create a Word add-in project using VS Code with TypeScript
The link above displays the contents of these three files:

package.json 
manifest.xml 
webpack.config.js

This page displays all the other important files in this project:

src\taskpane\taskpane.html 
src\taskpane\taskpane.ts 
src\taskpane\taskpane.css 
src\commands\commands.html 
src\commands\commands.ts 
babel.config.json 
tsconfig.json 
.eslintrc.json

taskpane.html

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>React Task Pane Add-in</title> 
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script> 
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/> 
    <link href="taskpane.css" rel="stylesheet" type="text/css" /> 
</head> 

<body class="ms-font-m ms-Fabric"> 
   <div id="container"></div> 
</body> 
</html>

src/taskpane/index.tsx

This file contains the typescript that sits behind the html page.

import "office-ui-fabric-react/dist/css/fabric.min.css"; 
import App from "./components/App"; 
import { AppContainer } from "react-hot-loader"; 
import { initializeIcons } from "office-ui-fabric-react/lib/Icons"; 
import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

initializeIcons(); 

let isOfficeInitialized = false; 

const title = "React Task Pane Add-in"; 

const render = Component => { 
  ReactDOM.render( 
    <AppContainer> 
      <Component 
         title={title} 
         isOfficeInitialized={isOfficeInitialized} 
      /> 
    </AppContainer>, 
    document.getElementById("container") 
  ); 
}; 

/* Render application after Office initializes */ 
Office.initialize = () => { 
  isOfficeInitialized = true; 
  render(App); 
}; 

if ((module as any).hot) { 
  (module as any).hot.accept("./components/App", () => { 
    const NextApp = require("./components/App").default; 
    render(NextApp); 
  }); 
}

taskpane.ts

/* global document, Office, Word */ 

Office.onReady((info) => { 
  if (info.host === Office.HostType.Word) { 
    document.getElementById("sideload-msg").style.display = "none"; 
    document.getElementById("app-body").style.display = "flex"; 
    document.getElementById("run").onclick = run; 
  } 
}); 

export async function run() { 
  return Word.run(async (context) => { 
    /** 
     * Insert your Word code here 
     */ 

    // insert a paragraph at the end of the document. 
    const paragraph = context.document.body.insertParagraph("Hello World", Word.InsertLocation.end); 

    // change the paragraph color to blue. 
    paragraph.font.color = "blue"; 

    await context.sync(); 
  }); 
}

taskpane.css

 html, 
 body { 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
 } 
 
 ul { 
     margin: 0; 
     padding: 0; 
 } 
 
 .ms-welcome__header { 
    padding: 20px; 
    padding-bottom: 30px; 
    padding-top: 100px; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    align-items: center; 
 } 

 .ms-welcome__main { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    -webkit-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-flex: 1 0 0; 
    flex: 1 0 0; 
    padding: 10px 20px; 
 } 
 
 .ms-welcome__main > h2 { 
     width: 100%; 
     text-align: center; 
 } 
 
 .ms-welcome__features { 
     list-style-type: none; 
     margin-top: 20px; 
 } 
 
 .ms-welcome__features.ms-List .ms-ListItem { 
     padding-bottom: 20px; 
     display: -webkit-flex; 
     display: flex; 
 } 
 
 .ms-welcome__features.ms-List .ms-ListItem > .ms-Icon { 
     margin-right: 10px; 
 } 
 
 .ms-welcome__action.ms-Button--hero { 
     margin-top: 30px; 
 } 
 
.ms-Button.ms-Button--hero .ms-Button-label { 
  color: #0078d7; 
} 

` 
.ms-Button.ms-Button--hero:focus .ms-Button-label{ 
  color: #005a9e; 
  cursor: pointer; 
} 

b { 
    font-weight: bold; 
`

commands.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"> 
</script> 
</head> 
<body> 
</body> 
</html>

commands.ts

/* global global, Office, self, window */ 

Office.onReady(() => { 
  // If needed, Office.js is ready to be called 
}); 

/** 
 * Shows a notification when the add-in command is executed. 
 * @param event 
 */ 
function action(event: Office.AddinCommands.Event) { 
  const message: Office.NotificationMessageDetails = { 
    type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage, 
    message: "Performed action.", 
    icon: "Icon.80x80", 
    persistent: true, 
  }; 

  // Show a notification message 
  Office.context.mailbox.item.notificationMessages.replaceAsync("action", message); 

  // Be sure to indicate when the add-in command function is complete 
  event.completed(); 
} 

function getGlobal() { 
  return typeof self !== "undefined" 
    ? self 
    : typeof window !== "undefined" 
    ? window 
    : typeof global !== "undefined" 
    ? global 
    : undefined; 
} 

const g = getGlobal() as any; 

// The add-in command functions need to be available in global scope 
g.action = action;

babel.config.json

{ 
  "presets": ["@babel/preset-typescript"] 
}

tsconfig.json

{ 
  "compilerOptions": { 
    "allowJs": true, 
    "baseUrl": ".", 
    "esModuleInterop": true, 
    "experimentalDecorators": true, 
    "jsx": "react", 
    "noEmitOnError": true, 
    "outDir": "lib", 
    "sourceMap": true, 
    "target": "es5", 
    "lib": [ 
      "es2015", 
      "dom" 
    ] 
  }, 
  "exclude": [ 
    "node_modules", 
    "dist", 
    "lib", 
    "lib-amd" 
  ], 
  "ts-node": { 
    "files": true 
  } 
}

.eslintrc.json

{ 
  "plugins": [ 
    "office-addins" 
  ], 
  "extends": [ 
    "plugin:office-addins/recommended" 
  ] 
}