Go Typed
or
Go Home

Cameron Woodmansee

@camdub

Sara Taylor

@sbt9uc

our current application (after 1.5 years)

developers

15

130

1.6

lines of React/Redux

Jest tests

k

k

1. What is TypeScript?

2. Why TypeScript?

3. React/Redux Tips

4. What Next?

1. What is TypeScript?

2. Why TypeScript?

3. React/Redux Tips

4. What Next?

JS

TS

TypeScript is a superset of JavaScript

Why do I want types?

  • Self-documenting
  • Catch bugs sooner
  • Enable IDE Support
  • Easy to navigate codebase

or

function square(n) {
  return n * n;
}

square("oops");
function square(n) {
  return n * n;
}

square("oops");

//  ¯\_(ツ)_/¯
// Use noImplicityAny
function square(n) {
  return n * n;
}

square("oops");
Error (x2)
string. The operand of an arithmetic operation must be a number.
 ^ 
 ^ 
function square(n) {
  return n * n;
}

square({});

//  ¯\_(ツ)_/¯

1. What is TypeScript?

2. Why TypeScript?

3. React/Redux Tips

4. What Next?

Assignment

  • Write a copy of a large e-commerce application

Challenges

  • Large, distributed team with huge undocumented codebase
  • Team changes on regular basis
  • Discoverability

Why did we want types?

  • Easier to onboard new developers
  • Keep code quality and discoverability high with large team

Why TypeScript for us?

  • Fewer issues configuring
  • Easier to install 3rd party types
  • StackOverflow/Google test

Popularity

FlowType TypeScript
StackOverflow ~900 ~38,000
GitHub Issues 1,500 open
2,200 closed		 2,400 open
11,200 closed
npm downlaods
per month		 2.9 million 7.2 million
external type definitions

340

3,700

1. What is TypeScript?

2. Why TypeScript?

3. React/Redux Tips

4. What Next?

Guiding Principle

1

Type everything as explicitly as possible

explicitly

Related tips

  • Avoid overtyping

 

  • Add comments to all types and exported functions/components

 

  • It's okay to sometimes use any--don't let TS get in your way

 

  • Map types to server DTOs and then if needed, map those to UI types

Prop Types

Union Types

Actions and Reducers

Connected Components

Styled Components

Use Comments in Props 

export interface ILozengeProps extends ILozengeFontProps {
  /**
   * [optional] Color to override default color of black
   */
  lozengeBackgroundColor?: lozengeColor;

  /**
   * [optional] Type of lozenge with regard to border radius
   * Default is the pill style lozenge with rounded corners
   * Circle will make border radius 50% to create a circle
   */
  lozengeType?: 'pill' | 'circle';

  /**
   * [optional] Add border the same color as font to lozenge.
   * Default is white, same as default font
   */
  border?: boolean;

  /**
   * [optional] height and width to add to lozenge
   */
  dimensions?: { height: string; width: string };
}

Prop Types

Union Types

Actions and Reducers

Connected Components

Styled Components

Prop Types

Union Types

Actions and Reducers

Connected Components

Styled Components

Prop Types

Union Types

Actions and Reducers

Connected Components

Styled Components

Prop Types

Union Types

Actions and Reducers

Connected Components

Styled Components

Notes

 

 

const StyledBase = styled.div<IProps>`
  color: ${props => props.coolTextColor};
`;

1. What is TypeScript?

2. Why TypeScript?

3. React/Redux Tips

4. What Next?

How to convert to TypeScript

  1. Rename file from .js to .ts
  2. Create tsconfig.json
  3. Add loader for TypeScript to Webpack
  4. Profit
module: {
    rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        }
    ],
},
resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".tsx", ".js"]
},

Helpful Links

Q&A

go typed or go home

By Cameron Woodmansee

Made with Slides.com

go typed or go home

  • 116