Zach Seaman znseaman

## Transitioning an Existing Project to TypeScript.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                znseaman
                / Transitioning an Existing Project to TypeScript.md
            
            
              Created
              April 17, 2020 19:21
            
              
                Transitioning an Existing Project from JavaScript to TypeScript
              
          
    Transitioning an Existing Project from JavaScript to TypeScript

by Zachary Seaman

Transitioning an existing project to TypeScript seems tough. In this post, I will show a 3 step plan to do so without disruption or undue stress.
A couple of warnings before we get started. First, improve low test coverage to ensure project stability during the transition. Second, refrain from functional changes to verify the project isn’t working because of TypeScript and not a recently introduced bug. With the warnings out of the way, let’s jump in!
From the “TypeScript 3 Fundamentals” course on Frontend Masters, the instructor Mike North laid out a 3 step plan as follows:

  
## 1001albums.md

      
              1 file
            
          
              3 forks
            
          
              0 comments
            
          
              2 stars
            
          
                znseaman
                / 1001albums.md
            
            
              Last active
              December 12, 2016 15:29
            
              
                Pitchfork's 1001 Albums You Must Hear Before You Die
              
          
    50s


	Sinatra, Frank – In the Wee Small Hours
	Presley, Elvis – Elvis Presley (1956)
	Louvin Brothers – Tragic Songs of Life
	Prima, Louis – Wildest
	Domino, Fats – This is Fats
	Ellington, Duke – At Newport (1956)
	Sinatra, Frank – Songs for Swingin’ Lovers!
	Crickets – Chirping…


## jsbin.egazEqu.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<meta charset=utf-8 />
<title>Interactivity Outside of Map</title>

  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src='http://api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js'></script>

## jsbin.AweLoKE.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<meta charset=utf-8 />
<title>Interactivity Outside of Map</title>

  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src='http://api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.css' rel='stylesheet' />

## gist:7845273

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                znseaman
                / gist:7845273
            
            
              Last active
              December 30, 2015 14:59
            
              
                Interactivity Sources for Tamaulipas Map
              
          
    Process Tree


Style via TileMill
Export to .mbtiles (2 things included: raster images and UTFGrid teaser)


3 Implementation Options

MapBox Hosting


Expensive if very large
Upload .mbtiles to MapBox and a TileJSON is created for you (bundles raster images and UTFGrid teaser together)


MBTiles server implementation like TileStream (Tested: Mac OS X 10.6, Ubuntu 10.04, Ubuntu 11.04, Dependency: node 0.8.x, At least 613MB memory, Ubuntu install guide or here or VM or gotchas)


Server needed


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 GeoJSON in Leaflet</title>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
  <!--[if lte IE 8]>
    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet'>
  <![endif]--><style>
html, body, #map { height: 100%;width:100%; background:#000000;position:absolute;}
body { padding: 0; margin: 0; }
path { stroke-linejoin; round; stroke-linecap: round; fill: none}

## map.geojson

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                znseaman
                / map.geojson
            
            
              Created
              September 3, 2013 19:02
            
              
                via:geojson.io
              
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## map.geojson

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                znseaman
                / map.geojson
            
            
              Created
              September 3, 2013 18:51
            
              
                via:geojson.io
              
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## map.geojson

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                znseaman
                / map.geojson
            
            
              Created
              September 3, 2013 17:09
            
              
                via:geojson.io
              
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]" />
	<meta charset=utf-8 />
	<title>Interactivity Outside of Map</title>

	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js'></script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>D3 GeoJSON in Leaflet</title>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
	<!--[if lte IE 8]>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet'>
	<![endif]--><style>
	html, body, #map { height: 100%;width:100%; background:#000000;position:absolute;}
	body { padding: 0; margin: 0; }
	path { stroke-linejoin; round; stroke-linecap: round; fill: none}