├── src
├── vite-env.d.ts
├── style.css
├── topics
│ ├── 01-basic-types.ts
│ ├── 09-generics.ts
│ ├── 02-object-interface.ts
│ ├── 07-import-export.ts
│ ├── 10-decorators.ts
│ ├── 11-optional-chaining.ts
│ ├── 04-homework-types.ts
│ ├── 05-basic-destructuring.ts
│ ├── 08-classes.ts
│ ├── 03-functions.ts
│ └── 06-function-destructuring.ts
└── main.ts
├── package.json
├── README.md
├── .gitignore
├── index.html
├── tsconfig.json
└── favicon.svg
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | #app {
2 | font-family: Avenir, Helvetica, Arial, sans-serif;
3 | -webkit-font-smoothing: antialiased;
4 | -moz-osx-font-smoothing: grayscale;
5 | text-align: center;
6 | color: #2c3e50;
7 | margin-top: 60px;
8 | }
9 |
--------------------------------------------------------------------------------
/src/topics/01-basic-types.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 | const name: string = 'Strider';
4 | let hpPoints: number | 'FULL' = 95;
5 | const isAlive: boolean = true;
6 |
7 |
8 | hpPoints = 'FULL';
9 |
10 | console.log({
11 | name, hpPoints, isAlive
12 | });
13 |
14 |
15 |
16 | export {};
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "typescript-intro",
3 | "private": true,
4 | "version": "0.0.0",
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "tsc && vite build",
8 | "preview": "vite preview"
9 | },
10 | "devDependencies": {
11 | "typescript": "^4.5.4",
12 | "vite": "^2.9.15"
13 | }
14 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Ejercicios introductorios a TypeScript
2 |
3 | Para ejecutar el programa, sigan estos pasos:
4 |
5 | 1. Clonar o descargar el proyecto
6 | 2. Ejecutar ```npm install``` en la carpeta del proyecto
7 | 3. Cambiar en el ```main.ts```, el path del ejercicio que quieren ejecutar
8 | 4. Correr ```npm run dev``` para ejecutar el programa
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/topics/09-generics.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 | export function whatsMyType( argument: T ): T {
4 |
5 | return argument;
6 | }
7 |
8 | const amIString = whatsMyType('Hola Mundo');
9 | const amINumber = whatsMyType(100);
10 | const amIArray = whatsMyType([1,2,3,4,5]);
11 |
12 | console.log( amIString.split(' ') );
13 | console.log( amINumber.toFixed() );
14 | console.log( amIArray.join('-') );
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/topics/02-object-interface.ts:
--------------------------------------------------------------------------------
1 |
2 | const skills: string[] = ['Bash','Counter','Healing'];
3 |
4 |
5 | interface Character {
6 | name: string;
7 | hp: number;
8 | skills: string[];
9 | hometown?: string;
10 | }
11 |
12 |
13 | const strider: Character = {
14 | name: 'Strider',
15 | hp: 100,
16 | skills: ['Bash', 'Counter'],
17 | };
18 |
19 |
20 | strider.hometown = 'Rivendell';
21 |
22 |
23 | console.table(strider)
24 |
25 | export {};
--------------------------------------------------------------------------------
/src/topics/07-import-export.ts:
--------------------------------------------------------------------------------
1 | import { Product, taxCalculation } from './06-function-destructuring';
2 |
3 | const shoppingCart: Product[] = [
4 | {
5 | description: 'Nokia',
6 | price: 100
7 | },
8 | {
9 | description: 'iPad',
10 | price: 150
11 | }
12 | ];
13 |
14 | // Tax = 0.15
15 | const [ total, tax ] = taxCalculation({
16 | products: shoppingCart,
17 | tax: 0.15
18 | });
19 |
20 | console.log('Total', total );
21 | console.log('Tax', tax );
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/src/topics/10-decorators.ts:
--------------------------------------------------------------------------------
1 | function classDecorator(
2 | constructor: T
3 | ) {
4 | return class extends constructor {
5 | newProperty = 'New Property';
6 | hello = 'override';
7 | }
8 | }
9 |
10 |
11 |
12 | @classDecorator
13 | export class SuperClass {
14 |
15 |
16 | public myProperty: string = 'Abc123';
17 |
18 | print() {
19 | console.log('Hola Mundo')
20 | }
21 | }
22 |
23 |
24 | console.log( SuperClass );
25 |
26 | const myClass = new SuperClass();
27 | console.log( myClass );
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "module": "ESNext",
6 | "lib": ["ESNext", "DOM"],
7 | "moduleResolution": "Node",
8 | "strict": true,
9 | "sourceMap": true,
10 | "resolveJsonModule": true,
11 | "isolatedModules": true,
12 | "esModuleInterop": true,
13 | "noEmit": true,
14 | "noUnusedLocals": true,
15 | "noUnusedParameters": true,
16 | "noImplicitReturns": true,
17 | "skipLibCheck": true,
18 | "experimentalDecorators": true
19 | },
20 | "include": ["src"]
21 | }
22 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './style.css';
2 |
3 | // import './topics/01-basic-types';
4 | // import './topics/02-object-interface';
5 | // import './topics/03-functions';
6 | // import './topics/04-homework-types';
7 | // import './topics/05-basic-destructuring';
8 | // import './topics/06-function-destructuring';
9 | // import './topics/07-import-export';
10 | // import './topics/08-classes';
11 | // import './topics/09-generics';
12 | // import './topics/10-decorators';
13 | import './topics/11-optional-chaining';
14 |
15 |
16 | const app = document.querySelector('#app')!
17 |
18 | app.innerHTML = `
19 | Hola Mundo
20 | `;
21 |
22 | console.log('Hola Mundo');
23 |
--------------------------------------------------------------------------------
/src/topics/11-optional-chaining.ts:
--------------------------------------------------------------------------------
1 |
2 | export interface Passenger {
3 | name: string;
4 | children?: string[];
5 | }
6 |
7 | const passenger1: Passenger = {
8 | name: 'Fernando',
9 | }
10 |
11 | const passenger2: Passenger = {
12 | name: 'Melissa',
13 | children: ['Natalia','Elizabeth'],
14 | }
15 |
16 | const returnChildrenNumber = ( passenger: Passenger ): number => {
17 |
18 | const howManyChildren = passenger.children?.length || 0;
19 | // const howManyChildren = passenger.children!.length;
20 |
21 | console.log( passenger.name, howManyChildren);
22 |
23 | return howManyChildren;
24 | }
25 |
26 |
27 | returnChildrenNumber( passenger1 );
28 |
--------------------------------------------------------------------------------
/src/topics/04-homework-types.ts:
--------------------------------------------------------------------------------
1 | /*
2 | ===== Código de TypeScript =====
3 | */
4 | interface SuperHero {
5 | name: string;
6 | age: number;
7 | address: Address;
8 | showAddress: () => string;
9 | }
10 |
11 | interface Address {
12 | street: string;
13 | country: string;
14 | city: string;
15 | }
16 |
17 |
18 | const superHeroe: SuperHero = {
19 | name: 'Spiderman',
20 | age: 30,
21 | address: {
22 | street: 'Main St',
23 | country: 'USA',
24 | city: 'NY'
25 | },
26 | showAddress() {
27 | return this.name + ', ' + this.address.city + ', ' + this.address.country;
28 | }
29 | }
30 |
31 |
32 | const address = superHeroe.showAddress();
33 | console.log( address );
34 |
35 |
36 |
37 |
38 | export {};
--------------------------------------------------------------------------------
/src/topics/05-basic-destructuring.ts:
--------------------------------------------------------------------------------
1 |
2 | interface AudioPlayer {
3 | audioVolume: number;
4 | songDuration: number;
5 | song: string;
6 | details: Details;
7 | }
8 |
9 | interface Details {
10 | author: string;
11 | year: number;
12 | }
13 |
14 | const audioPlayer: AudioPlayer = {
15 | audioVolume: 90,
16 | songDuration: 36,
17 | song: "Mess",
18 | details: {
19 | author: 'Ed Sheeran',
20 | year: 2015
21 | }
22 | }
23 |
24 |
25 | const song = 'New Song';
26 |
27 | const { song:anotherSong, songDuration:duration, details } = audioPlayer;
28 | const { author } = details;
29 |
30 | // console.log('Song: ', anotherSong );
31 | // console.log('Duration: ', duration );
32 | // console.log('Author: ', audioPlayer.details.author );
33 | // console.log('Author: ', author );
34 |
35 |
36 | const [ , , trunks = 'Not found' ]: string[] = ['Goku','Vegeta'];
37 |
38 |
39 | console.error('Personaje 3:', trunks );
40 |
41 |
42 |
43 |
44 |
45 |
46 | export {};
--------------------------------------------------------------------------------
/src/topics/08-classes.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 | export class Person {
4 | // public name: string;
5 | // private address: string;
6 |
7 | constructor(
8 | public firstName: string,
9 | public lastName: string,
10 | private address: string = 'No Address'
11 | ) {}
12 |
13 | }
14 |
15 | // export class Hero extends Person {
16 |
17 | // constructor(
18 | // public alterEgo: string,
19 | // public age: number,
20 | // public realName: string,
21 | // ) {
22 | // super( realName, 'New York' );
23 | // }
24 |
25 | // }
26 | export class Hero {
27 |
28 | // public person: Person;
29 |
30 | constructor(
31 | public alterEgo: string,
32 | public age: number,
33 | public realName: string,
34 | public person: Person,
35 | ) {
36 |
37 | // this.person = new Person(realName);
38 |
39 | }
40 |
41 | }
42 |
43 | const tony = new Person('Tony','Stark','New York');
44 |
45 | const ironman = new Hero('Ironman',45,'Tony',tony);
46 |
47 |
48 | console.log(ironman)
49 |
50 |
51 |
--------------------------------------------------------------------------------
/src/topics/03-functions.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 | function addNumbers( a: number, b:number ):number {
4 | return a + b;
5 | }
6 |
7 | const addNumbersArrow = (a: number, b: number ):string => {
8 | return `${ a + b }`;
9 | }
10 |
11 | function multiply( firstNumber: number, secondNumber?: number, base: number = 2 ) {
12 | return firstNumber * base;
13 | }
14 |
15 | // const result: number = addNumbers(1, 2);
16 | // const result2: string = addNumbersArrow(1, 2);
17 | // const multiplyResult: number = multiply(5);
18 | // console.log({ result, result2, multiplyResult })
19 |
20 | interface Character {
21 | name: string;
22 | hp: number;
23 | showHp: () => void;
24 | }
25 |
26 |
27 | const healCharacter = ( character: Character, amount: number ) => {
28 |
29 | character.hp += amount;
30 |
31 | }
32 |
33 | const strider: Character = {
34 | name: 'Strider',
35 | hp: 50,
36 | showHp() {
37 | console.log(`Puntos de vida ${ this.hp }`);
38 | }
39 | }
40 |
41 |
42 | healCharacter( strider, 10 );
43 | healCharacter( strider, 50 );
44 |
45 |
46 | strider.showHp();
47 |
48 | export {};
--------------------------------------------------------------------------------
/src/topics/06-function-destructuring.ts:
--------------------------------------------------------------------------------
1 |
2 | export interface Product {
3 | description: string;
4 | price: number;
5 | }
6 |
7 | // const phone: Product = {
8 | // description: 'Nokia A1',
9 | // price: 150.0
10 | // }
11 |
12 | // const tablet: Product = {
13 | // description: 'iPad Air',
14 | // price: 250.0
15 | // }
16 |
17 |
18 |
19 | interface TaxCalculationOptions {
20 | tax: number;
21 | products: Product[];
22 | }
23 |
24 | // function taxCalculation( options: TaxCalculationOptions ): [number, number] {
25 | // function taxCalculation({ tax, products }: TaxCalculationOptions ): [number, number] {
26 | export function taxCalculation( options: TaxCalculationOptions ): [number, number] {
27 |
28 | const { tax, products } = options;
29 |
30 | let total = 0;
31 |
32 | products.forEach( ({ price }) => {
33 | total += price;
34 | });
35 |
36 | return [total, total * tax ];
37 | }
38 |
39 |
40 |
41 | // const shoppingCart = [phone, tablet];
42 | // const tax = 0.15;
43 |
44 |
45 | // const [ total, taxTotal ] = taxCalculation({
46 | // products: shoppingCart,
47 | // tax: tax,
48 | // });
49 |
50 | // console.log('Total', total );
51 | // console.log('Tax', taxTotal );
52 |
--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------