xiaoyunyang

function foo() {
  let res = ''
  let j = 10

  for(let i=0; i<j; i++) {
    // uncommenting ... the following line causes error
    // var j = 5
    res += `${j}, `
    j -= 1
  }

xiaoyunyang

function Person(name) {
   var secret = “secret!”
   this.name = name
   this.setName = function(newName) { this.name = newName }
   this.setNameToFoo = function() { this.name = foo }
   this.getSecret = function() { return secret }
}
 
var a = new Person(“Max”)
 

xiaoyunyang

The example is taken from TypeScript's quick start tutorial

In JavaScript

const greeter = (person) => "hello "+person;
greeter([1,2,3]) // "hello 1,2,3"

In TypeScript

xiaoyunyang

What to Test

Testing interfaces

• Child component with the right props

import EditProfileForm from "../feedbackForm";
import Checkbox from "../checkbox";
import EmailInput from "../EmailInput";

xiaoyunyang

css-grid-flowchart

The visualization component takes as inputs

• matrix - A N x M matrix where N is the number of columns and M is the number of rows. Each element of the matrix specifies the i of building block to render.
• workflowVisData - A datastructure that represents the graph of all the workflow steps with information on how they are connected and the distance between the node and the root of the graph (assumed to be a directed acyclic graph (DAG)).

matrix is created from workflowVisData as follows:

1. Initialize a N x M matrix. N is longest path in the DAG (workflowStepOrder is pre-calculated for each node in the graph which provides the path of the node from the root node). M is calculated from the largest frequency of workflowStepOrder. matrix is initialized with empty.

xiaoyunyang

Talks

• The State of TypeScript in 2019 by Jason Killian
• Intro to TypeScript by Dan Vanderkam
• Strong Strings by Jason Killian
• Shipping TypeScript to NPM by Steve Faulkner
• End-to-end Type safe GraphQL Apps with Typescript by Carlos Rufo
• Building Custom TSLint Rules by Ash Furrow
• Type Variance & Type Safety in React Prop Injection by Scott Cheng
• Referential Transparency by Dan Vanderkam

xiaoyunyang

package main

import (
	"math/rand"
	"os"

	svg "github.com/ajstarks/svgo"
)

var (

xiaoyunyang

import React from 'react';
import PropTypes from 'prop-types';
import {
  convertToRaw,
  EditorState,
  RichUtils
} from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createMarkdownPlugin from 'draft-js-markdown-plugin';
import createInlineToolbarPlugin, { Separator } from 'draft-js-inline-toolbar-plugin';

xiaoyunyang

// Parentheses Tally
const newOpenCnt = (c, openCnt) => {
  if (c === '(') return openCnt + 1
  if (c === ')') return openCnt - 1
  return openCnt
}

function isBalanced(str, openCnt) {
  // Continue or Stop?
  if (typeof str !== 'string') return false

xiaoyunyang

const test = (fun testCases) => {
  testCases.map(t => {
    const shouldBe = t.shouldBe;
    const is = fun(t.test);
    const res = (shouldBe === is) ? 'passed' : 'failed';
    const moreInfo = (res === 'failed') ? `testing ${t.test}. Should be ${shouldBe} but got ${is}` : ''
    console.log(`${res} ${moreInfo}`);
  })
}