El archivo de configuración de TypeScript
Contenido del curso
Sandra Mishale Niño Arbelaez
Alberto Camarena
Jonathan Fernando Santana Quispillo
Markoz Peña
Platzi Team
Alex Leonardo Rodriguez Carvajal
Federico Walovnik
Juan Esteban Galvis
Herman Andres
Moisés Manuel Morín Hevia
Jorge Cruz Perez
Juan David González Rodríguez
Juan David Merchán Torres
Miguel Angel Reyes Moreno
Jorge Cruz Perez
@ wrosb
Moisés Manuel Morín Hevia
Carlos Rodríguez
Jimmy Buriticá Londoño
Jenny Aguilar
Jorge Méndez Ortega
Raul Armas
Iván Alejandro Carrasco Rito
Christian Velázquez
Usuario anónimo
User
Jofay Zhan Segura
Jeremy Palomino
Camilo Arevalo
Juan David González Rodríguez
Recordar que cuando el profe se refiere a compile on save, es tener en cuenta el comando tsc --watch
También se puede usar el flag más corto -W Todas las opciones se pueden encontrar con el comando tsc --help
Gracias por la aclaración.
Para ver todas las configuraciónes que tiene el compilador recomiendo ampliamente que revise la documentación donde detallan para qué sirve cada cosa, sera un buen complemento para el curso.
Gracias por el aporte compañero, Gran recurso
muchas gracias por el dato
Configurar Typescript
tsconfig.json
Para crear este archivo en cualquier proyecto:
tsc --init
El archivo base es este:
{ "extends": "./config/base" "compilerOptions":{ "target": "es6", "module": "commonjs" "strict": true, "removeComments": true }, "include":[ "src/**/*.ts" ], "exclude": [ "node_modules", "**/*.test.ts" ] }
Una vez que este archivo es generado, ejecutamos:
tsc // Busa la configuracion dentro del proyecto tsc --project platzi // Especifica el directorio donde esta la configuracion tsc file.ts // Omite la configuracion
Para ver todas las configuraciones que podemos hacer:
TSConfig Reference - Docs on every TSConfig option
Les recomiendo mucho que lo de modo estricto, les dejo un vídeo donde se explica muy bien y qué tiene de diferencia con el modo normal:
Buen video, Solo para aclarar… El modo estricto de typescript no es el mismo que el modo estricto de ECMASCRIPT, si bien quizás pueden ser un símil pero el strict mode verifica mas allá del modo use strict de javascript ya que es una propiedad solo del proceso de compilación y verificación de typescript
la bandera que corresponde dicho setting es --alwaysStrict en la configuración de typescript y renderiza el famoso “use strict”
Thanks.
Recomiendo el siguiente curso para comprender mejor el "target"
ademas un muy buen profesor
Archivo de configuracion tsconfig.json El archivo tsconfig. json es el que indica en un proyecto que se está trabajando con TypeScript. Lo colocas en la raíz de carpetas del proyecto y en él situamos un JSON con todas las configuraciones de trabajo para el transpilador de TypeScript.
Especifica la raiz de un proyecto TypeScript
Permite configurar opciones para el compilado
Hola 👋
Les recomiendo el paquete que hizo Ben Awad para cualquier tipo de proyecto que vallas a usar con ts, para hacer la config auto y con el estandar pueden usar
npx tsconfig.json
Ya lo demas lo podran elegir usando el CLI que este comando les genera
Espero haberles aportado algo 🚀
Podemos configurar nuestro compilador con el archivo "tsconfig.json".
tsc --initEl archivo generado vendrá muy bien documentado para saber qué es lo que hace cada configuración.
Podemos usar de 3 formas diferentes el TSC:
tsc -> Busca la configuracióntsc --project platzi -> Especifica un directorio que contiene la configuracióntsc file.ts -> Omite la configuraciónInfo adicional, trate de poner la informacion que señalo de :
"compileOnSave": true
pero no lo reconoce, estuve checando que aun no lo soporta en particular VSCode pero se puede ejecutar un comando por emdio de Tasks dentro del IDE, mas info en esta liga
Uso del archivo tsconfig.js
Uso & configuaración (:
El profe primero va a la teoría y lugo full práctica, muy bueno!
Tienes razón, al principio me parecía extraño, pero ya me estoy acostumbrando.
Es cierto, a mi me funciona muy bien este método, ya que cuando estoy con las manos en el código no presto mucha atención a las explicaciones porque me preocupa la ejecución del código. Después, cuando ya sacié mi sed de teclear, puedo poner atención y es más fácil ubicar la explicación de todo que está al inicio.
All generar la configuración medio esto en lo cual ya detalla todas las opciones
{ "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* Basic Options */ // "incremental": true, /* Enable incremental compilation */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ // "lib": [], /* Specify library files to be included in the compilation. */ // "allowJs": true, /* Allow javascript files to be compiled. */ // "checkJs": true, /* Report errors in .js files. */ // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ // "declaration": true, /* Generates corresponding '.d.ts' file. */ // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ // "sourceMap": true, /* Generates corresponding '.map' file. */ // "outFile": "./", /* Concatenate and emit output to single file. */ // "outDir": "./", /* Redirect output structure to the directory. */ // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ // "composite": true, /* Enable project compilation */ // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ // "removeComments": true, /* Do not emit comments to output. */ // "noEmit": true, /* Do not emit outputs. */ // "importHelpers": true, /* Import emit helpers from 'tslib'. */ // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ /* Strict Type-Checking Options */ "strict": true, /* Enable all strict type-checking options. */ // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ // "strictNullChecks": true, /* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */ // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */ // "noUnusedLocals": true, /* Report errors on unused locals. */ // "noUnusedParameters": true, /* Report errors on unused parameters. */ // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ /* Module Resolution Options */ // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ // "typeRoots": [], /* List of folders to include type definitions from. */ // "types": [], /* Type declaration files to be included in compilation. */ // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ /* Source Map Options */ // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ /* Experimental Options */ // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ /* Advanced Options */ "skipLibCheck": true, /* Skip type checking of declaration files. */ "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ } }
Esta clase debería estar más adelante y no al inicio del curso...
el profe me da la impresion de que es actor de doblaje, tiene un leve parecido a la voz de gohan cuando es grande XD
Les dejo la guía oficial de Microsoft; como un apoyo más. El curso, está muy bueno.
En el archivo de configuración pueden buscar la propiedad rootDir allí pueden poner el path donde crearan todos los archivos .ts, el más común y src. También pueden buscar la propiedad outDir, allí pueden configurar el path donde se generaran los archivos .js resultantes de la compilación. Ya que tenerlos mesclados es poco practico.
Aca les dejo mi repositorio donde estoy subiendo mis notas y codigos.
Generación del archivo tsconfig.json
El archivo de configuración de TS tsconfig.json permite:
Para generar el archivo de configuración utilizamos el comando ++tsc --init ++ este archivo consta de lo siguiente:
tsconfig.json { "extendes": "-/configs/base", // para importar configuraciones de otro archivo "compileOnsave": ture, // para indicar al ide o editor que cada vez que se produscan cambios se compile automaticamente "compilerOptions":{ "target": "es5", "module": "commonjs", "strict": true, "removeComments: true }, "include":[ // para incluir directorios o subdirectorios "src/**/*.ts" ], "exclude": [ // para excluir directorios o subdirectorios "node_modules", "**/*.test.ts" ] }
target : Nos indica la versión de ECMAScript que se generaŕa al final de la compilación del tsc
// Generamos el archivo tsconfig.json
tsc --init
// Busca la configuracion
tsc
// Especificar un directorio que contiene la configuracion
tsc --project platzi
// Omite la configuracion
tsc file.ts