Typescript es un transpilador para un superconjunto del lenguaje Javascript. Ya que ahora escribiremos en un lenguaje diferente al Javascript, necesitamos establecer el paso de construcción que convertirá el código de Typescript a Javascript.
Configuración del proyecto
Instale Typescript en su proyecto ejecutándolo:
i -D mecanografía</pre
bash
A continuación, we'll setup Typescript creando el archivo de configuración tsconfig.json :
1234567891011121314151617181920212223{"CompiladorOpciones":{"fueraDir":"construir","módulo":"esnext","objetivo":"es5","lib": ["es6","dom","es2016","es2017"]," sourceMap":true,"allowJs":false,"jsx":"react","declaration":true,"moduleResolution": FuerzaCasosConsistentesEnNombresDeArchivos&punto;:verdadero,&punto;noImplícitosRetornos&punto;:verdadero,&punto;noImplícitosEsto&punto;:verdadero,&punto;noImplícitosCualquier&punto;:verdadero,&punto;estrictoCasosNulos&punto;: true,"suprimirCualquierError de Indice Implícito":true,"noLocalesNoUsados":true,"noParámetrosNoUsados":true},"incluir":["src"],"excluir":["nodo_módulos","construir"]}</pre
json
Estamos configurando algunos parámetros importantes aquí:
- outDir – donde colocar los archivos .js generados.
- objetivo – qué versión de ECMAScript a objetivo. Dado que Typescript es un superconjunto de Javascript, contiene características/sintaxis que no son soportadas por todos los proveedores de navegadores. Especificamos el objetivo de compilación para mantener la compatibilidad de sintaxis.
- sourceMap – mientras se transpone, Typescript puede generar un source-map para permitir el acceso al código original de Typescript durante la depuración en el archivo JS creado.
- declaración – El ecosistema tipográfico se construye alrededor del .d.ts, las llamadas Definiciones Tipo. Añadiendo esta bandera se generará el archivo .d.ts para usted e incluirá todos los tipos y funciones exportados en él.
- incluyen – donde buscar los archivos .ts (src).
- excluir – qué carpetas evitar (node_modules) – ya que no queremos transponer los módulos existentes y construir nuestra carpeta de salida.
Cambios de código
Comencemos por organizar nuestra carpeta correctamente creando una subcarpeta llamada src (la entrada para el compilador Typescript, como se especifica en la sección tsconfig.json include) y movamos index.js allí mientras lo renombramos a index.ts
A continuación, vamos a arreglar los errores de sintaxis que se produjeron debido a las opciones de rigor en el archivo tsconfig.json para que el index.ts se vea como:
123exportfunctiontestMethod(param:string){retorno"Hola "+ param;}</pre>
typoscript
Por último, vamos a añadir un paso de construcción para ejecutar el compilador de Typescript editando package.json y añadiendo un script de construcción:
1234" scripts":{" build":"tsc","test":"echo "Error: no se especificó ninguna prueba" &amp;quot;amp;quot; salida 1"},N-
json
Vamos a probarlo:
…1$ npm run build</pre
bash
Deberías ver una nueva carpeta llamada build con tres archivos en ella:
- index.js – el resultado de la compilación.
- index.js.map – el mapa de la fuente.
- index.d.ts – las definiciones de los tipos. Como hemos exportado una función, se incluirá en ella.
Pruebas
Para implementar las pruebas, we'usará el popular marco de trabajo Jest y su módulo de soporte de Typescript ts-jest.para agregarlo al proyecto, ejecute:
i -D ts-jest jest @types/jest</pre
bash
Entonces, edita package.json para activar el soporte de Jest's Typescript añadiendo:
1234 "jest":{"preset":"ts-jest","testEnvironment":"nodo"}</pre
json
y reemplazar
Error: no se ha especificado ninguna prueba..;
json
con
…1"1"test":"jest";;/pre
json
Ahora, vamos a crear un archivo de prueba llamado function.spec.ts en src/__tests__:
12345importar{ testMethod }de"..";test("crear un nuevo hola",()=&gt;{espect(testMethod("World")).toBe("Hola World");});/pre
tipografía
Aquí, estamos importando la función testMethod y declarando una prueba que espera una llamada a testMethod con el parámetro &quo
1234567891011$ npmtest> jest PASS src/__tests__/function.spec.ts √ crear un nuevo hola (2ms)Test Suites: 1 pasado, 1 totalTests: 1 pasada, 1 totalSnapshots: 0 totalTime: 0.742s, estimado 2sRan todas las suites de pruebas.
bash
Prepararse para la publicación
Como he mencionado antes, el código de Typecript debe ser compilado hasta Javascript antes de ser publicado en el NPM. Para añadir confusión a este procedimiento, debemos ser conscientes de los diferentes formatos de módulos que existen en el ecosistema de Javascript.
- CommonJS – formato de módulo usado por Node (usando la función “Requerir”).
- ESM – formato de módulo moderno (usando sintaxis de importación).
- UMD – Universal Module Definition, un patrón para exportar módulos que debería funcionar en todas partes (no tan popular en estos días).
Así que, para poder soportar ambos, CommonJS y ESM simultáneamente, necesitaremos introducir un paso de construcción un poco más complicado reemplazando la llamada directa al compilador de Typescript con una herramienta de construcción llamada Rollup.Esta herramienta (similar a Webpack) ingerirá nuestro código de Typescript y escupirá el código Javascript en dos formatos de salida separados.añadamos Rollup y sus plugins requeridos a nuestro proyecto:
1$ npm i -D rollup-plugin-typescript2 rollup-plugin-commonjs rollup-plugin-peer-deps-external rollup-plugin-node-resolve
bash
Ahora, editemos nuestro archivo package.json para usar Rollup para la construcción:
1234 "scripts":{"build": "rollup -c", "test": "jest"},json
Y apunte a los archivos de salida del rollup:
123 "main": "build/index.js", "module": "build/index.es.js", "jsnext:main": "build/index.es.js",
json
Estos ajustes (main, module y jsnext:main) serán utilizados por otros bundlers/herramientas que usarán nuestro paquete para recoger el formato apropiado para ellos.
Como último paso, crea un archivo de configuración de Rollup llamado rollup.config.js para que se vea como:
123456789101112131415161718192021222324252627282930313233343536373839404142434445importar tipografía de "rollup-plugin-typescript2";importar comúnjs de "rollup-plugin-commonjs";importar externo de "rollup-plugin-peer-deps-external";importar resolver de "rollup-plugin-node-resolve";importar pkg de". /package.json";exportar por defecto{ entrada: "src/index.ts", salida:[{ archivo: pkg. main, formato: "cjs", exporta: "named", sourcemap:true},{ archivo: pkg. module, format: "es", exports: "named", sourcemap:true}], plugins:[external(),resolve(),typescript({ rollupCommonJSResolveHack:true, exclude: "**/__tests__/**", clean:true}),commonjs({ include:["node_modules/**"], namedExports:{"node_modules/react/react. js":["Children", "Component", "PropTypes", "createElement"], "node_modules/react-dom/index.js":["render"]}})]};javascript
¡Todo listo! Vamos a probarlo corriendo
1234567$ npm run build >[email protected] build > rollup -csrc/index.ts → build/index.js, build/index.es.js...created build/index.js, build/index.es.js in 141ms
bash
Ahora, si ejecutas npm pack puedes notar que nuestros archivos fuente también se incluyeron en el tarball resultante. Para evitar eso y para empaquetar sólo la carpeta de construcción, añade esto a tu paquete.json:
123 "files":["build"],
json