#fundamentals-ii #html #css #javascript #typescript #assembler-institute-of-technology #master-in-software-engineering
In this session we will learn how to install and configure a project with vanilla javascript and typescript
Create a new project in VSCode and install TypeScript globally with npm:
$ npm install -g typescriptNow initialize your typescript project with:
$ tsc -initThis command has created our typescript configuration file, now we have to edit some values so we can start working with vanilla js. We will go to the tsconfig.json and edit/add/uncomment some values.
The first two are for specifying what syntax to use when the files are compiled to Javascript, we will work with native browser most compatible version, ES6.
"target": "ES6"
"module": "ES6"With rootDir we set our main ts scripts folder and with outDir we set where the js files will be transpiled
"rootDir": "./src"
"outDir": "./dist"Finally we set to true noEmitOnError so no files are transpiled if there's an error
"noEmitOnError": trueWarning
You must run the project in a local server like when using Visual Code Live Server Extension or you might get CORS error when importing files.
We want to make a fetch request to the Rick & Morty API so we can get the first page of characters. We have to use import and export and make use of interfaces to get the character data, including enums when it's possible.
We'll create a Character.ts script inside ./src/types and code the interface needed for the character data.
A main.ts script is needed so when the document is loaded a fetch request is made. Then create a container for each character data that will contain its name and image.
When we click on a character container, the character id must be written in the console with a console.log.
- Add styles to the character containers.
- Try to modularize your code as much as possible in functions.
- Use import and export
- Use an interface for the data and enums for the data attributes that fit this data type.
Licensed under the MIT License.