Code Monkey home page Code Monkey logo

typescript-courses's Introduction

TypeScript Training w/ Mike North

This repo contains the code for

The course website is at www.typescript-training.com

Website

Operating System

This workshop project works best in a POSIX-compliant dev environment like Linux, macOS, or Windows 10 (with Windows Subsystem for Linux).

JavaScript Tool chain

  • We'll be using yarn as our package manager, not npm
  • Please install Volta, to ensure you run this project with the correct node and yarn versions

Browser

We recommend using a Chromium-based browser like Microsoft Edge, Brave, Opera or Chrome.

Editor

Although TypeScript can theoretically work well in any authoring environment that supports the Language Server Protocol, Visual Studio Code is the officially supported editor for this course.

Checking out the code & preparing to run

  • If you don't yet have a GitHub account, create a new one and set up your SSH keys

    • If you've done this correctly, you should be able to run ssh [email protected] in your terminal, and see something like Hi mike-north! You've successfully authenticated, but GitHub does not provide shell access.
  • Clone this repo by running git clone [email protected]:mike-north/typescript-courses

  • Enter the repo by running cd typescript-courses

  • Install dependencies by running yarn (volta may download the right version(s) automatically)

Running the project(s)

Projects are found within the packages folder, each can be started using the command yarn dev-<project name>.

For example

  • yarn dev-website starts the website project

Legal

Β© 2023, All Rights Reserved - Mike Works, Inc.

typescript-courses's People

Contributors

1marc avatar benjamintrainorjs avatar crs1138 avatar dependabot[bot] avatar donatj avatar evanbb avatar justinjunodev avatar lisaychuang avatar luml avatar maciej-ka avatar mbalazy avatar mike-north avatar nnigmat avatar phpmvk avatar prakashio avatar sentience avatar skawaguchi avatar ssmkhrj avatar vadim-loginov avatar vikingviolinist avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

typescript-courses's Issues

Resolve 'Cannot find module scheduler/tracing' TypeScript Error

We are encountering a TypeScript error when trying to compile the project using yarn dev-hello-ts. The error message is as follows:

../../node_modules/@types/react/index.d.ts:41:53 - error TS2307: Cannot find module 'scheduler/tracing' or its corresponding type declarations.

41 import { Interaction as SchedulerInteraction } from "scheduler/tracing";

Steps to Reproduce:

  • Clone the repository and navigate to the project directory.
  • Run yarn install.
  • cd packages
  • Run yarn dev-hello-ts

Content: Type Queries

const alreadyResolvedNum = Promise.resolve(4);

type ResolveType = typeof Promise.resolve;

const x: ResolveType = Promise.resolve;
x(42).then(y => y.toPrecision(2));
  • This should also include keyof

Content: Mapped Types

interface CommunicationMethods {
  email: HasEmail;
  phone: HasPhoneNumber;
  fax: { fax: number };
}

function contact<K extends keyof CommunicationMethods>(
  method: K,
  contact: CommunicationMethods[K] // πŸ’‘turning key into value -- a *mapped type*
) {
  //...
}
contact("email", { name: "foo", email: "[email protected]" });
contact("phone", { name: "foo", phone: 3213332222 });
contact("fax", { fax: 1231 });

// we can get all values by mapping through all keys
type AllCommKeys = keyof CommunicationMethods;
type AllCommValues = CommunicationMethods[keyof CommunicationMethods];

Use of class field initializers or param properties with super keyword

It's said in the class chapter that "while it is possible in JS to put stuff before super(), the use of class field initializers or param properties disallows this", but the compiler doesn't give me an error when I run stuff before super with field initializers or param properties.

Inconsistent Footer Text

While working through your latest workshop, I noticed the copyright information in the course-layout.tsx component didn't include the "All Rights Reseved" text that is on the main layout.tsx file.

See #192 for more information and to resolve this issue.

Content: Generics - When they're pointless

how to identify "convenience casting" and other unnecessary use of generics

interface Shape {
  draw();
}
interface Circle extends Shape {
  radius: number;
}

function drawShapes1<S extends Shape>(shapes: S[]) {
  shapes.forEach(s => s.draw());
}

function drawShapes2(shapes: Shape[]) {
  // this is simpler. Above type param is not necessary
  shapes.forEach(s => s.draw());
}

Content: Conditional Types and `infer`

  • First discuss w/o infer
  • then introduce infer
type EventualType<T> = T extends Promise<infer S> // if T extends Promise<any>
  ? S // extract the type the promise resolves to
  : T; // otherwise just let T pass through

let a: EventualType<Promise<number>>;
let b: EventualType<number[]>;

Content: Declaration Merging

3 slots

function foo() {}
interface bar {}
namespace baz {
  export const biz = "hello";
}

testing for what you're dealing with

// how to test for a value
const x = foo; // foo is in the value position (RHS).

// how to test for a type
const y: bar = {}; // bar is in the type position (LHS).

// how to test for a namespace (hover over baz symbol)
baz;

export { foo, bar, baz }; // all are importable/exportable
/**
 * (3) Interfaces are purely types
 */
interface Address {
  street: string;
}

const z = Address; // 🚨 ERROR (fails value test)

/**
 * (4) Classes are both types _and_ values
 */

class Contact {
  name: string;
}

// passes both the value and type tests

const contactClass = Contact; // value relates to the factory for creating instances
const contactInstance: Contact = new Contact(); // interface relates to instances

/**
 * (5) declarations with the same name can be merged, to occupy the same identifier
 */

class Album {
  label: Album.AlbumLabel = new Album.AlbumLabel();
}
namespace Album {
  export class AlbumLabel {}
}
interface Album {
  artist: string;
}

let al: Album; // type test
let alValue = Album; // value test

export { Album }; // πŸ‘ˆ hover over the "Album" -- all three slots filled

/**
 * (6) Namespaces have their own slot, and are also values
 */

// πŸ’‘ they can be merged with classes

class AddressBook {
  contacts!: Contact[];
}
namespace AddressBook {
  export class ABContact extends Contact {} // inner class
}

const ab = new AddressBook();
ab.contacts.push(new AddressBook.ABContact());

// πŸ’‘ or functions

function format(amt: number) {
  return `${format.currency}${amt.toFixed(2)}`;
}
namespace format {
  export const currency: string = "$ ";
}

format(2.314); // $ 2.31
format.currency; // $

Update Course Links

Hey Mike!

I have some course site updates:

Can you update the links on the top of each course which point back to the course page on Frontend Masters (right now they are pointing to the workshop pages):

TS Fundamentals: https://frontendmasters.com/courses/typescript-v4/
Intermediate TS: https://frontendmasters.com/courses/intermediate-typescript-v2/
Enterprise: https://frontendmasters.com/courses/enterprise-typescript/

Note: We're going with enterprise-typescript without the "v2" since it's the first version with that title. Also, these links will 404 until we launch the courses (but you can update now).

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.