Master React with Typescript and Unit Tests
Most of the React components in our projects should be simple, reusable, testable and well-typed. Design components with well-defined properties that are easy to read and understand.
Enhance your developer productivity and experience. Use and promote relevant React abstractions and patterns formulated with the type-safety of Typescript. Types will help us avoid obvious problems in code. Tests for logic in the code are better than repetitive visual debugging.
Reason for type checking
The purpose of programming is to find a sequence of instructions that will automate the performance of a task for solving a given problem. Tasks are often created in distributed teams that need to communicate. Task inputs and outputs need to be well-documented contracts.
The ultimate goal is to make code easy to read, understand and validate. Distributed teams need strict static verification of the code. Types let you define interfaces between software components and gain insights into the behavior of existing JavaScript libraries.
Advantages of types
- improves code readability
- provide valuable information about the code
- better code analysis
- static verification
- early detection of errors
- code autocomplete
- robust dependable refactoring
JSDoc
JSDoc is a markup language used to annotate JavaScript source code files. Docs and cheatsheet.
Documenting types in Javascript using JSDoc comments is still valuable option. Editors, compilers and type checkers can read this information and provide you with error message hints.
'; var cookie = '🍪'; // run plugin with config object cc.run({ current_lang : 'sk', // auto_language : 'document', autoclear_cookies : true, // default: false // theme_css: '../src/cookieconsent.css', cookie_name: 'cc_cookie_consent', // default: 'cc_cookie' cookie_expiration : 365, // default: 182 page_scripts: true, // default: false // auto_language: null, // default: null; could also be 'browser' or 'document' // autorun: true, // default: true // delay: 0, // default: 0 // force_consent: false, // hide_from_bots: false, // default: false // remove_cookie_tables: false // default: false // cookie_domain: location.hostname, // default: current domain // cookie_path: "/", // default: root // cookie_same_site: "Lax", // use_rfc_cookie: false, // default: false // revision: 0, // default: 0 gui_options: { consent_modal: { layout: 'cloud', // box,cloud,bar position: 'bottom right', // bottom,middle,top + left,right,center transition: 'slide' // zoom,slide }, settings_modal: { layout: 'bar', // box,bar // position: 'left', // right,left (available only if bar layout selected) transition: 'slide' // zoom,slide } }, onAccept: function (cookie) { console.log('onAccept fired ...'); var file = 'https://www.ableneo.com/plugins/cookies/ajax.php'; var data = new Object(); data.command = 'cookiesConsentChange'; data.cookies = cookie; var target = '#c-info'; ajaxRequestPost(file, JSON.stringify(data), target); // cc.show(); // delete line below // typeof doDemoThings === 'function' && doDemoThings(cookie); // update datalayer consent fn_updateGtagConsent(cc.allowedCategory('analytical'), cc.allowedCategory('commercial')); }, onChange: function (cookie, changed_preferences) { console.log('onChange fired ...'); var file = 'https://www.ableneo.com/plugins/cookies/ajax.php'; var data = new Object(); data.command = 'cookiesConsentChange'; data.cookies = cookie; data.preferences = changed_preferences; var target = '#c-info'; ajaxRequestPost(file, JSON.stringify(data), target); // cc.show(); console.log(changed_preferences); // update datalayer consent fn_updateGtagConsent(cc.allowedCategory('analytical'), cc.allowedCategory('commercial')); /* // If analytics category's status was changed ... if (changed_preferences.indexOf('analytical') > -1) { // If analytics category is disabled ... if (!cc.allowedCategory('analytical')) { // Disable gtag ... console.log('disabling gtag') window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied' }); } } */ // delete line below // typeof doDemoThings === 'function' && doDemoThings(cookie); }, languages: { 'sk': { consent_modal: { title: 'We use cookies', description: 'We use cookies and other technologies to improve your browsing experience on our website, to show you personalized content and targeted ads, to analyze our website traffic, and to understand where our visitors are coming from.' + '', primary_btn: { text: 'Accept all', role: 'accept_all' // 'accept_selected' or 'accept_all' }/*, secondary_btn: { text: 'Nechcem lepší zážitok', role: 'accept_necessary' // 'settings' or 'accept_necessary' }*/ }, settings_modal: { title: logo, save_settings_btn: 'Save settings', accept_all_btn: 'Accept all', /* reject_all_btn: 'Odmietnuť', */ /* close_btn_label: 'Close', */ cookie_table_headers: [ {col1: 'Name'}, {col2: 'Domain'}, {col3: 'Expiration'}, {col4: 'Description'} ], blocks: [ { title: 'Your privacy is important to us', description: 'Cookies are very small text files that are stored on your computer when you visit a website. We use cookies for a variety of purposes and to enhance your online experience on our website.' + '' + 'You can change your preferences and decline certain types of cookies to be stored on your computer while browsing our website. You can also remove any cookies already stored on your computer, but keep in mind that deleting cookies may prevent you from using parts of our website.' }, { title: 'Technical cookies', description: 'These cookies are essential to provide you with services available through our website and to enable you to use certain features of our website. Without these cookies, we cannot provide you certain services on our website.', toggle: { value: 'technical', enabled: true, readonly: true // cookie categories with readonly=true are all treated as "necessary cookies" } } , { title: 'Analytical cookies', description: 'These cookies are used to collect information to analyze the traffic to our website and how visitors are using our website. For example, these cookies may track things such as how long you spend on the website or the pages you visit which helps us to understand how we can improve our website site for you. The information collected through these tracking and performance cookies do not identify any individual visitor.', toggle: { value: 'analytical', // there are no default categories => you specify them enabled: false, readonly: false } } , { title: 'Marketing cookies', description: 'These cookies are used to show advertising that is likely to be of interest to you based on your browsing habits. If you choose to remove or disable these targeting or advertising cookies, you will still see adverts but they may not be relevant to you.', toggle: { value: 'commercial', enabled: false, readonly: false } } , { title: '', description: '', } ] } } } }); // this custom fix moves the "settings" button to the right, in place of the "cancel all" button (which has been removed in settings above $('#cc_div button[data-cc="c-settings"]').removeClass('cc-link').addClass('c-bn').addClass('c_link').appendTo('#c-bns'); });