proyecto - error al instalar typescript

Estructura de directorios para proyectos de TypeScript.

Question

¿Cuál sería una estructura de directorios idiomática para un proyecto de TypeScript?

Me gustaría tener las siguientes características en tal estructura:

1. Directorios separados para el código fuente de TypeScript y JavaScript transpilado
2. Directorios separados para el código fuente del proyecto y el código de prueba
3. Mecanismo para resolver referencias a través de pruebas y código fuente.

Answer 1

Separando los JS generados de la fuente TS

Yo recomendaría generar una salida de un solo archivo. Ya sea para el navegador o para Node, es solo una mejor idea. Tenga en cuenta que la mayoría de los IDE pueden ocultar archivos .gitignore d, por lo que un panel de archivos .gitignore no debería ser un problema, incluso si deja que los archivos .js queden justo al lado de sus archivos .ts .

Técnicamente puede usar --outDir para generar la forma que desee configurando su tsconfig.json apropiada.

Separando pruebas de origen

¡Esto es bastante trivial! Solo mantén a /tests . Las importaciones funcionan simplemente por el recorrido del directorio, por lo que import {MyClass} from "../src/modules/my-class" (donde ../ es para salir de /tests ).

Mecanismo para resolver las referencias.

Esto es más desafiante en el navegador que en Nodo, este último require trabaje fuera de la caja para TypeScript.

En el navegador

Recomiendo encarecidamente que webpack un webpack , pero si insiste en vivir la vida en el lado peligroso, aquí hay un navegador que me permite utilizarlo para iterar rápidamente en el código TypeScript sin tener una configuración de proceso de compilación.

require() para el navegador

• No para los débiles de corazón: esta es una deuda tecnológica que acumularás

Dado que las rutas absolutas son necesarias para trabajar con las importaciones web, aquí se explica cómo puede usar mi hack de require() con TypeScript (normalmente para una sesión de depuración rápida que no requiere reconstrucción).

/entities/user.ts

import {Username} from "../entities/username";
import {Password} from "../entities/password";

export class User {
    username: Username;
    password: Password;
}

Donde el nombre de Username y la Password son clases de export en /entities/username.ts y /entities/password.ts respectivamente.

Si bien las ../entities/ pueden parecer extrañas, tenga en cuenta que es esencial que el navegador tenga las rutas absolutas adecuadas a nuestras entidades de nombre de Username y Password . :)

Answer 2

Es muy difícil dar un consejo concreto, ya que esto depende enormemente del tamaño del proyecto, las herramientas, la plataforma, etc.

1. El compilador Typescript tiene una opción --outDir que puede usar para enviar a un directorio separado. Sin embargo, es probable que también desee agrupar para que la salida a un solo archivo sea más preferible, siempre y cuando cree archivos de mapas para la depuración. Puedes estructurar todo esto muy bien con Gulp, por ejemplo.
2. ¿Qué tiene esto que ver con la estructura del directorio? Si quieres dividirlo, entonces divídelo.
3. El "mecanismo" es muy amplio y depende de las herramientas que utilice. Por ejemplo, el corredor de prueba podría ser capaz de "importar" el código de producción antes del código de prueba. Usted podría utilizar algún módulo de carga de la biblioteca, etc, etc.

Answer 3

Parece que lo estaba haciendo mal. Estaba probando la siguiente estructura:

src
|---- lib
|-----|---- mymodule.ts
|---- tests
|-----|---- mymodule.tests.ts

Sin embargo, estaba intentando compilar el código fuente bajo el directorio lib separado del código de prueba bajo tests .

find src/lib -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir lib

y luego el código de pruebas:

find src/tests -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir tests

Esto causó que la carpeta de tests tenga otro subdirectorio lib y un subdirectorio de tests . Esto no era lo que pretendía tener.

Para resolver mi problema, necesitaba compilarlos juntos, así que ahora mi comando es:

find src -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir .

Gracias a todos por su ayuda.