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"
  ]
}

© 2022 Better Solutions Limited. All Rights Reserved. © 2022 Better Solutions Limited TopPrevNext