Búsqueda de sitios web

node.js - ¿Cómo usar TypeScript en el navegador?

utility.ts

let books = [
    { id: 1, title: "the dark window", author: "krishna", available: true },
    { id: 2, title: "naked eye", author: "sydney", available: false },
    { id: 3, title: "half girlfriend", author: "chetan", available: true },
    { id: 4, title: "make my dreams", author: "salam", available: false }
];

export { books };

principal- app.ts

import {books} from './utility';

let getAllBooks = (): void => {
    books.filter((val) => {
        console.log(val.author);
    })
}

¿Cómo puedo acceder a la función getAllBooks en una página HTML? Si no uso export e import funciona perfectamente, pero tengo que usarlos en lugar de escribir todo en un solo archivo.

Por favor, aconsejen [usando módulo amd] para generar un archivo JS como salida [main.js]. Se obtiene el siguiente error en la consola de Chrome.

[(index):13 Error de Referencia no Detectado: getAllBooks no está definido en HTMLInputElement.onclick ((index):13)]

Mi página html

<html>
<title>Welcome</title>

<head>
    <script data-main="./js/main" src="./js/require.js"></script>
    <script src="./js/main.js"></script>

    <body>
        <div id="mytest"></div>
        <input type="button" value="Click!" id="btnClick" onclick="getAllBooks();" />


        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </body>
</head>

</html>

principal.js

    define("utility", ["require", "exports"], function (require, exports) {
    "use strict";
    let books = [
        { id: 1, title: "the dark window", author: "krishna", available: true },
        { id: 2, title: "naked eye", author: "sydney", available: false },
        { id: 3, title: "half girlfriend", author: "chetan", available: true },
        { id: 4, title: "make my dreams", author: "salam", available: false }
    ];
    exports.books = books;
});
define("app", ["require", "exports", "utility"], function (require, exports, utility_1) {
    "use strict";
    let getAllBooks = () => {
        utility_1.books.filter((val) => {
            console.log(val.author);
        });
    };
});
//# sourceMappingURL=main.js.map

Respuesta #1

  1. Actualiza el navegador a uno reciente (lo suficientemente reciente para soportar módulos ES2015)
  2. Cambia tsconfig.json target a es2015
  3. Cambia tsconfig.json module a es2015
  4. Siempre agrega la extensión .js a tus declaraciones de importación
  5. Usa un servidor http como live-server para evitar problemas de CORS con el protocolo file://

BONO: Establece explícitamente tsconfig.json moduleResolution a node. Esto no es necesario si no usas bibliotecas externas o paquetes @types/*.

Véalo todo en: https://github.com/SalathielGenese/ts-web

Divulgación: Soy su autor.

Respuesta #2

Los navegadores aún no soportan módulos de JavaScript. Hasta que lo hagan, necesitarás incluir Browserify en tu flujo de trabajo de desarrollo. Browserify concatena tus módulos en un paquete compatible con el navegador.

Browserify es muy fácil de poner en funcionamiento en un flujo de trabajo con TypeScript. Si te sientes aventurero, puedes mirar otros empaquetadores como WebPack, Rollup o SystemJs.

Nota, esto no es específico de TypeScript. Al desarrollar cualquier JavaScript moderno (ES6 o módulos CommonJS) necesitarás agrupar los módulos para el navegador.

Artículos relacionados