Gain insights into advanced TypeScript skills. Delve into enhancing reducers, generics, React's Context API, and explore TypeScript 5.0. Prepare to build robust, scalable applications confidently.

typescript.tar.gz

reducers-simple

reducers-complete

type-assertion

type-assertion-build

context-main

create-context

polymorphic-button

polymorphic-input

polymorphic-polymorphic

typescript 5.3.3

This course empowers learners with advanced skills in TypeScript. This course will help you master TypeScript concepts and techniques, equipping you with the knowledge to build robust, scalable, and maintainable applications.

The course covers various topics, including optimizing reducers for improved type safety and efficient state management. Next, it explores generics in TypeScript and tackles challenges with React’s Context API. You will also gain insights into extending DOM elements and crafting polymorphic components. Lastly, you will explore the latest advancements in TypeScript 5.0.

After completing this course, you will gain the skills and knowledge to emerge as proficient TypeScript developers, confident in your ability to tackle complex development challenges. Whether working on frontend or backend development, you will be well-prepared to navigate modern web development with TypeScript.

Unleashing the Power of TypeScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="An example application for one of Steve Kinney's workshops"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Colors</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>


import { defineConfig } from 'vitest/config';

import configuration from './vite.config';

export default defineConfig({
  ...configuration,
  test: {
    include: ['**/*.test.ts'],
  },
});


module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};


{
  "infiniteLoopProtection": true,
  "hardReloadOnChange": false,
  "view": "browser"
}


/** @type {import('tailwindcss').Config} */

const colors = {
  primary: {
    DEFAULT: '#5E2885',
    50: '#B98ADB',
    100: '#AF7AD7',
    200: '#9C5BCD',
    300: '#8A3BC4',
    400: '#7432A4',
    500: '#5E2885',
    600: '#3F1B5A',
    700: '#210E2F',
    800: '#030104',
    900: '#000000',
  },
  success: {
    DEFAULT: '#168375',
    50: '#6BE6D6',
    100: '#5AE3D1',
    200: '#37DDC7',
    300: '#22C8B3',
    400: '#1CA594',
    500: '#168375',
    600: '#0E534A',
    700: '#06231F',
    800: '#000000',
    900: '#000000',
  },
  info: {
    DEFAULT: '#3F88C5',
    50: '#CCDFF0',
    100: '#BCD6EB',
    200: '#9DC2E1',
    300: '#7EAFD8',
    400: '#5E9BCE',
    500: '#3F88C5',
    600: '#2F6B9D',
    700: '#224D72',
    800: '#153046',
    900: '#08131B',
  },
  warning: {
    DEFAULT: '#FFBA08',
    50: '#FFEDC0',
    100: '#FFE8AB',
    200: '#FFDC82',
    300: '#FFD15A',
    400: '#FFC531',
    500: '#FFBA08',
    600: '#CF9500',
    700: '#976D00',
    800: '#5F4400',
    900: '#271C00',
  },
  error: {
    DEFAULT: '#D00000',
    50: '#FF8989',
    100: '#FF7474',
    200: '#FF4B4B',
    300: '#FF2323',
    400: '#F90000',
    500: '#D00000',
    600: '#980000',
    700: '#600000',
    800: '#280000',
    900: '#000000',
  },
};

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors,
    },
  },
  plugins: [],
};


import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

import pkg from './package.json';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5000,
    host: "0.0.0.0", // Set the host to 0.0.0.0
  },
  build: {
    lib: {
      entry: './src/index.tsx',
      name: pkg.name,
      fileName: 'index',
    },
  },
});


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

Errors  Files
     1  src/components/color-change-swatch.tsx:13
     2  src/components/color-picker/color-select.tsx:11
     1  src/components/color-picker/color-swatch.tsx:6
     1  src/components/color-properties/to-cmyk.tsx:8
     1  src/components/color-properties/to-hsl.tsx:8
     1  src/components/color-properties/to-hsv.tsx:8
     1  src/components/color-properties/to-rgb.tsx:8
     1  src/components/related-colors/index.tsx:11

Learn how to define all possible values of the context using union.

Getting Started

Simplifying Reducers in React

A Gentle Introduction to Generics

Navigating the Perils and Pitfalls of Using React’s Context API

Extending DOM Elements and Creating Polymorphic Components

A Guided Tour of the Three Biggest Features in TypeScript 5.0

TypeScript Mastery: Enhancing Code Quality and Scalability

Conclusion

A Compromised Solution: Tell the Truth

Defining possible types