├── .gitignore ├── Chapter01 ├── calculator │ ├── calculator-safer.js │ ├── calculator-safer.ts │ ├── calculator-unsafe.js │ └── calculator-unsafe.ts └── hello-world │ ├── hello-world.js │ └── hello-world.ts ├── Chapter02 ├── npm-install-example │ ├── package-lock.json │ └── package.json ├── todoit-v1-initial │ ├── package-lock.json │ ├── package.json │ └── tsconfig.json └── todoit-v1 │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── package.json-initial │ ├── todo-it.js │ ├── todo-it.js.map │ ├── todo-it.ts │ ├── tsconfig.json │ └── tsconfig.json-initial ├── Chapter03 ├── todoit-v2 │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── todo-it.js │ ├── todo-it.js.map │ ├── todo-it.ts │ └── tsconfig.json ├── ts-classes │ ├── 01 │ │ ├── ts-classes-car-01-usage.js │ │ ├── ts-classes-car-01-usage.ts │ │ ├── ts-classes-car-01.js │ │ └── ts-classes-car-01.ts │ ├── 02 │ │ ├── ts-classes-car-02.js │ │ └── ts-classes-car-02.ts │ ├── 03 │ │ ├── ts-classes-inheritance-01-usage.js │ │ ├── ts-classes-inheritance-01-usage.ts │ │ ├── ts-classes-inheritance-01.js │ │ └── ts-classes-inheritance-01.ts │ ├── 04 │ │ ├── ts-classes-fluent.js │ │ └── ts-classes-fluent.ts │ ├── package-lock.json │ ├── package.json │ └── tsconfig.json ├── ts-interfaces │ ├── package-lock.json │ ├── package.json │ ├── ts-custom-types-functions.js │ ├── ts-custom-types-functions.ts │ ├── ts-custom-types-interface.js │ ├── ts-custom-types-interface.ts │ ├── ts-custom-types.js │ ├── ts-custom-types.ts │ ├── ts-inline-types.js │ ├── ts-inline-types.ts │ ├── ts-interfaces-01-music-player-usage.js │ ├── ts-interfaces-01-music-player-usage.ts │ ├── ts-interfaces-01-music-player.js │ ├── ts-interfaces-01-music-player.ts │ ├── ts-interfaces-extension.js │ ├── ts-interfaces-extension.ts │ ├── ts-type-alias.js │ ├── ts-type-alias.ts │ └── tsconfig.json └── uml │ ├── todoit-v2-01.png │ ├── todoit-v2-02.png │ ├── uml-00.png │ ├── uml-01.png │ ├── uml-02.png │ ├── uml-03.png │ └── uml-04.png ├── Chapter04 ├── c04-generics-01-array-push.png ├── c04-keyof-autocompletion.png ├── c04-mediaman-design-01.png ├── c04-mediaman-design-02.png ├── c04-mediaman-domain-01.png ├── c04-mediaman-ui-01.png ├── c04-mediaman-ui-02-new-collection.png ├── c04-mediaman-ui-03-side-by-side.png ├── c04-mediaman-ui-04-validation.png ├── c04-mediaman-ui-05-books.png ├── c04-string-literal-types-01.png ├── c04-union-type.png ├── mediaman-v1-initial │ ├── .gitignore │ ├── index.html │ ├── mediaman.css │ ├── mediaman.js │ ├── mediaman.js.map │ ├── mediaman.ts │ ├── package-lock.json │ ├── package.json │ └── tsconfig.json ├── mediaman-v1 │ ├── .gitignore │ ├── index.html │ ├── mediaman.css │ ├── mediaman.d.ts │ ├── mediaman.js │ ├── mediaman.js.map │ ├── mediaman.ts │ ├── package-lock.json │ ├── package.json │ └── tsconfig.json ├── ts-enums │ ├── package-lock.json │ ├── package.json │ ├── ts-enums-01.js │ ├── ts-enums-01.ts │ ├── ts-enums-02-string-enum.js │ ├── ts-enums-02-string-enum.ts │ ├── ts-enums-03-reverse-mapping.js │ ├── ts-enums-03-reverse-mapping.ts │ ├── ts-enums-04-const.js │ ├── ts-enums-04-const.ts │ ├── ts-enums-05-string-literal-types.js │ ├── ts-enums-05-string-literal-types.ts │ └── tsconfig.json ├── ts-generics │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── ts-generics-class.js │ ├── ts-generics-class.ts │ ├── ts-generics-constraints.js │ ├── ts-generics-constraints.ts │ ├── ts-generics-default.js │ ├── ts-generics-default.ts │ ├── ts-generics-interface.js │ ├── ts-generics-interface.ts │ ├── ts-generics-without.js │ ├── ts-generics-without.ts │ ├── ts-generics.js │ ├── ts-generics.ts │ ├── ts-unions.js │ ├── ts-unions.ts │ └── tsconfig.json ├── ts-keyof │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── ts-keyof.ts │ └── tsconfig.json ├── ts-mapped-types │ ├── package-lock.json │ ├── package.json │ ├── ts-mapped.js │ ├── ts-mapped.ts │ └── tsconfig.json └── ts-union-intersection │ ├── package-lock.json │ ├── package.json │ ├── ts-intersection.js │ ├── ts-intersection.ts │ ├── ts-union.js │ ├── ts-union.ts │ └── tsconfig.json ├── Chapter05 ├── asyncawait │ ├── 01-basic │ │ ├── .gitignore │ │ ├── asyncawait-01.js │ │ ├── asyncawait-01.js.map │ │ ├── asyncawait-01.ts │ │ ├── package-lock.json │ │ ├── package.json │ │ └── tsconfig.json │ └── 02-example │ │ ├── .gitignore │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── asyncawait-02.ts │ │ └── index.html │ │ └── tsconfig.json ├── c05-worldexplorer-code-organization-01.png ├── c05-worldexplorer-controllers-01.png ├── c05-worldexplorer-domain-01.png ├── c05-worldexplorer-domain-02-population-svc.png ├── c05-worldexplorer-high-level.png ├── c05-worldexplorer-services-01.png ├── c05-worldexplorer-view-01.png ├── c05-worldexplorer-view-02.png ├── c05-worldexplorer-views-01.png ├── fetch │ ├── 01-basic │ │ ├── .gitignore │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── fetch-example.ts │ │ │ └── index.html │ │ └── tsconfig.json │ └── 02-chaining │ │ ├── .gitignore │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── fetch-example.ts │ │ └── index.html │ │ └── tsconfig.json ├── iots │ ├── .gitignore │ ├── iots-worldbank-example.js │ ├── iots-worldbank-example.ts │ ├── iotsexample.js │ ├── iotsexample.ts │ ├── package-lock.json │ ├── package.json │ └── tsconfig.json ├── modules │ ├── 01-revealing │ │ ├── .gitignore │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── revealing.js │ │ ├── revealing.ts │ │ └── tsconfig.json │ ├── 02-esm │ │ ├── .gitignore │ │ ├── my-module.js │ │ ├── my-module.ts │ │ ├── my-other-module.js │ │ ├── my-other-module.ts │ │ ├── my-utils-module.js │ │ ├── my-utils-module.ts │ │ ├── package-lock.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── 03-ts │ │ ├── .gitignore │ │ ├── my-ambient-module-declaration.js │ │ ├── my-ambient-module-declaration.ts │ │ ├── my-module-with-export-stmt.js │ │ ├── my-module-with-export-stmt.ts │ │ ├── my-module-with-reexports.js │ │ ├── my-module-with-reexports.ts │ │ ├── my-module.js │ │ ├── my-module.ts │ │ ├── my-utils-module.js │ │ ├── my-utils-module.ts │ │ ├── package-lock.json │ │ ├── package.json │ │ └── tsconfig.json │ └── 04-single-export │ │ ├── .gitignore │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── single-export-usage.js │ │ ├── single-export-usage.ts │ │ ├── single-export.js │ │ ├── single-export.ts │ │ └── tsconfig.json ├── worldexplorer-initial │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── index.html │ │ ├── services │ │ │ └── world-bank-api.ts │ │ ├── world-explorer.css │ │ └── world-explorer.ts │ └── tsconfig.json └── worldexplorer-v1 │ ├── .gitignore │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── common │ │ ├── errors │ │ │ ├── index.ts │ │ │ └── unreachable-case-error.ts │ │ └── index.ts │ ├── controllers │ │ ├── index.ts │ │ ├── world-explorer-controller.intf.ts │ │ └── world-explorer-controller.ts │ ├── domain │ │ ├── country.ts │ │ ├── datapoint.ts │ │ └── index.ts │ ├── index.html │ ├── jest.setup.ts │ ├── sanity.test.ts │ ├── services │ │ ├── index.ts │ │ ├── population-service.intf.ts │ │ ├── population-service.test.ts │ │ ├── population-service.ts │ │ └── world-bank-api.ts │ ├── views │ │ ├── chart-details.intf.ts │ │ ├── index.ts │ │ ├── world-explorer-view.intf.ts │ │ └── world-explorer-view.ts │ ├── world-explorer.css │ └── world-explorer.ts │ └── tsconfig.json ├── Chapter06 ├── c06-pyramid-of-tests.png └── worldexplorer-v1 │ ├── .gitignore │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── common │ │ ├── errors │ │ │ ├── index.ts │ │ │ └── unreachable-case-error.ts │ │ └── index.ts │ ├── controllers │ │ ├── index.ts │ │ ├── world-explorer-controller.intf.ts │ │ └── world-explorer-controller.ts │ ├── domain │ │ ├── country.ts │ │ ├── datapoint.ts │ │ └── index.ts │ ├── index.html │ ├── jest.setup.ts │ ├── sanity.test.ts │ ├── services │ │ ├── index.ts │ │ ├── population-service.intf.ts │ │ ├── population-service.test.ts │ │ ├── population-service.ts │ │ └── world-bank-api.ts │ ├── views │ │ ├── chart-details.intf.ts │ │ ├── index.ts │ │ ├── world-explorer-view.intf.ts │ │ └── world-explorer-view.ts │ ├── world-explorer.css │ └── world-explorer.ts │ └── tsconfig.json ├── Chapter07 ├── c07-angular-console-01.png ├── c07-angular-console-02.png ├── c07-angular-console-03.png ├── c07-angular-console-04.png ├── c07-angular-logo.png ├── c07-architecture-01.png ├── c07-augury-01.png ├── c07-augury-02.png ├── c07-components-tree-01.png ├── c07-databinding.png ├── c07-marble-diagram-map.png ├── c07-modules.png ├── c07-ng-cli-01.png ├── cli1 │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.e2e.json │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.html │ │ │ ├── app.component.scss │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── foo │ │ │ │ ├── foo.component.html │ │ │ │ ├── foo.component.scss │ │ │ │ ├── foo.component.spec.ts │ │ │ │ └── foo.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── browserslist │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── karma.conf.js │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.scss │ │ ├── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── tsconfig.json │ └── tslint.json ├── clientlist │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.e2e.json │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── client-card │ │ │ │ ├── client-card.component.css │ │ │ │ ├── client-card.component.spec.ts │ │ │ │ └── client-card.component.ts │ │ │ ├── client-list │ │ │ │ ├── client-list.component.css │ │ │ │ ├── client-list.component.spec.ts │ │ │ │ └── client-list.component.ts │ │ │ └── domain │ │ │ │ └── client.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── browserslist │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── karma.conf.js │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ ├── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── tsconfig.json │ └── tslint.json ├── components-tree-01.json ├── decorators │ ├── .editorconfig │ ├── .gitignore │ ├── 01-cross-cutting.ts │ ├── 02-cross-cutting-cleaner.ts │ ├── 02-cross-cutting-utils.ts │ ├── noise.ts │ ├── package-lock.json │ ├── package.json │ └── tsconfig.json ├── pipexamples │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.e2e.json │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── browserslist │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── karma.conf.js │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ ├── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── tsconfig.json │ └── tslint.json └── rxjs │ ├── .gitignore │ ├── observableFrom.js │ ├── observableFrom.js.map │ ├── observableFrom.ts │ ├── observableFromEvent.js │ ├── observableFromEvent.js.map │ ├── observableFromEvent.ts │ ├── observableOf.js │ ├── observableOf.js.map │ ├── observableOf.ts │ ├── observer.js │ ├── observer.js.map │ ├── observer.ts │ ├── package-lock.json │ ├── package.json │ ├── rxjs-subject.js │ ├── rxjs-subject.js.map │ ├── rxjs-subject.ts │ ├── tsconfig.json │ └── yarn.lock ├── Chapter08 ├── c08-mediaman-v3-view-01.png ├── c08-mediaman-v3-view-02.png ├── c08-mediaman-v3-view-03.png ├── mediaman-v2 │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.e2e.json │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.html │ │ │ ├── app.component.scss │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── book │ │ │ │ ├── book.module.ts │ │ │ │ ├── components │ │ │ │ │ ├── book-list │ │ │ │ │ │ ├── book-list.component.html │ │ │ │ │ │ ├── book-list.component.scss │ │ │ │ │ │ ├── book-list.component.spec.ts │ │ │ │ │ │ └── book-list.component.ts │ │ │ │ │ └── book-new │ │ │ │ │ │ ├── book-new.component.html │ │ │ │ │ │ ├── book-new.component.scss │ │ │ │ │ │ ├── book-new.component.spec.ts │ │ │ │ │ │ └── book-new.component.ts │ │ │ │ ├── entities │ │ │ │ │ └── book.entity.ts │ │ │ │ ├── pages │ │ │ │ │ └── book-page │ │ │ │ │ │ ├── book-page.component.html │ │ │ │ │ │ ├── book-page.component.scss │ │ │ │ │ │ ├── book-page.component.spec.ts │ │ │ │ │ │ └── book-page.component.ts │ │ │ │ └── services │ │ │ │ │ ├── book.service.spec.ts │ │ │ │ │ └── book.service.ts │ │ │ └── shared │ │ │ │ ├── entities │ │ │ │ ├── abstract-media.entity.ts │ │ │ │ └── media-collection.entity.ts │ │ │ │ ├── enums │ │ │ │ └── genre.enum.ts │ │ │ │ ├── services │ │ │ │ └── abstract-media.service.ts │ │ │ │ └── shared.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── browserslist │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── karma.conf.js │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.scss │ │ ├── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── tsconfig.json │ └── tslint.json └── mediaman-v3 │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── book │ │ │ ├── book.module.ts │ │ │ ├── components │ │ │ │ ├── book-list │ │ │ │ │ ├── book-list.component.html │ │ │ │ │ ├── book-list.component.scss │ │ │ │ │ ├── book-list.component.spec.ts │ │ │ │ │ └── book-list.component.ts │ │ │ │ └── book-new │ │ │ │ │ ├── book-new.component.html │ │ │ │ │ ├── book-new.component.scss │ │ │ │ │ ├── book-new.component.spec.ts │ │ │ │ │ └── book-new.component.ts │ │ │ ├── entities │ │ │ │ └── book.entity.ts │ │ │ ├── pages │ │ │ │ └── book-page │ │ │ │ │ ├── book-page.component.html │ │ │ │ │ ├── book-page.component.scss │ │ │ │ │ ├── book-page.component.spec.ts │ │ │ │ │ └── book-page.component.ts │ │ │ └── services │ │ │ │ ├── book.service.spec.ts │ │ │ │ └── book.service.ts │ │ └── shared │ │ │ ├── entities │ │ │ ├── abstract-media.entity.ts │ │ │ └── media-collection.entity.ts │ │ │ ├── enums │ │ │ └── genre.enum.ts │ │ │ ├── services │ │ │ └── abstract-media.service.ts │ │ │ └── shared.module.ts │ ├── assets │ │ └── .gitkeep │ ├── browserslist │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── karma.conf.js │ ├── main.ts │ ├── polyfills.ts │ ├── styles.scss │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json │ ├── tsconfig.json │ └── tslint.json ├── Chapter09 ├── .gitignore ├── 01-hello-vue │ ├── index-01-interpolation.html │ ├── index-02-two-apps.html │ ├── index-03-directive.html │ ├── index-04-if.html │ ├── index-05-for.html │ └── index-06-on.html ├── 02-vue-components │ ├── index-01-todo.html │ ├── index-02-todo-loop.html │ ├── index-03-todo-complex-input-prop.html │ └── index-04-listen-to-events.html ├── 03-vue-filters │ └── index-01-filter.html ├── 04-vue-cli │ └── 01-empty │ │ ├── .browserslistrc │ │ ├── .gitignore │ │ ├── README.md │ │ ├── cypress.json │ │ ├── jest.config.js │ │ ├── package.json │ │ ├── postcss.config.js │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ ├── main.ts │ │ ├── shims-tsx.d.ts │ │ └── shims-vue.d.ts │ │ ├── tests │ │ ├── e2e │ │ │ ├── plugins │ │ │ │ └── index.js │ │ │ ├── specs │ │ │ │ └── test.js │ │ │ └── support │ │ │ │ ├── commands.js │ │ │ │ └── index.js │ │ └── unit │ │ │ └── example.spec.ts │ │ ├── tsconfig.json │ │ ├── tslint.json │ │ └── yarn.lock ├── 05-vue-ts-split │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── cypress.json │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── example.html │ │ │ └── example.ts │ │ ├── main.ts │ │ ├── shims-html.d.ts │ │ ├── shims-tsx.d.ts │ │ └── shims-vue.d.ts │ ├── tsconfig.json │ ├── tslint.json │ ├── vue.config.js │ └── yarn.lock ├── 05-vue-ts │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── cypress.json │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── ExampleSFC.vue │ │ ├── main.ts │ │ ├── shims-tsx.d.ts │ │ └── shims-vue.d.ts │ ├── tests │ │ ├── e2e │ │ │ ├── plugins │ │ │ │ └── index.js │ │ │ ├── specs │ │ │ │ └── test.js │ │ │ └── support │ │ │ │ ├── commands.js │ │ │ │ └── index.js │ │ └── unit │ │ │ └── example.spec.ts │ ├── tsconfig.json │ ├── tslint.json │ └── yarn.lock ├── 06-vue-injection-basic │ ├── .browserslistrc │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── AppMenu.vue │ │ │ ├── Content.vue │ │ │ ├── PageFooter.vue │ │ │ ├── PageHeader.vue │ │ │ ├── Settings.vue │ │ │ └── UserSettings.vue │ │ ├── main.ts │ │ ├── shims-tsx.d.ts │ │ └── shims-vue.d.ts │ ├── tsconfig.json │ └── vue.config.js ├── 07-vue-injection-inversify │ ├── .browserslistrc │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── DriverSFC.vue │ │ ├── domain │ │ │ ├── calm-driver.ts │ │ │ ├── car.ts │ │ │ ├── crazy-driver.ts │ │ │ ├── driver.ts │ │ │ ├── loud-car.ts │ │ │ └── silent-car.ts │ │ ├── ioc-config.ts │ │ ├── ioc-tags.ts │ │ ├── ioc-types.ts │ │ ├── main.ts │ │ ├── shims-tsx.d.ts │ │ └── shims-vue.d.ts │ ├── tsconfig.json │ └── vue.config.js ├── 08-vue-injection-inversify-improved │ ├── .browserslistrc │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── DriverSFC.vue │ │ ├── domain │ │ │ ├── calm-driver.ts │ │ │ ├── car.ts │ │ │ ├── crazy-driver.ts │ │ │ ├── driver.ts │ │ │ ├── loud-car.ts │ │ │ └── silent-car.ts │ │ ├── ioc-config.ts │ │ ├── ioc-tags.ts │ │ ├── ioc-types.ts │ │ ├── main.ts │ │ ├── shims-tsx.d.ts │ │ └── shims-vue.d.ts │ └── tsconfig.json ├── README.md ├── c09-components.png ├── c09-lifecycle-hooks.png ├── c09-lyicsfinder-router-dev-tools.png ├── c09-redux-logo.png ├── c09-state-management-redux-pattern-details.drawio ├── c09-state-management-redux-pattern-details.png ├── c09-state-management-redux-pattern.png ├── c09-state-management-redux-pattern.xml ├── c09-state-management-redux.drawio ├── c09-state-management-redux.png ├── c09-state-management-via-props.drawio ├── c09-state-management-via-props.png ├── c09-state-management-vuex.png ├── c09-vue-cli-ui-configuration.png ├── c09-vue-cli-ui-dependencies.png ├── c09-vue-cli-ui-plugins.png ├── c09-vue-cli-ui-tasks-build.png ├── c09-vue-cli-ui-tasks-serve.png ├── c09-vue-cli-ui.png ├── c09-vue-dev-tools-chrome-01.png ├── c09-vue-dev-tools-chrome-02.png ├── c09-vue-dev-tools-chrome-03.png ├── c09-vue-logo.png ├── mixins │ └── index-01-mixin-basic.html ├── render-functions │ └── index-01-render-function.html └── symbols │ ├── .gitignore │ ├── 01-basic.ts │ ├── 02-symbol-as-object-key.ts │ ├── 03-symbol-with-description.ts │ ├── package.json │ └── tsconfig.json ├── Chapter10 ├── c10-lyricsfinder-design.png ├── c10-lyricsfinder-home-01.png ├── c10-lyricsfinder-home-02.png ├── c10-lyricsfinder-router-dev-tools-routes.png ├── c10-lyricsfinder-router.png ├── lyricsfinder-initial │ ├── .browserslistrc │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── cypress.json │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── api-key.ts │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── .gitkeep │ │ ├── domain │ │ │ ├── .gitkeep │ │ │ ├── artist.spec.ts │ │ │ ├── artist.ts │ │ │ ├── index.ts │ │ │ ├── song-lyrics.spec.ts │ │ │ ├── song-lyrics.ts │ │ │ ├── song.spec.ts │ │ │ └── song.ts │ │ ├── ioc │ │ │ ├── config.ts │ │ │ └── types.ts │ │ ├── locale.d.ts │ │ ├── main.ts │ │ ├── mixins │ │ │ └── .gitkeep │ │ ├── polyfills.ts │ │ ├── router │ │ │ └── router.ts │ │ ├── services │ │ │ ├── .gitkeep │ │ │ ├── axios-utils.ts │ │ │ ├── index.ts │ │ │ ├── music-service.intf.ts │ │ │ ├── music-service.spec.ts │ │ │ ├── music-service.ts │ │ │ └── musixmatch-api.ts │ │ ├── shims-html.d.ts │ │ ├── shims-tsx.d.ts │ │ ├── shims-vue.d.ts │ │ ├── store │ │ │ └── .gitkeep │ │ ├── styles │ │ │ └── lyricsfinder.css │ │ └── views │ │ │ └── .gitkeep │ ├── tests │ │ ├── e2e │ │ │ └── plugins │ │ │ │ └── index.js │ │ └── unit │ │ │ └── example.spec.ts │ ├── tsconfig.json │ ├── tslint.json │ └── vue.config.js └── lyricsfinder-v1 │ ├── .browserslistrc │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── cypress.json │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── api-key.ts │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── .gitkeep │ │ ├── Search.vue │ │ └── SongsList.vue │ ├── domain │ │ ├── .gitkeep │ │ ├── artist.spec.ts │ │ ├── artist.ts │ │ ├── index.ts │ │ ├── song-lyrics.spec.ts │ │ ├── song-lyrics.ts │ │ ├── song.spec.ts │ │ └── song.ts │ ├── ioc │ │ ├── config.ts │ │ └── types.ts │ ├── locale.d.ts │ ├── main.ts │ ├── mixins │ │ └── .gitkeep │ ├── polyfills.ts │ ├── router │ │ └── router.ts │ ├── services │ │ ├── .gitkeep │ │ ├── axios-utils.ts │ │ ├── index.ts │ │ ├── music-service.intf.ts │ │ ├── music-service.spec.ts │ │ ├── music-service.ts │ │ └── musixmatch-api.ts │ ├── shims-html.d.ts │ ├── shims-tsx.d.ts │ ├── shims-vue.d.ts │ ├── store │ │ └── .gitkeep │ ├── styles │ │ └── lyricsfinder.css │ └── views │ │ ├── .gitkeep │ │ ├── Home.vue │ │ └── Lyrics.vue │ ├── tests │ ├── e2e │ │ └── plugins │ │ │ └── index.js │ └── unit │ │ └── example.spec.ts │ ├── tsconfig.json │ ├── tslint.json │ └── vue.config.js ├── Chapter11 ├── 01-hello-react │ ├── hello-react.js │ ├── index.html │ └── lib │ │ ├── react-dom.development.js │ │ └── react.development.js ├── 02-react-element │ ├── index.html │ ├── lib │ │ ├── react-dom.development.js │ │ └── react.development.js │ └── react-element.js ├── 03-react-element-immutable │ ├── index.html │ ├── lib │ │ ├── react-dom.development.js │ │ └── react.development.js │ └── react-element.js ├── 03-ts-object-destructuring │ ├── .gitignore │ ├── package.json │ ├── ts-object-destructuring-01.ts │ └── tsconfig.json ├── 04-react-component-state │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Calculator.js │ │ ├── index.css │ │ ├── index.js │ │ └── serviceWorker.js │ └── yarn.lock ├── 05-react-lifecycle-hook-class │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── LifecycleAwareComponent.js │ │ ├── index.css │ │ ├── index.js │ │ └── serviceWorker.js │ └── yarn.lock ├── 06-react-hooks │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Switch.js │ │ ├── SwitchWithAlert.js │ │ ├── index.css │ │ ├── index.js │ │ └── serviceWorker.js │ └── yarn.lock ├── 07-react-render-props │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── ChildComponent.js │ │ ├── ParentComponent.js │ │ ├── index.css │ │ ├── index.js │ │ └── serviceWorker.js │ └── yarn.lock ├── 08-react-holes │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Gruyere.js │ │ ├── index.css │ │ ├── index.js │ │ └── serviceWorker.js │ └── yarn.lock ├── 09-create-react-app-example │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js │ └── yarn.lock ├── 10-create-react-app-typescript │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ └── serviceWorker.ts │ ├── tsconfig.json │ └── yarn.lock ├── 11-react-typescript-basics │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── Header.tsx │ │ ├── customizable-button.tsx │ │ ├── hello-world-ts-functional-component.tsx │ │ ├── hello-world.tsx │ │ ├── index.tsx │ │ ├── react-app-env.d.ts │ │ ├── serviceWorker.ts │ │ ├── switch-with-alert.tsx │ │ ├── switch.tsx │ │ ├── todo-item.tsx │ │ └── todo-list.tsx │ ├── tsconfig.json │ └── yarn.lock ├── 12-nest │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── nest-cli.json │ ├── nodemon-debug.json │ ├── nodemon.json │ ├── package.json │ ├── src │ │ ├── app.controller.spec.ts │ │ ├── app.controller.ts │ │ ├── app.module.ts │ │ ├── app.service.ts │ │ ├── helloworld │ │ │ ├── hello │ │ │ │ ├── hello.controller.spec.ts │ │ │ │ └── hello.controller.ts │ │ │ └── helloworld.module.ts │ │ └── main.ts │ ├── test │ │ ├── app.e2e-spec.ts │ │ └── jest-e2e.json │ ├── tsconfig.build.json │ ├── tsconfig.json │ ├── tslint.json │ └── yarn.lock ├── c11-nest-controllers.png ├── c11-react-developer-tools-01.png ├── c11-react-lifecycle-hooks.png └── c11-react-logo.png ├── Chapter12 ├── c12-lfv2-01-jumbotron-button.png ├── c12-lfv2-02-search.png ├── c12-lfv2-03-graphql-playground.png ├── c12-lfv2-04-graphql-playground-songs.png ├── c12-lfv2-schema.drawio ├── c12-lfv2-schema.png ├── lyricsfinder-v2-initial │ ├── .gitignore │ ├── backend │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── nest-cli.json │ │ ├── nodemon-debug.json │ │ ├── nodemon.json │ │ ├── package.json │ │ ├── src │ │ │ ├── api-key.ts │ │ │ ├── app.controller.spec.ts │ │ │ ├── app.controller.ts │ │ │ ├── app.module.ts │ │ │ ├── app.service.ts │ │ │ ├── main.ts │ │ │ └── musixmatch │ │ │ │ ├── domain │ │ │ │ ├── .gitkeep │ │ │ │ ├── artist.spec.ts │ │ │ │ ├── artist.ts │ │ │ │ ├── index.ts │ │ │ │ ├── song-lyrics.spec.ts │ │ │ │ ├── song-lyrics.ts │ │ │ │ ├── song.spec.ts │ │ │ │ └── song.ts │ │ │ │ ├── index.ts │ │ │ │ ├── ioc │ │ │ │ └── types.ts │ │ │ │ ├── musixmatch.module.ts │ │ │ │ └── services │ │ │ │ ├── .gitkeep │ │ │ │ ├── axios-utils.ts │ │ │ │ ├── index.ts │ │ │ │ ├── music-service.intf.ts │ │ │ │ ├── music-service.spec.ts │ │ │ │ ├── music-service.ts │ │ │ │ └── musixmatch-api.ts │ │ ├── tsconfig.build.json │ │ ├── tsconfig.json │ │ ├── tslint.json │ │ └── yarn.lock │ └── frontend │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ └── serviceWorker.ts │ │ ├── tsconfig.json │ │ └── yarn.lock └── lyricsfinder-v2 │ ├── backend │ ├── .gitignore │ ├── .npmrc │ ├── .prettierrc │ ├── README.md │ ├── nest-cli.json │ ├── nodemon-debug.json │ ├── nodemon.json │ ├── package.json │ ├── schema.gql │ ├── src │ │ ├── api-key.ts │ │ ├── app.controller.spec.ts │ │ ├── app.controller.ts │ │ ├── app.module.ts │ │ ├── app.service.ts │ │ ├── artist │ │ │ ├── artist.dto.ts │ │ │ ├── artist.module.ts │ │ │ └── artist.resolver.ts │ │ ├── main.ts │ │ ├── musixmatch │ │ │ ├── domain │ │ │ │ ├── .gitkeep │ │ │ │ ├── artist.spec.ts │ │ │ │ ├── artist.ts │ │ │ │ ├── index.ts │ │ │ │ ├── song-lyrics.spec.ts │ │ │ │ ├── song-lyrics.ts │ │ │ │ ├── song.spec.ts │ │ │ │ └── song.ts │ │ │ ├── index.ts │ │ │ ├── ioc │ │ │ │ └── types.ts │ │ │ ├── musixmatch.module.ts │ │ │ └── services │ │ │ │ ├── .gitkeep │ │ │ │ ├── axios-utils.ts │ │ │ │ ├── index.ts │ │ │ │ ├── music-service.intf.ts │ │ │ │ ├── music-service.spec.ts │ │ │ │ ├── music-service.ts │ │ │ │ └── musixmatch-api.ts │ │ ├── song-lyrics │ │ │ ├── song-lyrics.dto.ts │ │ │ ├── song-lyrics.module.ts │ │ │ └── song-lyrics.resolver.ts │ │ └── song │ │ │ ├── song.dto.ts │ │ │ ├── song.module.ts │ │ │ └── song.resolver.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ ├── tslint.json │ └── yarn.lock │ └── frontend │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── components │ │ ├── search.tsx │ │ └── songs-list.tsx │ ├── generated │ │ ├── FindArtists.ts │ │ ├── FindLyrics.ts │ │ └── FindSongs.ts │ ├── graphql │ │ └── queries.ts │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── pages │ │ ├── home.tsx │ │ └── lyrics.tsx │ ├── react-app-env.d.ts │ └── serviceWorker.ts │ ├── tsconfig.json │ └── yarn.lock ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | -------------------------------------------------------------------------------- /Chapter01/calculator/calculator-safer.js: -------------------------------------------------------------------------------- 1 | function multiply(a, b) { 2 | var result = a * b; 3 | console.log("The multiplication of " + a + "*" + b + " equals to " + result); 4 | return result; 5 | } 6 | multiply(1, 2); 7 | multiply(2, 2); 8 | multiply(-10, 10); 9 | multiply("foo", 'bar'); 10 | -------------------------------------------------------------------------------- /Chapter01/calculator/calculator-safer.ts: -------------------------------------------------------------------------------- 1 | function multiply(a: number, b: number) { 2 | const result: number = a * b; 3 | console.log(`The multiplication of ${a}*${b} equals to ${result}`); 4 | return result; 5 | } 6 | 7 | multiply(1, 2); 8 | multiply(2,2); 9 | multiply(-10,10); 10 | multiply("foo", 'bar'); 11 | -------------------------------------------------------------------------------- /Chapter01/calculator/calculator-unsafe.js: -------------------------------------------------------------------------------- 1 | function multiply(a, b) { 2 | var result = a * b; 3 | console.log("The multiplication of " + a + "*" + b + " equals to : " + result); 4 | return result; 5 | } 6 | multiply(1, 2); 7 | multiply(2, 2); 8 | multiply(-10, 10); 9 | //multiply('foo', "bar"); 10 | -------------------------------------------------------------------------------- /Chapter01/calculator/calculator-unsafe.ts: -------------------------------------------------------------------------------- 1 | function multiply(a, b) { 2 | const result = a * b; 3 | console.log("The multiplication of "+a+"*"+b+" equals to : "+result); 4 | return result; 5 | } 6 | 7 | multiply(1, 2); 8 | multiply(2,2); 9 | multiply(-10,10); 10 | //multiply('foo', "bar"); 11 | -------------------------------------------------------------------------------- /Chapter01/hello-world/hello-world.js: -------------------------------------------------------------------------------- 1 | var hello = "Hello world"; 2 | function say(something) { 3 | console.log(something); 4 | } 5 | say(hello); 6 | -------------------------------------------------------------------------------- /Chapter01/hello-world/hello-world.ts: -------------------------------------------------------------------------------- 1 | var hello = "Hello world"; 2 | 3 | function say(something) { 4 | console.log(something); 5 | } 6 | 7 | say(hello); 8 | 9 | -------------------------------------------------------------------------------- /Chapter02/npm-install-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "npm-install-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "dSebastien (https://www.dsebastien.net)", 10 | "dependencies": { 11 | "lodash": "4.17.11" 12 | }, 13 | "devDependencies": { 14 | "karma": "3.0.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Chapter02/todoit-v1-initial/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todoit-v1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "devDependencies": { 7 | "typescript": "3.1.1" 8 | }, 9 | "scripts": { 10 | "tsc": "tsc" 11 | }, 12 | "author": "dSebastien (https://www.dsebastien.net)", 13 | "license": "MIT" 14 | } 15 | -------------------------------------------------------------------------------- /Chapter02/todoit-v1/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /Chapter02/todoit-v1/package.json-initial: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todoit-v1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "dSebastien (https://www.dsebastien.net)", 10 | "license": "MIT" 11 | } 12 | -------------------------------------------------------------------------------- /Chapter03/todoit-v2/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /Chapter03/ts-classes/01/ts-classes-car-01-usage.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var car = new Car(); 3 | -------------------------------------------------------------------------------- /Chapter03/ts-classes/01/ts-classes-car-01-usage.ts: -------------------------------------------------------------------------------- 1 | let car: Car = new Car(); 2 | -------------------------------------------------------------------------------- /Chapter03/ts-classes/01/ts-classes-car-01.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var Car = /** @class */ (function () { 3 | function Car() { 4 | } 5 | return Car; 6 | }()); 7 | -------------------------------------------------------------------------------- /Chapter03/ts-classes/01/ts-classes-car-01.ts: -------------------------------------------------------------------------------- 1 | class Car { 2 | 3 | } -------------------------------------------------------------------------------- /Chapter03/ts-classes/03/ts-classes-inheritance-01-usage.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var square = new Square(5); 3 | square.displayArea(); 4 | square.displayPerimeter(); 5 | square.displayPerimeter(); 6 | square.doSomething(); 7 | var shape = new Square(10); 8 | shape.doSomething(); 9 | -------------------------------------------------------------------------------- /Chapter03/ts-classes/03/ts-classes-inheritance-01-usage.ts: -------------------------------------------------------------------------------- 1 | let square:Square = new Square(5); 2 | square.displayArea(); 3 | square.displayPerimeter(); 4 | square.displayPerimeter(); 5 | square.doSomething(); 6 | 7 | let shape:Shape = new Square(10); 8 | shape.doSomething(); -------------------------------------------------------------------------------- /Chapter03/ts-classes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts-classes", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "dSebastien (https://www.dsebastien.net)", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "3.1.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts-interfaces", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "dSebastien (https://www.dsebastien.net)", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "3.1.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-custom-types-functions.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | function performCalculation(a, b, calculationFn) { 3 | console.log("The result is " + calculationFn(a, b)); 4 | } 5 | performCalculation(5, 10, function (x, y) { return x + y; }); 6 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-custom-types-functions.ts: -------------------------------------------------------------------------------- 1 | function performCalculation( 2 | a: number, 3 | b: number, 4 | calculationFn: (x: number, y: number) => number 5 | ): void { 6 | console.log(`The result is ${calculationFn(a, b)}`); 7 | } 8 | 9 | performCalculation( 10 | 5, 11 | 10, 12 | (x: number, y: number) => x + y 13 | ); -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-custom-types-interface.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | function sayHelloTo(bar) { 3 | console.log("Hello " + bar.firstName + ".. or should I call you Mr " + bar.lastName + "?"); 4 | } 5 | var persjohnDoeon = { 6 | firstName: "John", 7 | lastName: "Doe", 8 | age: 42 9 | }; 10 | sayHelloTo(johnDoe); 11 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-custom-types-interface.ts: -------------------------------------------------------------------------------- 1 | interface Person { 2 | firstName: string, 3 | lastName: string, 4 | age: number 5 | } 6 | 7 | function sayHelloTo(bar: Person): void { 8 | console.log(`Hello ${bar.firstName}.. or should I call you Mr ${bar.lastName}?`); 9 | } 10 | 11 | let persjohnDoeon: Person = { 12 | firstName: "John", 13 | lastName: "Doe", 14 | age: 42 15 | }; 16 | 17 | sayHelloTo(johnDoe); 18 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-custom-types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | function foo(bar) { 3 | console.log("Hello " + bar.firstName + ".. or should I call you Mr " + bar.lastName + "?"); 4 | } 5 | foo({ 6 | firstName: "Sebastien", 7 | lastName: "Dubois" 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-custom-types.ts: -------------------------------------------------------------------------------- 1 | function foo(bar: { firstName: string, lastName: string}): void { 2 | console.log(`Hello ${bar.firstName}.. or should I call you Mr ${bar.lastName}?`); 3 | } 4 | 5 | foo({ 6 | firstName: "Sebastien", 7 | lastName: "Dubois" 8 | }); -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-inline-types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var plane = { 3 | name: "Plane", 4 | description: "Something that flies" 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-inline-types.ts: -------------------------------------------------------------------------------- 1 | const plane: { 2 | name: string, 3 | description: string 4 | } = { 5 | name: "Plane", 6 | description: "Something that flies" 7 | }; 8 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-interfaces-01-music-player.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-interfaces-01-music-player.ts: -------------------------------------------------------------------------------- 1 | interface MusicPlayer { 2 | play(): void; 3 | pause(): void; 4 | stop(): void; 5 | rewind(seconds: number): void; 6 | fastForward(seconds: number): void; 7 | } 8 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-interfaces-extension.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-interfaces-extension.ts: -------------------------------------------------------------------------------- 1 | interface Club { 2 | name: string; 3 | logoLocation: string; 4 | 5 | isActive(): boolean; 6 | } 7 | 8 | interface SoccerClub extends Club { 9 | league: string; 10 | } -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-type-alias.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // usage: 3 | var myThing = { 4 | name: "Computer", 5 | description: "A thing that can perform calculations" 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter03/ts-interfaces/ts-type-alias.ts: -------------------------------------------------------------------------------- 1 | type Thing = { 2 | name: string 3 | description: string 4 | }; 5 | 6 | // usage: 7 | const myThing: Thing = { 8 | name: "Computer", 9 | description: "A thing that can perform calculations" 10 | }; 11 | -------------------------------------------------------------------------------- /Chapter03/uml/todoit-v2-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter03/uml/todoit-v2-01.png -------------------------------------------------------------------------------- /Chapter03/uml/todoit-v2-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter03/uml/todoit-v2-02.png -------------------------------------------------------------------------------- /Chapter03/uml/uml-00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter03/uml/uml-00.png -------------------------------------------------------------------------------- /Chapter03/uml/uml-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter03/uml/uml-01.png -------------------------------------------------------------------------------- /Chapter03/uml/uml-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter03/uml/uml-02.png -------------------------------------------------------------------------------- /Chapter03/uml/uml-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter03/uml/uml-03.png -------------------------------------------------------------------------------- /Chapter03/uml/uml-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter03/uml/uml-04.png -------------------------------------------------------------------------------- /Chapter04/c04-generics-01-array-push.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-generics-01-array-push.png -------------------------------------------------------------------------------- /Chapter04/c04-keyof-autocompletion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-keyof-autocompletion.png -------------------------------------------------------------------------------- /Chapter04/c04-mediaman-design-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-mediaman-design-01.png -------------------------------------------------------------------------------- /Chapter04/c04-mediaman-design-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-mediaman-design-02.png -------------------------------------------------------------------------------- /Chapter04/c04-mediaman-domain-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-mediaman-domain-01.png -------------------------------------------------------------------------------- /Chapter04/c04-mediaman-ui-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-mediaman-ui-01.png -------------------------------------------------------------------------------- /Chapter04/c04-mediaman-ui-02-new-collection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-mediaman-ui-02-new-collection.png -------------------------------------------------------------------------------- /Chapter04/c04-mediaman-ui-03-side-by-side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-mediaman-ui-03-side-by-side.png -------------------------------------------------------------------------------- /Chapter04/c04-mediaman-ui-04-validation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-mediaman-ui-04-validation.png -------------------------------------------------------------------------------- /Chapter04/c04-mediaman-ui-05-books.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-mediaman-ui-05-books.png -------------------------------------------------------------------------------- /Chapter04/c04-string-literal-types-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-string-literal-types-01.png -------------------------------------------------------------------------------- /Chapter04/c04-union-type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter04/c04-union-type.png -------------------------------------------------------------------------------- /Chapter04/mediaman-v1-initial/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode -------------------------------------------------------------------------------- /Chapter04/mediaman-v1-initial/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MediaMan 6 | 7 | 8 | 9 |

MediaMan

10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Chapter04/mediaman-v1-initial/mediaman.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | console.log("MediaMan - Loading..."); 3 | console.log("MediaMan loaded"); 4 | //# sourceMappingURL=mediaman.js.map -------------------------------------------------------------------------------- /Chapter04/mediaman-v1-initial/mediaman.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"mediaman.js","sourceRoot":"","sources":["mediaman.ts"],"names":[],"mappings":";AAAA,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;AAErC,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC"} -------------------------------------------------------------------------------- /Chapter04/mediaman-v1-initial/mediaman.ts: -------------------------------------------------------------------------------- 1 | console.log("MediaMan - Loading..."); 2 | 3 | console.log("MediaMan loaded"); 4 | -------------------------------------------------------------------------------- /Chapter04/mediaman-v1/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode -------------------------------------------------------------------------------- /Chapter04/mediaman-v1/mediaman.d.ts: -------------------------------------------------------------------------------- 1 | import "reflect-metadata"; 2 | -------------------------------------------------------------------------------- /Chapter04/ts-enums/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts-interfaces", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "dSebastien (https://www.dsebastien.net)", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "3.1.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter04/ts-enums/ts-enums-01.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var VehicleType; 3 | (function (VehicleType) { 4 | VehicleType[VehicleType["Car"] = 0] = "Car"; 5 | VehicleType[VehicleType["Bus"] = 1] = "Bus"; 6 | VehicleType[VehicleType["Train"] = 2] = "Train"; 7 | })(VehicleType || (VehicleType = {})); 8 | var myVehicleType = VehicleType.Car; 9 | console.log("My vehicle type: ", myVehicleType); 10 | -------------------------------------------------------------------------------- /Chapter04/ts-enums/ts-enums-01.ts: -------------------------------------------------------------------------------- 1 | enum VehicleType { 2 | Car, 3 | Bus, 4 | Train 5 | } 6 | 7 | let myVehicleType = VehicleType.Car; 8 | 9 | console.log("My vehicle type: ", myVehicleType); 10 | -------------------------------------------------------------------------------- /Chapter04/ts-enums/ts-enums-02-string-enum.ts: -------------------------------------------------------------------------------- 1 | enum TShirtType { 2 | CrewNeck = "Crew Neck", // must be initialized with a constant 3 | VNeck = "V Neck", 4 | Henley = "Henley", 5 | Polo = "Polo", 6 | SpecialPolo = Polo, // may be initialized with another entry 7 | ScoopNeck = "Scoop Neck" 8 | } 9 | 10 | let myTShirtType = TShirtType.CrewNeck; 11 | 12 | console.log("My T-Shirt type: ", myTShirtType); -------------------------------------------------------------------------------- /Chapter04/ts-enums/ts-enums-03-reverse-mapping.ts: -------------------------------------------------------------------------------- 1 | enum Month { 2 | January, 3 | February, 4 | March, 5 | April, 6 | May, 7 | June, 8 | July, 9 | August, 10 | September, 11 | October, 12 | November, 13 | December, 14 | } 15 | 16 | const june: Month = Month.June; 17 | const nameOfJuneEntry: string = Month[june]; 18 | 19 | console.log(nameOfJuneEntry); // June -------------------------------------------------------------------------------- /Chapter04/ts-enums/ts-enums-04-const.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | console.log(0 /* A */); // 0 3 | -------------------------------------------------------------------------------- /Chapter04/ts-enums/ts-enums-04-const.ts: -------------------------------------------------------------------------------- 1 | const enum TransientEnum { 2 | A, 3 | B 4 | } 5 | 6 | console.log(TransientEnum.A); // 0 7 | -------------------------------------------------------------------------------- /Chapter04/ts-enums/ts-enums-05-string-literal-types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var myCurrentMood = "Great"; // may only be assigned values part of the Mood union! 3 | -------------------------------------------------------------------------------- /Chapter04/ts-enums/ts-enums-05-string-literal-types.ts: -------------------------------------------------------------------------------- 1 | type Mood = "Great" | "Good" | "Bad" | "Awful"; 2 | 3 | const myCurrentMood: Mood = "Great"; // may only be assigned values part of the Mood union! 4 | -------------------------------------------------------------------------------- /Chapter04/ts-generics/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /Chapter04/ts-generics/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts-generics", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "dSebastien (https://www.dsebastien.net)", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "3.1.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter04/ts-generics/ts-generics-default.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var ClassWithDefaultGenericType = /** @class */ (function () { 3 | function ClassWithDefaultGenericType(something) { 4 | this.something = something; 5 | } 6 | return ClassWithDefaultGenericType; 7 | }()); 8 | -------------------------------------------------------------------------------- /Chapter04/ts-generics/ts-generics-default.ts: -------------------------------------------------------------------------------- 1 | interface InterfaceWithDefaultGenericType { 2 | doSomething(arg: T): T 3 | } 4 | 5 | class ClassWithDefaultGenericType { 6 | constructor(public something: T) {} 7 | } 8 | 9 | interface InterfaceWithSpecializedGenericType { 10 | doSomethingElse(arg: T): T 11 | } -------------------------------------------------------------------------------- /Chapter04/ts-generics/ts-generics-interface.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | -------------------------------------------------------------------------------- /Chapter04/ts-generics/ts-generics-interface.ts: -------------------------------------------------------------------------------- 1 | interface Logger { 2 | debug(arg: T): T 3 | info(arg: T): T 4 | warn(arg: T): T 5 | error(arg: T): T 6 | fatal(arg: T): T 7 | } 8 | 9 | interface BasicLogger { 10 | log(arg: T): T 11 | } 12 | -------------------------------------------------------------------------------- /Chapter04/ts-generics/ts-generics-without.ts: -------------------------------------------------------------------------------- 1 | class Animal { 2 | constructor (public name: string) {} 3 | } 4 | 5 | class Dog extends Animal { 6 | constructor(name: string, public breed: string) { 7 | super(name); 8 | } 9 | } 10 | 11 | class Person { 12 | constructor(public firstName: string, public lastName: string){} 13 | } 14 | -------------------------------------------------------------------------------- /Chapter04/ts-generics/ts-unions.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var entries = []; 3 | entries.push(new Dog("Pluto", "Bloodhound")); 4 | entries.push(new Person("John", "Doe")); 5 | for (var entry = void 0, i = 0; i < entries.length; i++) { 6 | entry = entries[i]; 7 | console.log(entry); 8 | } 9 | -------------------------------------------------------------------------------- /Chapter04/ts-generics/ts-unions.ts: -------------------------------------------------------------------------------- 1 | let entries: Array = []; 2 | 3 | entries.push(new Dog("Pluto", "Bloodhound")); 4 | entries.push(new Person("John", "Doe")); 5 | 6 | for(let entry: Person | Animal, i:number=0; i < entries.length; i++) { 7 | entry = entries[i]; 8 | console.log(entry); 9 | } 10 | -------------------------------------------------------------------------------- /Chapter04/ts-keyof/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.js 3 | -------------------------------------------------------------------------------- /Chapter04/ts-keyof/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts-keyof", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "dSebastien (https://www.dsebastien.net)", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "3.1.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter04/ts-mapped-types/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts-mapped-types", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "dSebastien (https://www.dsebastien.net)", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "3.1.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter04/ts-mapped-types/ts-mapped.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var thing = { 3 | name: "The thing" 4 | }; 5 | var thingName = thing.name; 6 | var nullableThing = { 7 | name: "The thing" 8 | }; 9 | var nullableThingName = nullableThing.name; 10 | -------------------------------------------------------------------------------- /Chapter04/ts-mapped-types/ts-mapped.ts: -------------------------------------------------------------------------------- 1 | type Nullable = { 2 | [P in keyof T]: T[P] | null 3 | }; 4 | 5 | interface Thing { 6 | name: string 7 | } 8 | 9 | const thing: Thing = { 10 | name: "The thing" 11 | }; 12 | 13 | const thingName = thing.name; 14 | 15 | 16 | const nullableThing: Nullable = { 17 | name: "The thing" 18 | }; 19 | 20 | const nullableThingName: string | null = nullableThing.name; 21 | -------------------------------------------------------------------------------- /Chapter04/ts-union-intersection/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts-union-intersection", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "dSebastien (https://www.dsebastien.net)", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "3.1.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter04/ts-union-intersection/ts-intersection.js: -------------------------------------------------------------------------------- 1 | function displayPerson(person) { 2 | console.log(person.name + " lives in " + person.country); 3 | } 4 | var person = { 5 | name: "Foo", 6 | age: 42, 7 | street: "UnknownStreet", 8 | streetNumber: 1, 9 | postalCode: 1337, 10 | town: "UnknownTown", 11 | country: "Bar" 12 | }; 13 | displayPerson(person); // Foo lives in Bar 14 | -------------------------------------------------------------------------------- /Chapter04/ts-union-intersection/ts-union.js: -------------------------------------------------------------------------------- 1 | function displayGame(game) { 2 | console.log("Game name: " + game.name); 3 | } 4 | -------------------------------------------------------------------------------- /Chapter05/asyncawait/01-basic/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /Chapter05/asyncawait/02-example/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode 5 | .tmp -------------------------------------------------------------------------------- /Chapter05/asyncawait/02-example/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Async Await 6 | 7 | 8 | 9 |

Async Await

10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Chapter05/c05-worldexplorer-code-organization-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter05/c05-worldexplorer-code-organization-01.png -------------------------------------------------------------------------------- /Chapter05/c05-worldexplorer-controllers-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter05/c05-worldexplorer-controllers-01.png -------------------------------------------------------------------------------- /Chapter05/c05-worldexplorer-domain-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter05/c05-worldexplorer-domain-01.png -------------------------------------------------------------------------------- /Chapter05/c05-worldexplorer-domain-02-population-svc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter05/c05-worldexplorer-domain-02-population-svc.png -------------------------------------------------------------------------------- /Chapter05/c05-worldexplorer-high-level.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter05/c05-worldexplorer-high-level.png -------------------------------------------------------------------------------- /Chapter05/c05-worldexplorer-services-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter05/c05-worldexplorer-services-01.png -------------------------------------------------------------------------------- /Chapter05/c05-worldexplorer-view-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter05/c05-worldexplorer-view-01.png -------------------------------------------------------------------------------- /Chapter05/c05-worldexplorer-view-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter05/c05-worldexplorer-view-02.png -------------------------------------------------------------------------------- /Chapter05/c05-worldexplorer-views-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter05/c05-worldexplorer-views-01.png -------------------------------------------------------------------------------- /Chapter05/fetch/01-basic/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode 5 | .tmp -------------------------------------------------------------------------------- /Chapter05/fetch/01-basic/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fetch 6 | 7 | 8 | 9 |

Fetch

10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Chapter05/fetch/02-chaining/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode 5 | .tmp -------------------------------------------------------------------------------- /Chapter05/fetch/02-chaining/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fetch 6 | 7 | 8 | 9 |

Fetch

10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Chapter05/iots/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .vscode 4 | .tmp -------------------------------------------------------------------------------- /Chapter05/modules/01-revealing/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode -------------------------------------------------------------------------------- /Chapter05/modules/01-revealing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "revealing", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "tests.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "^3.1.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter05/modules/02-esm/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode -------------------------------------------------------------------------------- /Chapter05/modules/02-esm/my-module.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var my_utils_module_1 = require("./my-utils-module"); 4 | console.log("Public key: ", my_utils_module_1.myPublicKey); 5 | my_utils_module_1.bar("foo!"); 6 | -------------------------------------------------------------------------------- /Chapter05/modules/02-esm/my-module.ts: -------------------------------------------------------------------------------- 1 | import {bar, myPublicKey} from "./my-utils-module"; 2 | 3 | console.log("Public key: ", myPublicKey); 4 | 5 | bar("foo!"); -------------------------------------------------------------------------------- /Chapter05/modules/02-esm/my-other-module.ts: -------------------------------------------------------------------------------- 1 | import * as utils from "./my-utils-module"; 2 | 3 | console.log("Public key: ", utils.myPublicKey); 4 | 5 | utils.bar("foo!"); 6 | -------------------------------------------------------------------------------- /Chapter05/modules/02-esm/my-utils-module.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var myPrivateKey = "Secret"; 4 | exports.myPublicKey = "Public"; 5 | // exported function 6 | function bar(message) { 7 | say(message); 8 | } 9 | exports.bar = bar; 10 | // private function 11 | function say(message) { 12 | console.log(message); 13 | } 14 | -------------------------------------------------------------------------------- /Chapter05/modules/02-esm/my-utils-module.ts: -------------------------------------------------------------------------------- 1 | const myPrivateKey = "Secret"; 2 | 3 | export const myPublicKey = "Public"; 4 | 5 | // exported function 6 | export function bar(message) { 7 | say(message); 8 | } 9 | 10 | // private function 11 | function say(message) { 12 | console.log(message); 13 | } 14 | -------------------------------------------------------------------------------- /Chapter05/modules/02-esm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "esm", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "tests.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "^3.1.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter05/modules/03-ts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode -------------------------------------------------------------------------------- /Chapter05/modules/03-ts/my-ambient-module-declaration.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | -------------------------------------------------------------------------------- /Chapter05/modules/03-ts/my-ambient-module-declaration.ts: -------------------------------------------------------------------------------- 1 | declare module "foo" { 2 | export const bar: number; 3 | } -------------------------------------------------------------------------------- /Chapter05/modules/03-ts/my-module-with-export-stmt.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | -------------------------------------------------------------------------------- /Chapter05/modules/03-ts/my-module-with-export-stmt.ts: -------------------------------------------------------------------------------- 1 | interface Thing { 2 | name: string 3 | } 4 | 5 | // 1 6 | export { 7 | Thing 8 | } 9 | 10 | // 2 11 | export { 12 | Thing as RenamedThing 13 | } 14 | -------------------------------------------------------------------------------- /Chapter05/modules/03-ts/my-module-with-reexports.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | // my-module-with-reexports.ts 4 | var my_utils_module_1 = require("./my-utils-module"); 5 | exports.log = my_utils_module_1.log; 6 | exports.MessageType = my_utils_module_1.MessageType; 7 | -------------------------------------------------------------------------------- /Chapter05/modules/03-ts/my-module-with-reexports.ts: -------------------------------------------------------------------------------- 1 | // my-module-with-reexports.ts 2 | export {log, Message, MessageType} from "./my-utils-module"; -------------------------------------------------------------------------------- /Chapter05/modules/03-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsmodules", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "tests.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "^3.1.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter05/modules/04-single-export/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode -------------------------------------------------------------------------------- /Chapter05/modules/04-single-export/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsmodulessingleexport", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "tests.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "^3.1.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter05/modules/04-single-export/single-export-usage.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var sayHi = require("./single-export"); 4 | sayHi("foo"); 5 | -------------------------------------------------------------------------------- /Chapter05/modules/04-single-export/single-export-usage.ts: -------------------------------------------------------------------------------- 1 | import sayHi = require("./single-export"); 2 | 3 | sayHi("foo"); -------------------------------------------------------------------------------- /Chapter05/modules/04-single-export/single-export.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | function sayHi(message) { 3 | console.log(message); 4 | } 5 | module.exports = sayHi; 6 | -------------------------------------------------------------------------------- /Chapter05/modules/04-single-export/single-export.ts: -------------------------------------------------------------------------------- 1 | function sayHi(message: string): void { 2 | console.log(message); 3 | } 4 | 5 | export = sayHi; -------------------------------------------------------------------------------- /Chapter05/worldexplorer-initial/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode 5 | .tmp -------------------------------------------------------------------------------- /Chapter05/worldexplorer-initial/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WorldExplorer 6 | 7 | 8 | 9 | 10 |

WorldExplorer

11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-initial/src/world-explorer.ts: -------------------------------------------------------------------------------- 1 | console.log("WorldExplorer - Loading..."); 2 | 3 | console.log("WorldExplorer loaded"); 4 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode 5 | .tmp -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | verbose: false, 3 | roots: [ 4 | "/src" 5 | ], 6 | preset: 'ts-jest', 7 | testEnvironment: 'node', 8 | collectCoverage: false, 9 | globals: { 10 | 'ts-jest': { 11 | // reference: https://kulshekhar.github.io/ts-jest/user/config/ 12 | } 13 | }, 14 | setupFiles: [ 15 | './src/jest.setup.ts' 16 | ] 17 | }; 18 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/common/errors/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./unreachable-case-error"; 2 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/common/errors/unreachable-case-error.ts: -------------------------------------------------------------------------------- 1 | export class UnreachableCaseError extends Error { 2 | constructor(val: never) { 3 | super(`Unreachable case: ${val}`); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/common/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./errors"; 2 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/controllers/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./world-explorer-controller.intf"; 2 | export * from "./world-explorer-controller"; 3 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/controllers/world-explorer-controller.intf.ts: -------------------------------------------------------------------------------- 1 | export interface WorldExplorerController { 2 | loadCountries(): Promise; 3 | loadYears(): void; 4 | renderChart(): void; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/domain/datapoint.ts: -------------------------------------------------------------------------------- 1 | export class DataPoint { 2 | constructor( 3 | private _date: string, 4 | private _value: number 5 | ) { 6 | 7 | } 8 | 9 | get date() { 10 | return this._date; 11 | } 12 | 13 | get value(): number { 14 | return this._value; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/domain/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./country"; 2 | export * from "./datapoint"; 3 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/jest.setup.ts: -------------------------------------------------------------------------------- 1 | import {GlobalWithFetchMock} from "jest-fetch-mock"; 2 | 3 | const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock; 4 | 5 | // load the mock for the Fetch API: https://www.npmjs.com/package/jest-fetch-mock 6 | // and set it on the global scope 7 | customGlobal.fetch = require('jest-fetch-mock'); 8 | customGlobal.fetchMock = customGlobal.fetch; 9 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/sanity.test.ts: -------------------------------------------------------------------------------- 1 | 2 | test('adding 3 to 2 equals to 5', () => { 3 | expect(2 + 3).toBe(5); 4 | }); 5 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./population-service.intf"; 2 | export * from "./population-service"; 3 | export * from "./world-bank-api"; 4 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/views/chart-details.intf.ts: -------------------------------------------------------------------------------- 1 | import {DataPoint} from "../domain"; 2 | 3 | export interface ChartDetails { 4 | chartType: string; 5 | data: DataPoint[]; 6 | dataLabel: string; 7 | title: string; 8 | xAxisLabel: string; 9 | yAxisLabel: string; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter05/worldexplorer-v1/src/views/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./world-explorer-view.intf"; 2 | export * from "./world-explorer-view"; 3 | export * from "./chart-details.intf"; 4 | -------------------------------------------------------------------------------- /Chapter06/c06-pyramid-of-tests.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter06/c06-pyramid-of-tests.png -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | .vscode 5 | .tmp -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | verbose: false, 3 | roots: [ 4 | "/src" 5 | ], 6 | preset: 'ts-jest', 7 | testEnvironment: 'node', 8 | collectCoverage: false, 9 | globals: { 10 | 'ts-jest': { 11 | // reference: https://kulshekhar.github.io/ts-jest/user/config/ 12 | } 13 | }, 14 | setupFiles: [ 15 | './src/jest.setup.ts' 16 | ] 17 | }; 18 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/common/errors/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./unreachable-case-error"; 2 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/common/errors/unreachable-case-error.ts: -------------------------------------------------------------------------------- 1 | export class UnreachableCaseError extends Error { 2 | constructor(val: never) { 3 | super(`Unreachable case: ${val}`); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/common/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./errors"; 2 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/controllers/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./world-explorer-controller.intf"; 2 | export * from "./world-explorer-controller"; 3 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/controllers/world-explorer-controller.intf.ts: -------------------------------------------------------------------------------- 1 | export interface WorldExplorerController { 2 | loadCountries(): Promise; 3 | loadYears(): void; 4 | renderChart(): void; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/domain/datapoint.ts: -------------------------------------------------------------------------------- 1 | export class DataPoint { 2 | constructor( 3 | private _date: string, 4 | private _value: number 5 | ) { 6 | 7 | } 8 | 9 | get date() { 10 | return this._date; 11 | } 12 | 13 | get value(): number { 14 | return this._value; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/domain/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./country"; 2 | export * from "./datapoint"; 3 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/jest.setup.ts: -------------------------------------------------------------------------------- 1 | import {GlobalWithFetchMock} from "jest-fetch-mock"; 2 | 3 | const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock; 4 | 5 | // load the mock for the Fetch API: https://www.npmjs.com/package/jest-fetch-mock 6 | // and set it on the global scope 7 | customGlobal.fetch = require('jest-fetch-mock'); 8 | customGlobal.fetchMock = customGlobal.fetch; 9 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/sanity.test.ts: -------------------------------------------------------------------------------- 1 | 2 | test('adding 3 to 2 equals to 5', () => { 3 | expect(2 + 3).toBe(5); 4 | }); 5 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./population-service.intf"; 2 | export * from "./population-service"; 3 | export * from "./world-bank-api"; 4 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/views/chart-details.intf.ts: -------------------------------------------------------------------------------- 1 | import {DataPoint} from "../domain"; 2 | 3 | export interface ChartDetails { 4 | chartType: string; 5 | data: DataPoint[]; 6 | dataLabel: string; 7 | title: string; 8 | xAxisLabel: string; 9 | yAxisLabel: string; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter06/worldexplorer-v1/src/views/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./world-explorer-view.intf"; 2 | export * from "./world-explorer-view"; 3 | export * from "./chart-details.intf"; 4 | -------------------------------------------------------------------------------- /Chapter07/c07-angular-console-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-angular-console-01.png -------------------------------------------------------------------------------- /Chapter07/c07-angular-console-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-angular-console-02.png -------------------------------------------------------------------------------- /Chapter07/c07-angular-console-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-angular-console-03.png -------------------------------------------------------------------------------- /Chapter07/c07-angular-console-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-angular-console-04.png -------------------------------------------------------------------------------- /Chapter07/c07-angular-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-angular-logo.png -------------------------------------------------------------------------------- /Chapter07/c07-architecture-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-architecture-01.png -------------------------------------------------------------------------------- /Chapter07/c07-augury-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-augury-01.png -------------------------------------------------------------------------------- /Chapter07/c07-augury-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-augury-02.png -------------------------------------------------------------------------------- /Chapter07/c07-components-tree-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-components-tree-01.png -------------------------------------------------------------------------------- /Chapter07/c07-databinding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-databinding.png -------------------------------------------------------------------------------- /Chapter07/c07-marble-diagram-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-marble-diagram-map.png -------------------------------------------------------------------------------- /Chapter07/c07-modules.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-modules.png -------------------------------------------------------------------------------- /Chapter07/c07-ng-cli-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/c07-ng-cli-01.png -------------------------------------------------------------------------------- /Chapter07/cli1/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter07/cli1/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getTitleText()).toEqual('Welcome to cli1!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Chapter07/cli1/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Chapter07/cli1/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /Chapter07/cli1/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | Welcome to {{ title }}! 5 |

6 | 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /Chapter07/cli1/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/cli1/src/app/app.component.scss -------------------------------------------------------------------------------- /Chapter07/cli1/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'Foo'; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter07/cli1/src/app/foo/foo.component.html: -------------------------------------------------------------------------------- 1 |

2 | foo works! 3 |

4 | -------------------------------------------------------------------------------- /Chapter07/cli1/src/app/foo/foo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/cli1/src/app/foo/foo.component.scss -------------------------------------------------------------------------------- /Chapter07/cli1/src/app/foo/foo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-foo', 5 | templateUrl: './foo.component.html', 6 | styleUrls: ['./foo.component.scss'] 7 | }) 8 | export class FooComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /Chapter07/cli1/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/cli1/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter07/cli1/src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /Chapter07/cli1/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter07/cli1/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/cli1/src/favicon.ico -------------------------------------------------------------------------------- /Chapter07/cli1/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cli1 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Chapter07/cli1/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Chapter07/cli1/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Chapter07/cli1/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /Chapter07/cli1/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter07/cli1/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter07/clientlist/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter07/clientlist/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getTitleText()).toEqual('Welcome to clientlist!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Chapter07/clientlist/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Chapter07/clientlist/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /Chapter07/clientlist/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/clientlist/src/app/app.component.css -------------------------------------------------------------------------------- /Chapter07/clientlist/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: ` 6 | 7 | `, 8 | styleUrls: ['./app.component.css'] 9 | }) 10 | export class AppComponent { 11 | title = 'clientlist'; 12 | } 13 | -------------------------------------------------------------------------------- /Chapter07/clientlist/src/app/client-card/client-card.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/clientlist/src/app/client-card/client-card.component.css -------------------------------------------------------------------------------- /Chapter07/clientlist/src/app/client-list/client-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/clientlist/src/app/client-list/client-list.component.css -------------------------------------------------------------------------------- /Chapter07/clientlist/src/app/domain/client.ts: -------------------------------------------------------------------------------- 1 | export class Client { 2 | constructor(public id: string, public name: string, public address: string) { 3 | 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter07/clientlist/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/clientlist/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter07/clientlist/src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /Chapter07/clientlist/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter07/clientlist/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/clientlist/src/favicon.ico -------------------------------------------------------------------------------- /Chapter07/clientlist/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Clientlist 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Chapter07/clientlist/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Chapter07/clientlist/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Chapter07/clientlist/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /Chapter07/clientlist/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter07/clientlist/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter07/decorators/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter07/decorators/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /Chapter07/decorators/02-cross-cutting-cleaner.ts: -------------------------------------------------------------------------------- 1 | import {Authenticated, Traced, Transactional, ValidNumber} from "./02-cross-cutting-utils"; 2 | 3 | class NewBankService { 4 | constructor() { 5 | } 6 | 7 | @Traced 8 | @Authenticated 9 | @Transactional 10 | public depositMoney(@ValidNumber({min: 0}) amount: number): void { 11 | // try to do something interesting 12 | } 13 | } 14 | 15 | new NewBankService().depositMoney(500); 16 | -------------------------------------------------------------------------------- /Chapter07/decorators/noise.ts: -------------------------------------------------------------------------------- 1 | const log = (msg: string): void => { console.log(msg); }; 2 | const commitTransaction = (): void => {}; 3 | const rollbackTransaction = (): void => {}; 4 | const doInTransaction = (fn: Function): void => {}; 5 | const isAuthenticated = true; 6 | -------------------------------------------------------------------------------- /Chapter07/decorators/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "decorators-examples", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "typescript": "3.1.1" 9 | }, 10 | "scripts": { 11 | "tsc": "npx tsc" 12 | }, 13 | "author": "dSebastien (https://www.dsebastien.net)", 14 | "license": "MIT" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter07/decorators/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "lib": ["es5", "dom"], 6 | "strict": true, 7 | "experimentalDecorators": true, 8 | "emitDecoratorMetadata": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getTitleText()).toEqual('Welcome to pipexamples!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/pipexamples/src/app/app.component.css -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | {{ 'hello' | uppercase }} 2 |
3 | {{ 'HELLO' | lowercase }} 4 |
5 | {{ 1234.56 | currency:"EUR" }} 6 |
7 | {{ '2018-08-13' | date:'E yy-MM-d' }} 8 |
9 | {{ 1337000000.420545 | number: '1.1-2' }} 10 |
11 | {{ 0.421 | percent }} 12 |
13 | {{ [9,8,7,6,5,4] | slice:0:3 }} 14 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'pipexamples'; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule 12 | ], 13 | providers: [], 14 | bootstrap: [AppComponent] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/pipexamples/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter07/pipexamples/src/favicon.ico -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pipexamples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter07/pipexamples/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter07/rxjs/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /Chapter07/rxjs/observableFrom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var rxjs_1 = require("rxjs"); 4 | var myObservable1 = rxjs_1.from([1, 2, 3]); 5 | var myObservable2 = rxjs_1.from(new Promise(function (resolveFn) { return resolveFn('Foo'); })); 6 | // ... 7 | //# sourceMappingURL=observableFrom.js.map -------------------------------------------------------------------------------- /Chapter07/rxjs/observableFrom.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"observableFrom.js","sourceRoot":"","sources":["observableFrom.ts"],"names":[],"mappings":";;AAAA,6BAA4B;AAE5B,IAAM,aAAa,GAAG,WAAI,CAAC,CAAC,CAAC,EAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AACrC,IAAM,aAAa,GAAG,WAAI,CAAC,IAAI,OAAO,CAAC,UAAA,SAAS,IAAI,OAAA,SAAS,CAAC,KAAK,CAAC,EAAhB,CAAgB,CAAC,CAAC,CAAC;AAEvE,MAAM"} -------------------------------------------------------------------------------- /Chapter07/rxjs/observableFrom.ts: -------------------------------------------------------------------------------- 1 | import { from } from 'rxjs'; 2 | 3 | const myObservable1 = from([1,2,3]); 4 | const myObservable2 = from(new Promise(resolveFn => resolveFn('Foo'))); 5 | 6 | // ... -------------------------------------------------------------------------------- /Chapter07/rxjs/observableFromEvent.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var rxjs_1 = require("rxjs"); 4 | var myClicksObservable = rxjs_1.fromEvent(document, 'click'); 5 | // ... 6 | //# sourceMappingURL=observableFromEvent.js.map -------------------------------------------------------------------------------- /Chapter07/rxjs/observableFromEvent.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"observableFromEvent.js","sourceRoot":"","sources":["observableFromEvent.ts"],"names":[],"mappings":";;AAAA,6BAAiC;AAEjC,IAAM,kBAAkB,GAAG,gBAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAExD,MAAM"} -------------------------------------------------------------------------------- /Chapter07/rxjs/observableFromEvent.ts: -------------------------------------------------------------------------------- 1 | import { fromEvent } from 'rxjs'; 2 | 3 | const myClicksObservable = fromEvent(document, 'click'); 4 | 5 | // ... -------------------------------------------------------------------------------- /Chapter07/rxjs/observableOf.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var rxjs_1 = require("rxjs"); 4 | var myObservable = rxjs_1.of(1, 3, 3, 7); 5 | //... 6 | //# sourceMappingURL=observableOf.js.map -------------------------------------------------------------------------------- /Chapter07/rxjs/observableOf.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"observableOf.js","sourceRoot":"","sources":["observableOf.ts"],"names":[],"mappings":";;AAAA,6BAA0B;AAE1B,IAAM,YAAY,GAAG,SAAE,CAAC,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC,CAAC,CAAC,CAAC;AAEjC,KAAK"} -------------------------------------------------------------------------------- /Chapter07/rxjs/observableOf.ts: -------------------------------------------------------------------------------- 1 | import { of } from 'rxjs'; 2 | 3 | const myObservable = of(1,3,3,7); 4 | 5 | //... -------------------------------------------------------------------------------- /Chapter07/rxjs/observer.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var observer = { 3 | next: function (x) { return console.log("Observer got a next value: " + x); }, 4 | error: function (err) { return console.error("Observer got an error: " + err); }, 5 | complete: function () { return console.log('Observer got a completion notification'); } 6 | }; 7 | //# sourceMappingURL=observer.js.map -------------------------------------------------------------------------------- /Chapter07/rxjs/observer.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"observer.js","sourceRoot":"","sources":["observer.ts"],"names":[],"mappings":";AAAA,IAAM,QAAQ,GAAG;IACb,IAAI,EAAE,UAAC,CAAK,IAAK,OAAA,OAAO,CAAC,GAAG,CAAC,gCAA8B,CAAG,CAAC,EAA9C,CAA8C;IAC/D,KAAK,EAAE,UAAC,GAAO,IAAK,OAAA,OAAO,CAAC,KAAK,CAAC,4BAA0B,GAAK,CAAC,EAA9C,CAA8C;IAClE,QAAQ,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,wCAAwC,CAAC,EAArD,CAAqD;CACxE,CAAC"} -------------------------------------------------------------------------------- /Chapter07/rxjs/observer.ts: -------------------------------------------------------------------------------- 1 | const observer = { 2 | next: (x:any) => console.log(`Observer got a next value: ${x}`), 3 | error: (err:any) => console.error(`Observer got an error: ${err}`), 4 | complete: () => console.log('Observer got a completion notification') 5 | }; -------------------------------------------------------------------------------- /Chapter07/rxjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rxjs-examples", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": { 7 | "rxjs": "6.3.3" 8 | }, 9 | "devDependencies": { 10 | "typescript": "3.1.1" 11 | }, 12 | "scripts": { 13 | "tsc": "npx tsc" 14 | }, 15 | "author": "dSebastien (https://www.dsebastien.net)", 16 | "license": "MIT" 17 | } 18 | -------------------------------------------------------------------------------- /Chapter08/c08-mediaman-v3-view-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/c08-mediaman-v3-view-01.png -------------------------------------------------------------------------------- /Chapter08/c08-mediaman-v3-view-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/c08-mediaman-v3-view-02.png -------------------------------------------------------------------------------- /Chapter08/c08-mediaman-v3-view-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/c08-mediaman-v3-view-03.png -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getTitleText()).toEqual('Welcome to mediaman-v2!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

{{ title }}

2 | 3 | 4 | 5 |
6 | 7 |

Movie collections

8 | 9 | Bonus exercise! 10 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v2/src/app/app.component.scss -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'MediaMan'; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/app/book/components/book-list/book-list.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v2/src/app/book/components/book-list/book-list.component.scss -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/app/book/components/book-new/book-new.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v2/src/app/book/components/book-new/book-new.component.scss -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/app/book/pages/book-page/book-page.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v2/src/app/book/pages/book-page/book-page.component.scss -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/app/book/services/book.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { BookService } from './book.service'; 4 | 5 | describe('BookService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: BookService = TestBed.get(BookService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/app/shared/enums/genre.enum.ts: -------------------------------------------------------------------------------- 1 | export enum Genre { 2 | Horror = 'Horror', 3 | Fantastic = 'Fantastic', 4 | Thriller = 'Thriller', 5 | Romance = 'Romance', 6 | Fiction = 'Fiction' 7 | } 8 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/app/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | @NgModule({ 5 | declarations: [], 6 | imports: [ 7 | CommonModule 8 | ] 9 | }) 10 | export class SharedModule { 11 | } 12 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v2/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v2/src/favicon.ico -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MediamanV2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v2/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getTitleText()).toEqual('Welcome to mediaman-v2!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | {{ title }} 2 | 3 | 4 | 5 |
6 | 7 |

Movie collections

8 | 9 | Bonus exercise! 10 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v3/src/app/app.component.scss -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'MediaMan'; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/app/book/components/book-list/book-list.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v3/src/app/book/components/book-list/book-list.component.scss -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/app/book/components/book-new/book-new.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v3/src/app/book/components/book-new/book-new.component.scss -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/app/book/pages/book-page/book-page.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v3/src/app/book/pages/book-page/book-page.component.scss -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/app/book/services/book.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { BookService } from './book.service'; 4 | 5 | describe('BookService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: BookService = TestBed.get(BookService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/app/shared/enums/genre.enum.ts: -------------------------------------------------------------------------------- 1 | export enum Genre { 2 | Horror = 'Horror', 3 | Fantastic = 'Fantastic', 4 | Thriller = 'Thriller', 5 | Romance = 'Romance', 6 | Fiction = 'Fiction' 7 | } 8 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v3/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter08/mediaman-v3/src/favicon.ico -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/styles.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 2 | 3 | html, body { height: 100%; } 4 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } 5 | 6 | .mediaImage { max-height: 120px; } 7 | 8 | table td.mat-cell, table th.mat-cell { padding-right:20px; } 9 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter08/mediaman-v3/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter09/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/.gitignore -------------------------------------------------------------------------------- /Chapter09/04-vue-cli/01-empty/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /Chapter09/04-vue-cli/01-empty/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | /tests/e2e/videos/ 6 | /tests/e2e/screenshots/ 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw* 25 | -------------------------------------------------------------------------------- /Chapter09/04-vue-cli/01-empty/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /Chapter09/04-vue-cli/01-empty/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/04-vue-cli/01-empty/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/04-vue-cli/01-empty/public/favicon.ico -------------------------------------------------------------------------------- /Chapter09/04-vue-cli/01-empty/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/04-vue-cli/01-empty/src/assets/logo.png -------------------------------------------------------------------------------- /Chapter09/04-vue-cli/01-empty/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: (h) => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /Chapter09/04-vue-cli/01-empty/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue'; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Chapter09/04-vue-cli/01-empty/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter09/04-vue-cli/01-empty/tests/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/api/introduction/api.html 2 | 3 | describe('My First Test', () => { 4 | it('Visits the app root url', () => { 5 | cy.visit('/') 6 | cy.contains('h1', 'Welcome to Your Vue.js + TypeScript App') 7 | }) 8 | }) 9 | -------------------------------------------------------------------------------- /Chapter09/04-vue-cli/01-empty/tests/unit/example.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import HelloWorld from '@/components/HelloWorld.vue'; 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('renders props.msg when passed', () => { 6 | const msg = 'new message'; 7 | const wrapper = shallowMount(HelloWorld, { 8 | propsData: { msg }, 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | /tests/e2e/videos/ 6 | /tests/e2e/screenshots/ 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw* 25 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/05-vue-ts-split/public/favicon.ico -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/05-vue-ts-split/src/assets/logo.png -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/src/components/example.html: -------------------------------------------------------------------------------- 1 | The message is: {{message}} 2 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/src/components/example.ts: -------------------------------------------------------------------------------- 1 | import {Component, Prop, Vue} from 'vue-property-decorator'; 2 | 3 | import WithRender from './example.html'; 4 | 5 | @WithRender 6 | @Component 7 | export class Example extends Vue { 8 | @Prop({ 9 | default: 'default message', 10 | required: false, 11 | }) 12 | private message!: string; 13 | } 14 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: (h) => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue'; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts-split/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | module: { 4 | rules: [ 5 | { 6 | test: /.html$/, 7 | loader: "vue-template-loader", 8 | exclude: /index.html/ 9 | } 10 | ] 11 | } 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | /tests/e2e/videos/ 6 | /tests/e2e/screenshots/ 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw* 25 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/05-vue-ts/public/favicon.ico -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/05-vue-ts/src/assets/logo.png -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: (h) => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue'; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/tests/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/api/introduction/api.html 2 | 3 | describe('My First Test', () => { 4 | it('Visits the app root url', () => { 5 | cy.visit('/') 6 | cy.contains('h1', 'Welcome to Your Vue.js + TypeScript App') 7 | }) 8 | }) 9 | -------------------------------------------------------------------------------- /Chapter09/05-vue-ts/tests/unit/example.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import HelloWorld from '@/components/HelloWorld.vue'; 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('renders props.msg when passed', () => { 6 | const msg = 'new message'; 7 | const wrapper = shallowMount(HelloWorld, { 8 | propsData: { msg }, 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /Chapter09/06-vue-injection-basic/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /Chapter09/06-vue-injection-basic/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter09/06-vue-injection-basic/.gitignore: -------------------------------------------------------------------------------- 1 | *.map 2 | 3 | .DS_Store 4 | node_modules 5 | /dist 6 | 7 | /tests/e2e/videos/ 8 | /tests/e2e/screenshots/ 9 | 10 | # local env files 11 | .env.local 12 | .env.*.local 13 | 14 | # Log files 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | # Editor directories and files 20 | .idea 21 | .vscode 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw* 27 | -------------------------------------------------------------------------------- /Chapter09/06-vue-injection-basic/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/06-vue-injection-basic/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/06-vue-injection-basic/public/favicon.ico -------------------------------------------------------------------------------- /Chapter09/06-vue-injection-basic/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/06-vue-injection-basic/src/assets/logo.png -------------------------------------------------------------------------------- /Chapter09/06-vue-injection-basic/src/components/PageFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /Chapter09/06-vue-injection-basic/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: (h) => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /Chapter09/06-vue-injection-basic/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue'; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Chapter09/06-vue-injection-basic/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/.gitignore: -------------------------------------------------------------------------------- 1 | *.map 2 | 3 | .DS_Store 4 | node_modules 5 | src/**/*.js 6 | 7 | /tests/e2e/videos/ 8 | /tests/e2e/screenshots/ 9 | 10 | # local env files 11 | .env.local 12 | .env.*.local 13 | 14 | # Log files 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | # Editor directories and files 20 | .idea 21 | .vscode 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw* 27 | -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/07-vue-injection-inversify/public/favicon.ico -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/07-vue-injection-inversify/src/assets/logo.png -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/src/domain/car.ts: -------------------------------------------------------------------------------- 1 | export interface Car { 2 | type: string; 3 | makeNoise(): void; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/src/domain/driver.ts: -------------------------------------------------------------------------------- 1 | import {Car} from './car'; 2 | 3 | export interface Driver { 4 | description: string; 5 | car: Car; 6 | } 7 | -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/src/ioc-tags.ts: -------------------------------------------------------------------------------- 1 | export const TAGS = { 2 | CRAZY: Symbol('CRAZY'), 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/src/ioc-types.ts: -------------------------------------------------------------------------------- 1 | export const TYPES = { 2 | CONTAINER: Symbol('CONTAINER'), 3 | DRIVER: Symbol('DRIVER'), 4 | CAR: Symbol('CAR'), 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: (h) => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue'; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Chapter09/07-vue-injection-inversify/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/.gitignore: -------------------------------------------------------------------------------- 1 | *.js 2 | *.map 3 | 4 | .DS_Store 5 | node_modules 6 | /dist 7 | 8 | /tests/e2e/videos/ 9 | /tests/e2e/screenshots/ 10 | 11 | # local env files 12 | .env.local 13 | .env.*.local 14 | 15 | # Log files 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | 20 | # Editor directories and files 21 | .idea 22 | .vscode 23 | *.suo 24 | *.ntvs* 25 | *.njsproj 26 | *.sln 27 | *.sw* 28 | -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/08-vue-injection-inversify-improved/public/favicon.ico -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/08-vue-injection-inversify-improved/src/assets/logo.png -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/src/domain/car.ts: -------------------------------------------------------------------------------- 1 | export interface Car { 2 | type: string; 3 | makeNoise(): void; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/src/domain/driver.ts: -------------------------------------------------------------------------------- 1 | import {Car} from './car'; 2 | 3 | export interface Driver { 4 | description: string; 5 | car: Car; 6 | } 7 | -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/src/ioc-tags.ts: -------------------------------------------------------------------------------- 1 | export const TAGS = { 2 | CRAZY: Symbol('CRAZY'), 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/src/ioc-types.ts: -------------------------------------------------------------------------------- 1 | export const TYPES = { 2 | CONTAINER: Symbol('CONTAINER'), 3 | DRIVER: Symbol('DRIVER'), 4 | CAR: Symbol('CAR'), 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: (h) => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue'; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Chapter09/08-vue-injection-inversify-improved/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter09/README.md: -------------------------------------------------------------------------------- 1 | State management diagrams created via https://www.draw.io. 2 | -------------------------------------------------------------------------------- /Chapter09/c09-components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-components.png -------------------------------------------------------------------------------- /Chapter09/c09-lifecycle-hooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-lifecycle-hooks.png -------------------------------------------------------------------------------- /Chapter09/c09-lyicsfinder-router-dev-tools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-lyicsfinder-router-dev-tools.png -------------------------------------------------------------------------------- /Chapter09/c09-redux-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-redux-logo.png -------------------------------------------------------------------------------- /Chapter09/c09-state-management-redux-pattern-details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-state-management-redux-pattern-details.png -------------------------------------------------------------------------------- /Chapter09/c09-state-management-redux-pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-state-management-redux-pattern.png -------------------------------------------------------------------------------- /Chapter09/c09-state-management-redux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-state-management-redux.png -------------------------------------------------------------------------------- /Chapter09/c09-state-management-via-props.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-state-management-via-props.png -------------------------------------------------------------------------------- /Chapter09/c09-state-management-vuex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-state-management-vuex.png -------------------------------------------------------------------------------- /Chapter09/c09-vue-cli-ui-configuration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-vue-cli-ui-configuration.png -------------------------------------------------------------------------------- /Chapter09/c09-vue-cli-ui-dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-vue-cli-ui-dependencies.png -------------------------------------------------------------------------------- /Chapter09/c09-vue-cli-ui-plugins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-vue-cli-ui-plugins.png -------------------------------------------------------------------------------- /Chapter09/c09-vue-cli-ui-tasks-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-vue-cli-ui-tasks-build.png -------------------------------------------------------------------------------- /Chapter09/c09-vue-cli-ui-tasks-serve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-vue-cli-ui-tasks-serve.png -------------------------------------------------------------------------------- /Chapter09/c09-vue-cli-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-vue-cli-ui.png -------------------------------------------------------------------------------- /Chapter09/c09-vue-dev-tools-chrome-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-vue-dev-tools-chrome-01.png -------------------------------------------------------------------------------- /Chapter09/c09-vue-dev-tools-chrome-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-vue-dev-tools-chrome-02.png -------------------------------------------------------------------------------- /Chapter09/c09-vue-dev-tools-chrome-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-vue-dev-tools-chrome-03.png -------------------------------------------------------------------------------- /Chapter09/c09-vue-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter09/c09-vue-logo.png -------------------------------------------------------------------------------- /Chapter09/symbols/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .vscode 4 | .tmp 5 | *.js -------------------------------------------------------------------------------- /Chapter09/symbols/01-basic.ts: -------------------------------------------------------------------------------- 1 | const foo: Symbol = Symbol(); 2 | const bar: Symbol = Symbol(); 3 | console.log(foo === bar); // false -------------------------------------------------------------------------------- /Chapter09/symbols/02-symbol-as-object-key.ts: -------------------------------------------------------------------------------- 1 | const mySymbol = Symbol('foo'); 2 | const myObject = { 3 | [mySymbol]: 'baz', 4 | }; 5 | 6 | console.log(myObject[mySymbol]); -------------------------------------------------------------------------------- /Chapter09/symbols/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "symbols", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "symbols.ts", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "^3.1.2" 14 | }, 15 | "dependencies": { 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter10/c10-lyricsfinder-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/c10-lyricsfinder-design.png -------------------------------------------------------------------------------- /Chapter10/c10-lyricsfinder-home-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/c10-lyricsfinder-home-01.png -------------------------------------------------------------------------------- /Chapter10/c10-lyricsfinder-home-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/c10-lyricsfinder-home-02.png -------------------------------------------------------------------------------- /Chapter10/c10-lyricsfinder-router-dev-tools-routes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/c10-lyricsfinder-router-dev-tools-routes.png -------------------------------------------------------------------------------- /Chapter10/c10-lyricsfinder-router.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/c10-lyricsfinder-router.png -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | cypress 5 | *.map 6 | 7 | /tests/e2e/videos/ 8 | /tests/e2e/screenshots/ 9 | 10 | # local env files 11 | .env.local 12 | .env.*.local 13 | 14 | # Log files 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | # Editor directories and files 20 | .idea 21 | .vscode 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw* 27 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-initial/public/favicon.ico -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 20 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/api-key.ts: -------------------------------------------------------------------------------- 1 | export const API_KEY = ''; 2 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-initial/src/assets/logo.png -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-initial/src/components/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/domain/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-initial/src/domain/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/domain/index.ts: -------------------------------------------------------------------------------- 1 | export * from './song'; 2 | export * from './song-lyrics'; 3 | export * from './artist'; 4 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/ioc/config.ts: -------------------------------------------------------------------------------- 1 | import {Container} from 'inversify'; 2 | import getDecorators from 'inversify-inject-decorators'; 3 | 4 | export const container = new Container(); 5 | 6 | // configuration of our container 7 | // container.bind ... 8 | 9 | export const { lazyInject } = getDecorators(container); 10 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/ioc/types.ts: -------------------------------------------------------------------------------- 1 | export const TYPES = { 2 | }; 3 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/locale.d.ts: -------------------------------------------------------------------------------- 1 | // For the curious: this is a workaround for https://github.com/ElemeFE/element/issues/9084 2 | // Without this, impossible to change the default (Chinese) language of Element with TypeScript without 3 | // setting noImplicitAny to false 4 | declare module 'element-ui/lib/locale/lang/en' { 5 | } 6 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/main.ts: -------------------------------------------------------------------------------- 1 | import './polyfills'; 2 | import './styles/lyricsfinder.css'; 3 | 4 | import Vue from 'vue'; 5 | import App from './App.vue'; 6 | 7 | Vue.config.productionTip = false; 8 | 9 | new Vue({ 10 | render: (h) => h(App), 11 | }).$mount('#app'); 12 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/mixins/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-initial/src/mixins/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | import 'reflect-metadata'; 2 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/router/router.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/services/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-initial/src/services/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './music-service.intf'; 2 | export * from './music-service'; 3 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/services/music-service.intf.ts: -------------------------------------------------------------------------------- 1 | import {Artist, Song} from '@/domain'; 2 | import {Observable} from 'rxjs'; 3 | import {SongLyrics} from '@/domain/song-lyrics'; 4 | 5 | export interface MusicService { 6 | findArtists(name: string): Observable; 7 | findSongs(value: string): Observable; 8 | findLyrics(song: Song): Observable; 9 | } 10 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue'; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/store/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-initial/src/store/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/src/views/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-initial/src/views/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/tests/e2e/plugins/index.js: -------------------------------------------------------------------------------- 1 | // Reference: https://docs.cypress.io/api/plugins/writing-a-plugin.html#Plugins-API 2 | module.exports = (on, config) => { 3 | // configure plugins here 4 | }; 5 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/tests/unit/example.spec.ts: -------------------------------------------------------------------------------- 1 | describe('Example', () => { 2 | it('Should work', () => { 3 | expect(true).toBe(true); 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-initial/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | module: { 4 | rules: [ 5 | { 6 | test: /.html$/, 7 | loader: "vue-template-loader", 8 | exclude: /index.html/ 9 | } 10 | ] 11 | } 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | cypress 5 | *.map 6 | 7 | /tests/e2e/videos/ 8 | /tests/e2e/screenshots/ 9 | 10 | # local env files 11 | .env.local 12 | .env.*.local 13 | 14 | # Log files 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | # Editor directories and files 20 | .idea 21 | .vscode 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw* 27 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-v1/public/favicon.ico -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/api-key.ts: -------------------------------------------------------------------------------- 1 | export const API_KEY = ''; 2 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-v1/src/assets/logo.png -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-v1/src/components/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/domain/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-v1/src/domain/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/domain/index.ts: -------------------------------------------------------------------------------- 1 | export * from './song'; 2 | export * from './song-lyrics'; 3 | export * from './artist'; 4 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/ioc/types.ts: -------------------------------------------------------------------------------- 1 | export const TYPES = { 2 | MUSIC_SERVICE: Symbol('MUSIC_SERVICE'), 3 | MUSIXMATCH_BASE_URL: Symbol('MUSIXMATCH_BASE_URL'), 4 | AXIOS_INSTANCE: Symbol('AXIOS-INSTANCE'), 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/locale.d.ts: -------------------------------------------------------------------------------- 1 | // For the curious: this is a workaround for https://github.com/ElemeFE/element/issues/9084 2 | // Without this, impossible to change the default (Chinese) language of Element with TypeScript without 3 | // setting noImplicitAny to false 4 | declare module 'element-ui/lib/locale/lang/en' { 5 | } 6 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/mixins/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-v1/src/mixins/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | import 'reflect-metadata'; 2 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/services/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-v1/src/services/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './music-service.intf'; 2 | export * from './music-service'; 3 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/services/music-service.intf.ts: -------------------------------------------------------------------------------- 1 | import {Artist, Song} from '@/domain'; 2 | import {Observable} from 'rxjs'; 3 | import {SongLyrics} from '@/domain/song-lyrics'; 4 | 5 | export interface MusicService { 6 | findArtists(name: string): Observable; 7 | findSongs(value: string): Observable; 8 | findLyrics(song: Song): Observable; 9 | } 10 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue'; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/store/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-v1/src/store/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/src/views/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter10/lyricsfinder-v1/src/views/.gitkeep -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/tests/e2e/plugins/index.js: -------------------------------------------------------------------------------- 1 | // Reference: https://docs.cypress.io/api/plugins/writing-a-plugin.html#Plugins-API 2 | module.exports = (on, config) => { 3 | // configure plugins here 4 | }; 5 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/tests/unit/example.spec.ts: -------------------------------------------------------------------------------- 1 | describe('Example', () => { 2 | it('Should work', () => { 3 | expect(true).toBe(true); 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /Chapter10/lyricsfinder-v1/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | module: { 4 | rules: [ 5 | { 6 | test: /.html$/, 7 | loader: "vue-template-loader", 8 | exclude: /index.html/ 9 | } 10 | ] 11 | } 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /Chapter11/01-hello-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Hello World 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Chapter11/02-react-element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Element 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Chapter11/03-react-element-immutable/react-element.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function tick() { 4 | const element = React.createElement("div", null, React.createElement("h1", null, "Hello, world!"), React.createElement("h2", null, "It is ", new Date().toLocaleTimeString(), ".")); 5 | ReactDOM.render(element, document.getElementById('hello-react-container')); 6 | } 7 | 8 | setInterval(tick, 1000); 9 | -------------------------------------------------------------------------------- /Chapter11/03-ts-object-destructuring/.gitignore: -------------------------------------------------------------------------------- 1 | *.js 2 | *.map 3 | node_modules 4 | -------------------------------------------------------------------------------- /Chapter11/03-ts-object-destructuring/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts-object-destructuring", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "tsc": "tsc" 9 | }, 10 | "author": "dSebastien (https://www.dsebastien.net)", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "3.1.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/03-ts-object-destructuring/ts-object-destructuring-01.ts: -------------------------------------------------------------------------------- 1 | const myObject = { 2 | firstName: 'Sebastien', 3 | age: 36, 4 | country: 'Belgium', 5 | }; 6 | 7 | const {firstName, age} = myObject; 8 | 9 | console.log(`Firstname: ${firstName}`); 10 | -------------------------------------------------------------------------------- /Chapter11/04-react-component-state/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter11/04-react-component-state/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/04-react-component-state/public/favicon.ico -------------------------------------------------------------------------------- /Chapter11/04-react-component-state/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/04-react-component-state/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/04-react-component-state/src/App.css -------------------------------------------------------------------------------- /Chapter11/04-react-component-state/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import {Calculator} from "./Calculator"; 4 | 5 | export function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /Chapter11/04-react-component-state/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {App} from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter11/04-react-component-state/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/04-react-component-state/src/index.css -------------------------------------------------------------------------------- /Chapter11/05-react-lifecycle-hook-class/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter11/05-react-lifecycle-hook-class/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/05-react-lifecycle-hook-class/public/favicon.ico -------------------------------------------------------------------------------- /Chapter11/05-react-lifecycle-hook-class/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/05-react-lifecycle-hook-class/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import {LifecycleAwareComponent} from "./LifecycleAwareComponent"; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /Chapter11/05-react-lifecycle-hook-class/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter11/06-react-hooks/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter11/06-react-hooks/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/06-react-hooks/public/favicon.ico -------------------------------------------------------------------------------- /Chapter11/06-react-hooks/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/06-react-hooks/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | //import {Switch} from './Switch'; 4 | import {Switch} from './SwitchWithAlert'; 5 | 6 | function App() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /Chapter11/06-react-hooks/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter11/06-react-hooks/src/Switch.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | 3 | export function Switch(props) { 4 | const [currentSwitchStatus, switchStatus] = useState(false); 5 | 6 | return ( 7 |
8 | The switch is currently: {currentSwitchStatus? 'ON': 'OFF'} 9 | 10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /Chapter11/06-react-hooks/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Chapter11/07-react-render-props/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter11/07-react-render-props/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/07-react-render-props/public/favicon.ico -------------------------------------------------------------------------------- /Chapter11/07-react-render-props/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/07-react-render-props/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import {ParentComponent} from "./ParentComponent"; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /Chapter11/07-react-render-props/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter11/07-react-render-props/src/ChildComponent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export class ChildComponent extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | } 7 | 8 | render() { 9 | return ( 10 | 11 | ); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Chapter11/07-react-render-props/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Chapter11/08-react-holes/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter11/08-react-holes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/08-react-holes/public/favicon.ico -------------------------------------------------------------------------------- /Chapter11/08-react-holes/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/08-react-holes/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import {Gruyere} from "./Gruyere"; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |

Hello

10 | World 11 | 12 |
13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /Chapter11/08-react-holes/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter11/08-react-holes/src/Gruyere.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export class Gruyere extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | } 7 | 8 | render() { 9 | return ( 10 |
11 | {this.props.children} 12 |
13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/08-react-holes/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Chapter11/09-create-react-app-example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter11/09-create-react-app-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/09-create-react-app-example/public/favicon.ico -------------------------------------------------------------------------------- /Chapter11/09-create-react-app-example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/09-create-react-app-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter11/10-create-react-app-typescript/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter11/10-create-react-app-typescript/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/10-create-react-app-typescript/public/favicon.ico -------------------------------------------------------------------------------- /Chapter11/10-create-react-app-typescript/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/10-create-react-app-typescript/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter11/10-create-react-app-typescript/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter11/11-react-typescript-basics/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter11/11-react-typescript-basics/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/11-react-typescript-basics/public/favicon.ico -------------------------------------------------------------------------------- /Chapter11/11-react-typescript-basics/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/11-react-typescript-basics/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter11/11-react-typescript-basics/src/Header.tsx: -------------------------------------------------------------------------------- 1 | import React, {ReactNode} from 'react'; 2 | 3 | type Props = { 4 | children: ReactNode; 5 | } 6 | 7 | export const Header = ({children}: Props) =>
{children}
; 8 | -------------------------------------------------------------------------------- /Chapter11/11-react-typescript-basics/src/hello-world-ts-functional-component.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const HelloWorldTSFunctionalComponent = () => ( 4 | Hello world from our TS Functional Component 5 | ); 6 | -------------------------------------------------------------------------------- /Chapter11/11-react-typescript-basics/src/hello-world.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | type Props = {}; 4 | type State = {}; 5 | 6 | export class HelloWorld extends Component { 7 | render() { 8 | return Hello World! 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /Chapter11/11-react-typescript-basics/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter11/11-react-typescript-basics/src/todo-list.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {TodoItem} from './todo-item'; 3 | 4 | type Props = { 5 | todos: readonly TodoItem[]; 6 | }; 7 | 8 | export const TodoList = ({todos}: Props) => { 9 | const items: JSX.Element[] = todos.map(todo => alert(`Todo item clicked: ${id}`)} />); 10 | 11 | return
{items}
12 | }; 13 | -------------------------------------------------------------------------------- /Chapter11/12-nest/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all" 4 | } -------------------------------------------------------------------------------- /Chapter11/12-nest/nest-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "language": "ts", 3 | "collection": "@nestjs/schematics", 4 | "sourceRoot": "src" 5 | } 6 | -------------------------------------------------------------------------------- /Chapter11/12-nest/nodemon-debug.json: -------------------------------------------------------------------------------- 1 | { 2 | "watch": ["src"], 3 | "ext": "ts", 4 | "ignore": ["src/**/*.spec.ts"], 5 | "exec": "node --inspect-brk -r ts-node/register -r tsconfig-paths/register src/main.ts" 6 | } 7 | -------------------------------------------------------------------------------- /Chapter11/12-nest/nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "watch": ["dist"], 3 | "ext": "js", 4 | "exec": "node dist/main" 5 | } 6 | -------------------------------------------------------------------------------- /Chapter11/12-nest/src/app.controller.ts: -------------------------------------------------------------------------------- 1 | import { Controller, Get } from '@nestjs/common'; 2 | import { AppService } from './app.service'; 3 | 4 | @Controller() 5 | export class AppController { 6 | constructor(private readonly appService: AppService) {} 7 | 8 | @Get() 9 | getHello(): string { 10 | return this.appService.getHello(); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Chapter11/12-nest/src/app.module.ts: -------------------------------------------------------------------------------- 1 | import { Module } from '@nestjs/common'; 2 | import { AppController } from './app.controller'; 3 | import { AppService } from './app.service'; 4 | import { HelloworldModule } from './helloworld/helloworld.module'; 5 | 6 | @Module({ 7 | imports: [HelloworldModule], 8 | controllers: [AppController], 9 | providers: [AppService], 10 | }) 11 | export class AppModule {} 12 | -------------------------------------------------------------------------------- /Chapter11/12-nest/src/app.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@nestjs/common'; 2 | 3 | @Injectable() 4 | export class AppService { 5 | getHello(): string { 6 | return 'Hello World!'; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /Chapter11/12-nest/src/helloworld/hello/hello.controller.ts: -------------------------------------------------------------------------------- 1 | import {Controller, Get, Query} from '@nestjs/common'; 2 | 3 | @Controller('/') 4 | export class HelloController { 5 | @Get('hello') 6 | hello(@Query('name') name?: string) { 7 | const personName = name? name: 'stranger'; 8 | return `Hello ${personName}`; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /Chapter11/12-nest/src/helloworld/helloworld.module.ts: -------------------------------------------------------------------------------- 1 | import { Module } from '@nestjs/common'; 2 | import { HelloController } from './hello/hello.controller'; 3 | 4 | @Module({ 5 | controllers: [HelloController] 6 | }) 7 | export class HelloworldModule {} 8 | -------------------------------------------------------------------------------- /Chapter11/12-nest/src/main.ts: -------------------------------------------------------------------------------- 1 | import { NestFactory } from '@nestjs/core'; 2 | import { AppModule } from './app.module'; 3 | 4 | async function bootstrap() { 5 | const app = await NestFactory.create(AppModule); 6 | await app.listen(3000); 7 | } 8 | bootstrap(); 9 | -------------------------------------------------------------------------------- /Chapter11/12-nest/test/jest-e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "moduleFileExtensions": ["js", "json", "ts"], 3 | "rootDir": ".", 4 | "testEnvironment": "node", 5 | "testRegex": ".e2e-spec.ts$", 6 | "transform": { 7 | "^.+\\.(t|j)s$": "ts-jest" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Chapter11/12-nest/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["node_modules", "test", "dist", "**/*spec.ts"] 4 | } 5 | -------------------------------------------------------------------------------- /Chapter11/12-nest/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "declaration": true, 5 | "removeComments": true, 6 | "emitDecoratorMetadata": true, 7 | "experimentalDecorators": true, 8 | "target": "es6", 9 | "sourceMap": true, 10 | "outDir": "./dist", 11 | "baseUrl": "./", 12 | "incremental": true 13 | }, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/c11-nest-controllers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/c11-nest-controllers.png -------------------------------------------------------------------------------- /Chapter11/c11-react-developer-tools-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/c11-react-developer-tools-01.png -------------------------------------------------------------------------------- /Chapter11/c11-react-lifecycle-hooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/c11-react-lifecycle-hooks.png -------------------------------------------------------------------------------- /Chapter11/c11-react-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter11/c11-react-logo.png -------------------------------------------------------------------------------- /Chapter12/c12-lfv2-01-jumbotron-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/c12-lfv2-01-jumbotron-button.png -------------------------------------------------------------------------------- /Chapter12/c12-lfv2-02-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/c12-lfv2-02-search.png -------------------------------------------------------------------------------- /Chapter12/c12-lfv2-03-graphql-playground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/c12-lfv2-03-graphql-playground.png -------------------------------------------------------------------------------- /Chapter12/c12-lfv2-04-graphql-playground-songs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/c12-lfv2-04-graphql-playground-songs.png -------------------------------------------------------------------------------- /Chapter12/c12-lfv2-schema.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/c12-lfv2-schema.png -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/.gitignore: -------------------------------------------------------------------------------- 1 | schema.gql 2 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all" 4 | } -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/nest-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "language": "ts", 3 | "collection": "@nestjs/schematics", 4 | "sourceRoot": "src" 5 | } 6 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/nodemon-debug.json: -------------------------------------------------------------------------------- 1 | { 2 | "watch": ["src"], 3 | "ext": "ts", 4 | "ignore": ["src/**/*.spec.ts"], 5 | "exec": "node --inspect-brk -r ts-node/register -r tsconfig-paths/register src/main.ts" 6 | } 7 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "watch": ["dist"], 3 | "ext": "js", 4 | "exec": "node dist/main" 5 | } 6 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/src/api-key.ts: -------------------------------------------------------------------------------- 1 | export const API_KEY = 'INSERT YOUR MUSIXMATCH API KEY HERE'; 2 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/src/app.controller.ts: -------------------------------------------------------------------------------- 1 | import { Controller, Get } from '@nestjs/common'; 2 | import { AppService } from './app.service'; 3 | 4 | @Controller() 5 | export class AppController { 6 | constructor(private readonly appService: AppService) {} 7 | 8 | @Get() 9 | getHello(): string { 10 | return this.appService.getHello(); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/src/app.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@nestjs/common'; 2 | 3 | @Injectable() 4 | export class AppService { 5 | getHello(): string { 6 | return 'Hello World!'; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/src/main.ts: -------------------------------------------------------------------------------- 1 | import { NestFactory } from '@nestjs/core'; 2 | import { AppModule } from './app.module'; 3 | 4 | async function bootstrap() { 5 | const app = await NestFactory.create(AppModule); 6 | await app.listen(4000); 7 | } 8 | bootstrap(); 9 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/src/musixmatch/domain/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/lyricsfinder-v2-initial/backend/src/musixmatch/domain/.gitkeep -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/src/musixmatch/domain/index.ts: -------------------------------------------------------------------------------- 1 | export * from './song'; 2 | export * from './song-lyrics'; 3 | export * from './artist'; 4 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/src/musixmatch/index.ts: -------------------------------------------------------------------------------- 1 | export * from './domain'; 2 | export * from './services'; 3 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/src/musixmatch/ioc/types.ts: -------------------------------------------------------------------------------- 1 | export const TYPES = { 2 | MUSIC_SERVICE: Symbol('MUSIC_SERVICE'), 3 | MUSIXMATCH_BASE_URL: Symbol('MUSIXMATCH_BASE_URL'), 4 | AXIOS_INSTANCE: Symbol('AXIOS-INSTANCE'), 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/src/musixmatch/services/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/lyricsfinder-v2-initial/backend/src/musixmatch/services/.gitkeep -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/src/musixmatch/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './music-service.intf'; 2 | export * from './music-service'; 3 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/src/musixmatch/services/music-service.intf.ts: -------------------------------------------------------------------------------- 1 | import { Artist, Song, SongLyrics } from '../domain'; 2 | import { Observable } from 'rxjs'; 3 | 4 | export interface MusicService { 5 | findArtists(name: string): Observable; 6 | findSongs(value: string): Observable; 7 | findLyrics(songId: string): Observable; 8 | } 9 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/backend/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["node_modules", "test", "dist", "**/*spec.ts"] 4 | } 5 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/lyricsfinder-v2-initial/frontend/public/favicon.ico -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/frontend/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/frontend/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2-initial/frontend/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all" 4 | } -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/nest-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "language": "ts", 3 | "collection": "@nestjs/schematics", 4 | "sourceRoot": "src" 5 | } 6 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/nodemon-debug.json: -------------------------------------------------------------------------------- 1 | { 2 | "watch": ["src"], 3 | "ext": "ts", 4 | "ignore": ["src/**/*.spec.ts"], 5 | "exec": "node --inspect-brk -r ts-node/register -r tsconfig-paths/register src/main.ts" 6 | } 7 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "watch": ["dist"], 3 | "ext": "js", 4 | "exec": "node dist/main" 5 | } 6 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/api-key.ts: -------------------------------------------------------------------------------- 1 | export const API_KEY = ''; 2 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/app.controller.ts: -------------------------------------------------------------------------------- 1 | import { Controller, Get } from '@nestjs/common'; 2 | import { AppService } from './app.service'; 3 | 4 | @Controller() 5 | export class AppController { 6 | constructor(private readonly appService: AppService) {} 7 | 8 | @Get() 9 | getHello(): string { 10 | return this.appService.getHello(); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/app.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@nestjs/common'; 2 | 3 | @Injectable() 4 | export class AppService { 5 | getHello(): string { 6 | return 'Hello World!'; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/artist/artist.dto.ts: -------------------------------------------------------------------------------- 1 | import { Field, ID, ObjectType } from 'type-graphql'; 2 | 3 | @ObjectType() 4 | export class ArtistDto { 5 | @Field(() => ID) 6 | id: string; 7 | 8 | @Field() 9 | name: string; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/artist/artist.module.ts: -------------------------------------------------------------------------------- 1 | import { Module } from '@nestjs/common'; 2 | import { ArtistResolver } from './artist.resolver'; 3 | 4 | @Module({ 5 | providers: [ArtistResolver] 6 | }) 7 | export class ArtistModule {} 8 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/main.ts: -------------------------------------------------------------------------------- 1 | import { NestFactory } from '@nestjs/core'; 2 | import { AppModule } from './app.module'; 3 | 4 | async function bootstrap() { 5 | const app = await NestFactory.create(AppModule); 6 | await app.listen(4000); 7 | } 8 | bootstrap(); 9 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/musixmatch/domain/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/lyricsfinder-v2/backend/src/musixmatch/domain/.gitkeep -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/musixmatch/domain/index.ts: -------------------------------------------------------------------------------- 1 | export * from './song'; 2 | export * from './song-lyrics'; 3 | export * from './artist'; 4 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/musixmatch/index.ts: -------------------------------------------------------------------------------- 1 | export * from './domain'; 2 | export * from './services'; 3 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/musixmatch/ioc/types.ts: -------------------------------------------------------------------------------- 1 | export const TYPES = { 2 | MUSIC_SERVICE: Symbol('MUSIC_SERVICE'), 3 | MUSIXMATCH_BASE_URL: Symbol('MUSIXMATCH_BASE_URL'), 4 | AXIOS_INSTANCE: Symbol('AXIOS-INSTANCE'), 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/musixmatch/services/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/lyricsfinder-v2/backend/src/musixmatch/services/.gitkeep -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/musixmatch/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './music-service.intf'; 2 | export * from './music-service'; 3 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/musixmatch/services/music-service.intf.ts: -------------------------------------------------------------------------------- 1 | import { Artist, Song, SongLyrics } from '../domain'; 2 | import { Observable } from 'rxjs'; 3 | 4 | export interface MusicService { 5 | findArtists(name: string): Observable; 6 | findSongs(value: string): Observable; 7 | findLyrics(songId: string): Observable; 8 | } 9 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/song-lyrics/song-lyrics.dto.ts: -------------------------------------------------------------------------------- 1 | import { Field, ID, ObjectType } from 'type-graphql'; 2 | 3 | @ObjectType() 4 | export class SongLyricsDto { 5 | @Field(() => ID) 6 | id: string; 7 | 8 | @Field() 9 | copyright: string; 10 | 11 | @Field(() => Boolean) 12 | explicit: boolean; 13 | 14 | @Field() 15 | lyrics: string; 16 | } 17 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/song-lyrics/song-lyrics.module.ts: -------------------------------------------------------------------------------- 1 | import { Module } from '@nestjs/common'; 2 | import { SongLyricsResolver } from './song-lyrics.resolver'; 3 | 4 | @Module({ 5 | imports: [SongLyricsResolver], 6 | }) 7 | export class SongLyricsModule {} 8 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/song/song.dto.ts: -------------------------------------------------------------------------------- 1 | import { Field, ID, ObjectType } from 'type-graphql'; 2 | 3 | @ObjectType() 4 | export class SongDto { 5 | @Field(() => ID) 6 | id: string; 7 | 8 | @Field() 9 | name: string; 10 | 11 | @Field() 12 | artistId: string; 13 | 14 | @Field(() => Boolean) 15 | hasLyrics: boolean; 16 | 17 | @Field(() => [String]) 18 | genres: string[]; 19 | } 20 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/src/song/song.module.ts: -------------------------------------------------------------------------------- 1 | import { Module } from '@nestjs/common'; 2 | import { SongResolver } from './song.resolver'; 3 | 4 | @Module({ 5 | providers: [SongResolver] 6 | }) 7 | export class SongModule {} 8 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/backend/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["node_modules", "test", "dist", "**/*spec.ts"] 4 | } 5 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/lyricsfinder-v2/frontend/public/favicon.ico -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/frontend/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/frontend/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Learn-TypeScript-3-by-Building-Web-Applications/f9c8162e4ff946c6949518fefb878470d68dc779/Chapter12/lyricsfinder-v2/frontend/src/App.css -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/frontend/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter12/lyricsfinder-v2/frontend/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | --------------------------------------------------------------------------------