Zachary DeRose ZackDeRose

Rough Schedule

breaks are in bold

8:00am PST | 11:00am EST - Introductions
8:05am PST | 11:05am EST - Lab 1
8:30am PST | 11:30am EST - Lab 2
9:00am PST | 12:00pm EST - Lab 3
9:30am PST | 12:30pm EST - BREAK!!
10:00am PST | 1:00pm EST - Lab 4

TypeScript Function Syntaxes

I'm trying to create examples of all the different ways to write functions and function type definitions in TypeScript.

One requirement is these examples must work with strict mode (noImplicitAny, etc) enabled.

If I'm missing anything, please add comments below with examples. I'll eventually put this into a blog post.

Keep in mind that there are TONS of combinations of different syntaxes. I only want to include those which are less obvious combinations or unique in some way.

Workspace Schematics

A utilitarian guide for creating Nx Workspace Schematics

Notes on Schematic - When They Are and Are Not Useful

Schematics are a one-time event that adjusts your filesystem - usually for the purpose of automating boilerplate or configuration.

If you've ever written down a list of things to do or files to adjust everytime you create a component (for example), a schematic is an excellent solution.

	function prefixTerminalOutput(cp: ChildProcess, prefix: string) {
	function logWithPrefix(data: string) {
	if (!data) {
	return;
	}
	console.log(
	data
	.split('\n')
	.map((line) => `${prefix} ${line}`)
	.join('\n')

	async function startBackendServer(options: ServeFullstackExecutorSchema) {
	let frontendServerStarted = false;
	return new Promise(() => {
	const childProcess = exec(`npx nx serve ${options.backendProject}`, {
	maxBuffer: LARGE_BUFFER,
	});
	process.on('exit', () => childProcess.kill());
	process.on('SIGTERM', () => childProcess.kill());
	childProcess.stdout.on('data', (data) => {
	if (!frontendServerStarted && data.includes('No errors found.')) {

	// ...

	async function createReactApplication(
	tree: Tree,
	options: AppGeneratorSchema,
	webAppName: string
	) {
	await reactAppGenerator(tree, {
	name: webAppName,
	linter: Linter.EsLint,

	async function createReactApplication(
	tree: Tree,
	options: AppGeneratorSchema,
	webAppName: string
	) {
	await reactAppGenerator(tree, {
	name: webAppName,
	linter: Linter.EsLint,
	style: 'css',
	e2eTestRunner: 'none',

	@import url("https://use.typekit.net/rcr1opg.css");

	/*
	! tailwindcss v3.2.2 \| MIT License \| https://tailwindcss.com
	*/

	/*
	1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
	2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
	*/

	const COUNT = 10000;

	interface Hero {
	heroName: string;
	heroId: number;
	}

	interface AlterEgo {
	realName: string;
	heroId: number;