hankandre/typescript-fundamentals

Frontend Master Typescript course

This is the example project used for the Mike.Works TypeScript Fundamentals course.

What are the pieces?

• Webpack 3
• TypeScript 2.5, setup for experimental decorator support
• TSLint for linting, setup with a strict JSX-friendly set of rules
• sass-loader for traditional management of styles
• React v16 for building components
• Hot Loader v3 so styles and JS are updated in place as you save source code
• extract-text-webpack-plugin so compiled styles are external stylesheets instead of inline style blocks
• Jest as a testing platform

Please make sure you have the following software installed before arriving at the workshop or beginning the course.

General Packages

Please make sure you have the following general software installed

Required	Library	Version Range	Notes
✔	Node.js	>= 8.0	nvm is highly recommended for managing multiple node versions on a single machine
✔	Visual Studio Code	>= 1.14	We'll be using several specific features of the VS Code editor. We can't force you to use it, but you'll miss out if you don't!
✔	Yarn	>= 0.24	An alternative to npm (if you are using nvm: brew install yarn --without-node, else use brew install yarn)

VS Code Extensions

Additionally, to take advantage of syntax hilighting, static code analysis and other editor features, you'll want to install the latest version of the following VS Code extensions

Required	Extension	Notes
✔	sass-indented	Syntax highlighting and code completion support for Sass stylesheets
✔	tslint	Static code analysis for JavaScript and TypeScript files
✔	jest	Syntax highlighting for Jest snapshot testing and in-editor test pass/fail statuses
✔	Debugger for Chrome	Allows us to attach to Chrome for debugging
	vscode-icons	Better file and folder icons

Global Node.js Packages

Make sure you have these npm packages installed globally. This can be done by running

npm install -g <package-name>

Required	Library	Version Range
✔	typescript	^2.5.0
✔	tslint	^5.7.0
✔	ts-node	^3.3.0

Project setup

First, clone this project from Github

git clone https://github.com/mike-north/typescript-fundamentals tscript
cd tscript

Finally, while in the top-level folder of this project, download the and install this project's dependencies by running

yarn

To start the app, run

npm test accounts 

and you should see some failing tests waiting for you

How to use it

Start the Development Server

npm start <exercise-name>

Build Development Assets in the /dist folder

This will be an un-minified version of an exercise, and will include some webpack-specific tooling, intended only for development use

npm run build:dev <exercise-name>

Build Production Assets in the /dist folder

This will be an an optimized version of the exercise

npm run build:dist <exercise-name>

The Exercise Folder

Exercises are standalone mini-projects with the following folder structure.

index.html   # HTML served for exercise
./src        # Scripts (ts, js, tsx and jsx)
./styles     # Styles
   ⌙ app.scss       #  (optional) Entry point for styles
./tests      # Tests
   ⌙ myfile.test.ts # Tests must have *.test.js or *.test.ts

License

While the general license for this project is the BSD 3-clause, the exercises themselves are proprietary and are licensed on a per-individual basis, usually as a result of purchasing a ticket to a public workshop, or being a participant in a private training.

Here are some guidelines for things that are OK and NOT OK, based on our understanding of how these licenses work:

OK

• Using everything in this project other than the exercises (or accompanying tests) to build a project used for your own free or commercial training material
• Copying code from build scripts, configuration files, tests and development harnesses that are not part of the exercises specifically, for your own projects
• As an owner of an individual license, using code from tests, exercises, or exercise solutions for your own non-training-related project.

NOT OK (without express written consent)

• Using this project, or any subset of exercises contained within this project to run your own workshops
• Writing a book that uses the code for these exercises
• Recording a screencast that contains one or more of this project's exercises

Copyright

© 2017 Mike.Works, All Rights Reserved

This material may not be used for workshops, training, or any other form of instructing or teaching developers, without express written consent