├── .gitignore ├── README.md ├── assets ├── css │ └── style.css └── img │ └── favicon.png ├── index.html ├── package.json ├── src ├── ejercicios │ ├── 01-tipos-basicos.ts │ ├── 02-arr-obj-interface.ts │ ├── 03-funciones.ts │ ├── 04-tarea-tipado.ts │ ├── 05-desestructuracion-basica.ts │ ├── 06-desestructuracion-funcion.ts │ ├── 07-import-export.ts │ ├── 08-clases.ts │ ├── 09-genericos.ts │ ├── 10-decoradores.ts │ └── 11-optional-chaining.ts └── index.ts ├── tsconfig.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | 4 | package-lock.json 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Proyecto para reforzar TypeScript - ECMAScript 20XX 2 | 3 | * Lo primero que debemos de hacer después de descargar el código es ejecutar el comando: 4 | 5 | ``` 6 | npm install 7 | ``` 8 | Ese comando descargará todos los módulos de node necesarios para ejecutar el proyecto. 9 | 10 | 11 | * Cuando termine de instalar los node_modules, entonces podermos ejecutar el proyecto de con el siguiente comando 12 | 13 | ``` 14 | npm start 15 | ``` 16 | Para que eso funcione, recuerden que deben de ejecutar ese comando en el mismo directorio donde se encuentra el ```package.json``` 17 | 18 | ## Cambiar el puerto 19 | Por defecto, el puerto que configuré para este proyecto es el ```8081```, pero si necesitan cambiarlo porque pueda que ese puerto lo use su computadora, pueden cambiarlo abriendo el ```package.json``` >> scripts. Ahí verán la instrucción que lanza el servidor de desarrollo 20 | 21 | ``` 22 | "start": "webpack-dev-server --mode development --open --port=8081" 23 | ``` 24 | 25 | Simplemente cambian el puerto por el que ustedes necesiten y listo. (lógicamente graban los cambios antes de ejecutar el ```npm start``` nuevamente) 26 | 27 | 28 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap'); 2 | 3 | *, html, body { 4 | font-family: 'Roboto', sans-serif; 5 | color: white; 6 | } 7 | 8 | body{ 9 | background: rgb(36,81,166); 10 | background: linear-gradient(90deg, rgba(36,81,166,1) 11%, rgba(68,129,210,1) 100%); 11 | padding: 5px 30px; 12 | } 13 | 14 | h1 { 15 | font-weight: lighter; 16 | padding: 10px; 17 | margin-bottom: 20px; 18 | } 19 | 20 | input, button { 21 | width: 35%; 22 | padding: 10px; 23 | color: black; 24 | font-size: 18px; 25 | font-family: 'Roboto', sans-serif; 26 | border-radius: 10px; 27 | border: 0px; 28 | } 29 | 30 | button, video{ 31 | margin-right: 10px; 32 | } 33 | 34 | img { 35 | border-radius: 5px; 36 | width: 150px; 37 | height: 150px; 38 | } 39 | 40 | ol { 41 | text-align: left; 42 | } 43 | -------------------------------------------------------------------------------- /assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Klerith/curso-angular-intro-typescript-ecmascript/baf309074cc2c0f654adc3061ebc0482c2b6fea6/assets/img/favicon.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Curso Angular 8 | 9 | 10 | 11 | 12 |

TypeScript - ES20XX

13 |

14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rxjs-dev", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": { 7 | "typescript": "^3.6.3", 8 | "webpack": "^4.40.2", 9 | "webpack-dev-server": "^3.8.1" 10 | }, 11 | "devDependencies": { 12 | "ts-loader": "^6.1.2", 13 | "css-loader": "^3.2.0", 14 | "webpack-cli": "^3.3.9" 15 | }, 16 | "scripts": { 17 | "start": "webpack-dev-server --mode development --open --port=8081" 18 | }, 19 | "author": "", 20 | "license": "ISC" 21 | } 22 | -------------------------------------------------------------------------------- /src/ejercicios/01-tipos-basicos.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ===== Código de TypeScript ===== 3 | */ 4 | 5 | let nombre: string = 'Strider'; 6 | let hp: number | string = 95; 7 | let estaVivo: boolean = true; 8 | 9 | hp = 'FULL'; 10 | 11 | 12 | console.log( nombre, hp ); 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ejercicios/02-arr-obj-interface.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ===== Código de TypeScript ===== 3 | */ 4 | 5 | let habilidades: string[] = ['Bash','Counter', 'Healing']; 6 | 7 | interface Personaje { 8 | nombre: string; 9 | hp: number; 10 | habilidades: string[]; 11 | puebloNatal?: string; 12 | } 13 | 14 | 15 | const personaje: Personaje = { 16 | nombre: 'Strider', 17 | hp: 100, 18 | habilidades: ['Bash','Counter','Healing'] 19 | } 20 | 21 | personaje.puebloNatal = 'Pueblo Paleta'; 22 | 23 | 24 | console.table( personaje ); 25 | -------------------------------------------------------------------------------- /src/ejercicios/03-funciones.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ===== Código de TypeScript ===== 3 | */ 4 | 5 | 6 | function sumar(a: number, b:number): number { 7 | return a + b; 8 | } 9 | 10 | const sumarFlecha = (a:number, b:number):number => { 11 | return a + b; 12 | } 13 | 14 | function multiplicar( numero: number, otroNumero?: number, base:number = 2 ): number { 15 | return numero * base; 16 | } 17 | 18 | 19 | interface PersonajeLOR { 20 | nombre: string; 21 | pv: number; 22 | mostrarHp: () => void; 23 | } 24 | 25 | 26 | function curar( personaje: PersonajeLOR, curarX:number ): void { 27 | 28 | personaje.pv += curarX; 29 | } 30 | 31 | const nuevoPersonaje: PersonajeLOR = { 32 | nombre: 'Strider', 33 | pv: 50, 34 | mostrarHp() { 35 | console.log( 'Puntos de vida:', this.pv ); 36 | } 37 | } 38 | 39 | curar( nuevoPersonaje, 20 ); 40 | 41 | nuevoPersonaje.mostrarHp(); 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/ejercicios/04-tarea-tipado.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ===== Código de TypeScript ===== 3 | */ 4 | interface SuperHeroe { 5 | nombre: string; 6 | edad: number; 7 | direccion: Direccion, 8 | mostrarDireccion: () => string; 9 | } 10 | 11 | interface Direccion { 12 | calle: string; 13 | pais: string; 14 | ciudad: string; 15 | } 16 | 17 | 18 | 19 | const superHeroe: SuperHeroe = { 20 | nombre: 'Spiderman', 21 | edad: 30, 22 | direccion: { 23 | calle: 'Main St', 24 | pais: 'USA', 25 | ciudad: 'NY' 26 | }, 27 | mostrarDireccion() { 28 | return this.nombre + ', ' + this.direccion.ciudad + ', ' + this.direccion.pais; 29 | } 30 | } 31 | 32 | 33 | const direccion = superHeroe.mostrarDireccion(); 34 | console.log( direccion ); 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/ejercicios/05-desestructuracion-basica.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ===== Código de TypeScript ===== 3 | */ 4 | 5 | interface Reproductor { 6 | volumen: number; 7 | segundo: number; 8 | cancion: string; 9 | detalles: Detalles 10 | } 11 | 12 | interface Detalles { 13 | autor: string; 14 | anio: number; 15 | } 16 | 17 | const reproductor: Reproductor = { 18 | volumen: 90, 19 | segundo: 36, 20 | cancion: 'Mess', 21 | detalles: { 22 | autor: 'Ed Sheeran', 23 | anio: 2015 24 | } 25 | } 26 | 27 | const { volumen, segundo, cancion, detalles } = reproductor; 28 | const { autor } = detalles; 29 | 30 | 31 | // console.log('El volumen actual de: ', volumen ); 32 | // console.log('El segundo actual de: ', segundo ); 33 | // console.log('La canción actual de: ', cancion ); 34 | // console.log('El autor es: ', autor ); 35 | 36 | 37 | const dbz: string[] = ['Goku', 'Vegeta', 'Trunks']; 38 | const [ , , p3 ] = dbz; 39 | 40 | // console.log('Personaje 1:', p1 ); 41 | // console.log('Personaje 2:', p2 ); 42 | console.log('Personaje 3:', p3 ); -------------------------------------------------------------------------------- /src/ejercicios/06-desestructuracion-funcion.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ===== Código de TypeScript ===== 3 | */ 4 | 5 | export interface Producto { 6 | desc: string; 7 | precio: number; 8 | } 9 | 10 | const telefono: Producto = { 11 | desc: 'Nokia A1', 12 | precio: 150 13 | } 14 | 15 | const tableta: Producto = { 16 | desc: 'iPad Air', 17 | precio: 350 18 | } 19 | 20 | 21 | 22 | export function calculaISV( productos: Producto[] ):[number, number] { 23 | 24 | let total = 0; 25 | 26 | productos.forEach( ({ precio }) => { 27 | total += precio; 28 | }) 29 | 30 | return [total, total * 0.15]; 31 | 32 | } 33 | 34 | 35 | // const articulos = [ telefono, tableta ]; 36 | 37 | // const [ total, isv ] = calculaISV( articulos ); 38 | 39 | // console.log('Total:', total ); 40 | // console.log('ISV:', isv); 41 | 42 | -------------------------------------------------------------------------------- /src/ejercicios/07-import-export.ts: -------------------------------------------------------------------------------- 1 | import { Producto, calculaISV } from './06-desestructuracion-funcion'; 2 | /* 3 | ===== Código de TypeScript ===== 4 | */ 5 | 6 | const carritoCompras: Producto[] = [ 7 | { 8 | desc: 'Telefono 1', 9 | precio: 100 10 | }, 11 | { 12 | desc: 'Telefono 2', 13 | precio: 150 14 | }, 15 | ]; 16 | 17 | const [total, isv] = calculaISV( carritoCompras ); 18 | 19 | console.log( 'Total', total ); 20 | console.log( 'ISV', isv ) 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/ejercicios/08-clases.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ===== Código de TypeScript ===== 3 | */ 4 | class PersonaNormal { 5 | 6 | constructor( 7 | public nombre: string, 8 | public direccion: string 9 | ) {} 10 | 11 | } 12 | 13 | 14 | class Heroe extends PersonaNormal { 15 | 16 | constructor( 17 | public alterEgo: string, 18 | public edad: number, 19 | public nombreReal: string 20 | ) { 21 | super( nombreReal, 'New York, USA' ); 22 | } 23 | 24 | } 25 | 26 | const ironman = new Heroe('Ironman',45, 'Tony'); 27 | 28 | console.log(ironman); -------------------------------------------------------------------------------- /src/ejercicios/09-genericos.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ===== Código de TypeScript ===== 3 | */ 4 | 5 | function queTipoSoy(argumento: T) { 6 | return argumento; 7 | } 8 | 9 | 10 | let soyString = queTipoSoy('Hola Mundo'); 11 | let soyNumbero = queTipoSoy( 100 ); 12 | let soyArreglo = queTipoSoy( [1,2,3,4,5,6,7,8,9,10] ); 13 | 14 | let soyExplicito = queTipoSoy( 100 ); 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/ejercicios/10-decoradores.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ===== Código de TypeScript ===== 3 | */ 4 | function classDecorator( 5 | constructor: T 6 | ) { 7 | return class extends constructor { 8 | newProperty = "new property"; 9 | hello = "override"; 10 | }; 11 | } 12 | 13 | 14 | 15 | @classDecorator 16 | class MiSuperClase { 17 | public miPropiedad: string = 'ABC123'; 18 | 19 | imprimir() { 20 | console.log('Hola Mundo'); 21 | } 22 | } 23 | 24 | 25 | console.log( MiSuperClase ); 26 | 27 | const miClase = new MiSuperClase(); -------------------------------------------------------------------------------- /src/ejercicios/11-optional-chaining.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ===== Código de TypeScript ===== 3 | */ 4 | 5 | 6 | interface Pasajero { 7 | nombre: string; 8 | hijos?: string[] 9 | } 10 | 11 | const pasajero1: Pasajero = { 12 | nombre: 'Fernando' 13 | } 14 | 15 | const pasajero2: Pasajero = { 16 | nombre: 'Melissa', 17 | hijos: ['Natalia','Gabriel'] 18 | } 19 | 20 | 21 | function imprimeHijos( pasajero: Pasajero ): void { 22 | 23 | const cuantosHijos = pasajero.hijos?.length || 0; 24 | 25 | console.log( cuantosHijos ); 26 | 27 | } 28 | 29 | 30 | imprimeHijos( pasajero1 ); -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | ===== Código de TypeScript ===== 3 | */ 4 | 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | // "incremental": true, /* Enable incremental compilation */ 5 | "target": "es2017", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ 6 | "module": "amd", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 7 | // "lib": [], /* Specify library files to be included in the compilation. */ 8 | // "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 13 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 14 | // "outFile": "./", /* Concatenate and emit output to single file. */ 15 | // "outDir": "./", /* Redirect output structure to the directory. */ 16 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 17 | // "composite": true, /* Enable project compilation */ 18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 19 | // "removeComments": true, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | /* Strict Type-Checking Options */ 25 | "strict": true, /* Enable all strict type-checking options. */ 26 | "noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */ 27 | "strictNullChecks": false, /* Enable strict st checks. */ 28 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 29 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 30 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 31 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 32 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 33 | 34 | /* Additional Checks */ 35 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 36 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 37 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 38 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 39 | 40 | /* Module Resolution Options */ 41 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 42 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 43 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 44 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 45 | // "typeRoots": [], /* List of folders to include type definitions from. */ 46 | // "types": [], /* Type declaration files to be included in compilation. */ 47 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 48 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 49 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 50 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 51 | 52 | /* Source Map Options */ 53 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 54 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 55 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 56 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 57 | 58 | /* Experimental Options */ 59 | "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 60 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: './src/index.ts', 5 | devtool: 'inline-source-map', 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.tsx?$/, 10 | use: 'ts-loader', 11 | exclude: /node_modules/ 12 | } 13 | ] 14 | }, 15 | resolve: { 16 | extensions: [ '.tsx', '.ts', '.js' ] 17 | }, 18 | output: { 19 | filename: 'bundle.js', 20 | path: path.resolve(__dirname, 'dist') 21 | } 22 | }; --------------------------------------------------------------------------------