The TypeScript Compiler Options Used in This Chapter
Name | Description |
---|---|
allowSyntheticDefaultImports | This option allows imports from modules that do not declare a default export. This option is used to increase code compatibility. |
baseUrl | This option specifies the root location used to resolve module dependencies. |
esModuleInterop | This option adds helper code for importing from modules that do not declare a default export and is used in conjunction with the allowSyntheticDefaultImports option. |
experimentalDecorators | This option determines whether decorators are enabled. |
importHelpers | This option determines whether helper code is added to the JavaScript to reduce the amount of code that is produced overall. |
jsx | This option specifies how HTML elements in TSX files are processed. |
lib | This option selects the type declaration files the compiler uses. |
module | This option determines the style of module that is used. |
moduleResolution | This option specifies the style of module resolution that should be used to resolve dependencies. |
paths | This option specifies the locations used to resolve module dependencies. |
sourceMap | This option determines whether the compiler generates source maps for debugging. |
strict | This option enables stricter checking of TypeScript code. |
target | This option specifies the version of the JavaScript language that the compiler will target in its output. |
types | This option specifies a list of declaration files to include in the compilation process. |
Preparing for This Chapter
Vue.js projects are most easily created using the Vue Cli package, which has built-in support for creating Vue.js projects that include TypeScript support. Open a command prompt and run the command shown in Listing 21-1 to install the Vue Cli package.
Tip
You can download the example project for this chapter—and for all the other chapters in this book—from https://github.com/Apress/essential-typescript .
Installing the Project Creation Package
The first @ character is part of the package name, @vue-cli. The second @ character is the separator between the package name and the version that is required, 3.8.0.
Creating a New Project
The Project Setup Questions and Answers
Question | Answers |
---|---|
Please pick a preset | Manually select features |
Check the features needed for your project | Babel, TypeScript, Router, Vuex |
Use class-style component syntax? | Y |
Use Babel alongside TypeScript? | Y |
Use history mode for router? | Y |
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? | In dedicated config files |
Once you have answered the questions, the project will be created, and the packages it requires will be installed.
Configuring the Web Service
Adding Packages to the Project
The Contents of the data.js File in the vueapp Folder
Configuring Tools in the package.json File in the vueapp Folder
These entries allow both the web service that will provide the data and the Vue.js development tools to be started with a single command.
Configuring the Bootstrap CSS Package
Adding the CSS Package
Adding a Stylesheet in the main.ts File in the src Folder
Starting the Example Application
Starting the Development Tools
Understanding TypeScript in Vue.js Development
TypeScript isn’t required for Vue.js development, but it has become such a popular choice that the main Vue.js packages contain complete type declaration files, and the Vue Cli package can create projects ready-configured for TypeScript.
This value specifies TypeScript and ensures that the code will be processed by the TypeScript compiler. Some features, such as the class syntax for defining components, are available only when using TypeScript. The alternative is to use the object literal syntax to define components in non-TypeScript projects. Both approaches can be used in the same project, but I have used the class syntax throughout this chapter because it makes the best use of the TypeScript strengths.
Understanding the TypeScript Vue.js Toolchain
The configuration enables decorators and allows the use of all JavaScript features, including those that are not yet part of the specification.
Supporting TypeScript in a Vue.js project requires some adaptations, which is why you will see the shims-tsx.d.ts and shims-vue.d.ts files in the project folder. These files provide type declarations that allow the TypeScript compiler to resolve dependencies on TypeScript JSX and Vue single-file components.
Creating the Entity Classes
The Contents of the entities.ts File in the src/data Folder
These types describe products and orders and the relationship between them. Unlike the other chapters in this part of the book, Product is defined as a class and not a type alias, because the Vue.js development tools rely on concrete types. The Vue.js change detection system doesn’t work well with the JavaScript Map, so the Order class for this chapter is written using an array for storage.
Displaying a Filtered List of Products
Vue.js supports a number of different ways of defining components, which are the key building block for displaying content to the user. For this book, I am going to use the most popular, which is the single-file component format that combines HTML and its supporting code in one file. (These files can also contain CSS, but I won’t be using that feature since I am relying on the Bootstrap package configured in Listing 21-6).
The Contents of the ProductItem.vue File in the src/component Folder
A Vue.js component’s template element uses data bindings, denoted by double curly brackets ({{ and }}), to display data values and uses event handling attributes, prefixed by the @ character, to handle events. The expressions specified by the bindings and the event attributes are evaluated using the featured defined by the class in the script element.
This component in Listing 21-10 displays the details of a Product object and emits an event when the user clicks the Add To Cart button.
Notice that the prop property requires the definite assignment assertion, described in Chapter 7, which indicates that a value will be available, even though it is not visible to the TypeScript compiler.
Displaying a List of Categories and the Header
The Contents of the CategoryList.vue File in the src/components Folder
This v-for directive tells Vue.js to create a button element for each value returned in the sequence returned by the categories property. To perform efficient updates, Vue.js requires a key attribute to be assigned to each element, which is why v-for and v-bind:key are used together.
The result is a series of button elements for each category. Clicking the button invokes the selectCategory method, which triggers a custom event and allows a component to signal the user’s category selection to another part of the application.
The Contents of the Header.vue File in the src/components Folder
The Header component displays a summary of the current order, following the pattern of defining a class that extends Vue and using decorators to denote a component and its props. The button element displayed by the Header component is a placeholder that I replace once the outline of the application is complete.
Composing and Testing the Components
The Contents of the ProductList.vue File in the src/views Folder
Notice that curly brackets are not used in the import statement and that the file extension is included. Even though the class has been exported by name in the Header.vue file, the default keyword is also required so that the compiled component can be imported elsewhere in the application.
The Header element applies the Header component. Vue.js uses the v-bind directive to create a data binding that sets the Header component’s order prop to the order property defined by the ProductList class, allowing one component to provide data values to another.
Replacing the Contents of the App.vue File in the src Folder
Creating the Data Store
Setting Up the Data Store in the store.ts File in the src Folder
The types in the StoreState interface are applied to the state section of the data store, as well as to the functions in the mutations and getters sections, ensuring that only the properties specified by the interface are used and that they are assigned only the expected types.
Creating Data Store Decorators
The Contents of the storeDecorators.ts File in the src/data Folder
The decorators in Listing 21-16 connect a class member to the data store. The state and getter decorators are applied to properties and transform them so they return the result from a state property or getter function defined in the data store. They work by replacing the definition of the property with a getter accessor that invokes the data store feature. The mutation and action decorators replace the implementation of a method with a function that invokes a mutation or an action defined by the data store.
Connecting Components to the Data Store
Connecting to the Data Store in the Header.vue File in the src/components Folder
Applying Decorators in the ProductList.vue File in the src/views Folder
Adding Support for the Web Service
Adding Actions in the store.ts File in the src Folder
Actions are able to modify the data store only through mutations. The changes in Listing 21-19 define actions that allow products to be loaded and added to the store and that allow orders to be sent to the server.
The Contents of the httpHandler.ts File in the src/data Folder
Using the Web Service in the App.vue File in the src Folder
Summary
In this chapter, I showed you how to create a Vue.js app that uses TypeScript. The project creation package provides integrated support for TypeScript, which allows Vue.js components to be defined as classes. I used this feature to create the basic structure of the application and defined decorators to connect components to Vuex data store features and load data from the web service. In the next chapter, I complete the Vue.js web project and prepare the application for deployment.