El archivo de configuración de TypeScript

Clase 6 de 32 • Curso de TypeScript 3

Comentarios

Sandra Mishale Niño Arbelaez

student•

Recordar que cuando el profe se refiere a compile on save, es tener en cuenta el comando tsc --watch

Alberto Camarena

student•

También se puede usar el flag más corto -W Todas las opciones se pueden encontrar con el comando tsc --help

Jonathan Fernando Santana Quispillo

student•

Gracias por la aclaración.

Markoz Peña

student•

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.

Platzi Team

student•

Gracias por el aporte compañero, Gran recurso

Alex Leonardo Rodriguez Carvajal

student•

muchas gracias por el dato

Federico Walovnik

student•

Configurar Typescript

tsconfig.json

Especifica la raiz de un proyecto TS
Permite configurar opciones para el compilador

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

Juan Esteban Galvis

student•

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:

https://www.youtube.com/watch?v=7e6ssF78Af4

Herman Andres

student•

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”

Moisés Manuel Morín Hevia

student•

Thanks.

Jorge Cruz Perez

student•

Recomiendo el siguiente curso para comprender mejor el "target"

Curso de ECMAScript

ademas un muy buen profesor

Juan David González Rodríguez

student•

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

Juan David Merchán Torres

student•

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 🚀

Miguel Angel Reyes Moreno

student•

Podemos configurar nuestro compilador con el archivo "tsconfig.json".

Especifica la raíz de un proyecto TypeScript
Permite configurar opciones para el compilador
Para generar el archivo escribimos tsc --init

El 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ón
tsc --project platzi -> Especifica un directorio que contiene la configuración
tsc file.ts -> Omite la configuración

Jorge Cruz Perez

student•

Info 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

@ wrosb

student•

Uso del archivo tsconfig.js

Moisés Manuel Morín Hevia

student•

Uso & configuaración (:

Carlos Rodríguez

student•

El profe primero va a la teoría y lugo full práctica, muy bueno!

Jimmy Buriticá Londoño

student•

Tienes razón, al principio me parecía extraño, pero ya me estoy acostumbrando.

Jenny Aguilar

student•

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.

Jorge Méndez Ortega

student•

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. */
  }
}

Raul Armas

student•

Esta clase debería estar más adelante y no al inicio del curso...

Iván Alejandro Carrasco Rito

student•

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

Christian Velázquez

student•

Les dejo la guía oficial de Microsoft; como un apoyo más. El curso, está muy bueno.

https://docs.microsoft.com/en-us/learn/modules/typescript-get-started/

Usuario anónimo

user•

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.

Jofay Zhan Segura

student•

Aca les dejo mi repositorio donde estoy subiendo mis notas y codigos.

Jeremy Palomino

student•

Generación del archivo tsconfig.json

Camilo Arevalo

student•

El archivo de configuración de TS tsconfig.json permite:

Especificar la raíz de nuestros archivos TS para el proyecto
Permite configurar las opciones que se envían como parámetros al compilador de TS

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

module: Es en donde especificamos la configuración para la generación de módulos en el proyecto usando valores como (Num, Common.js,AMD, System.js etc..)
strict: Es utilizado para habilitar o deshabilitar el chequeo estricto de tipos de nuestro proyecto.
remove Comments: Para remover todos los comentarios que se encuentren en nuestro proyecto
includes: Podemos especificar opciones adicionales que van de la mano con la configuración en este podemos especificar los directorios y subdirectorios forman parte de los archivos procesados por el compilador
exclude: A diferencia del include este es para excluir directorios o subdirectorios del procesamiento del compilador

Juan David González Rodríguez

student•

// 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

{
	"extends": "./config/base"
	"compilerOptions":{
		"target": "es6",
		"module": "commonjs"
		"strict": true,
		"removeComments": true
	},
	"include":[
		"src/**/*.ts"
	],
	"exclude": [
		"node_modules",
		"**/*.test.ts"
	]
}

{
  "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. */
  }
}

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

El archivo de configuración de TypeScript

Introducción a TypeScript

El lenguaje de programación TypeScript

Instalación de herramientas para TypeScript

Instalación de herramientas en Windows

Navegación y refactorización

Entorno de Desarrollo

El compilador de TypeScript

El archivo de configuración de TypeScript

Mi primer proyecto TypeScript

Tipos en TypeScript

Tipado en TypeScript

Number, Boolean y String

Any

Void y never

null y undefined

Object

Array

Tupla

Enum

Unión de Tipos, Alias y Tipos Literales

Aserciones de tipo

Funciones en TypeScript

Resumen

Tipos Personalizados

Interfaces

Interfaces: propiedades opcionales

Extensión de interfaces

Clases

Clases públicas y privadas

Métodos Get y Set

Herencia de clases y propiedades estáticas

Resumen

Módulos

Principios de responsabilidad única

Resolviendo módulos

Webpack y agrupación de Módulos

Cierre

Cierre