SRS updated Sesh 1 materials, added in our code-along examples

README.md

@@ -6,6 +6,6 @@ This track will help you learn how to use Github reliably and make your own dyna
 
 # Supplemental React & JavaScript
 
-Building upon Pt. 1 of our React sessions, we'll focus on how some more concepts in React, JavaScript can help us write cleaner, more efficient, and more maintainable code!
+Building upon Pt. 1 of our React sessions, we'll focus on how some more concepts in React, JavaScript, and TypeScript can help us write cleaner, more efficient, and more maintainable code!
 
 

supplemental-react/01_ts_my_type_of_language/README.md

@@ -8,6 +8,7 @@ go into more depth on how to switch!
     * [Webpack](#webpack)
     * [Linting](#linting)
     * [Github Actions](#github-actions)
+    *[Husky](#husky)
     * [Yarn](#yarn)
         * [NPM To Yarn](#npm-to-yarn)
     * [TypeScript](#typescript)
@@ -39,6 +40,9 @@ We use [ESLint](https://eslint.org) and [stylelint](https://stylelint.io) to hel
 ### Github Actions
 We have set-up GitHub Actions to automatically test our builds to see if there's any issues and lint our code as well.
 
+### Husky
+Husky uses Git Hooks to automatically run our linters and testers when we push with github actions.
+
 ### Yarn
 
 We've changed our package manager from npm to yarn because it's a lot faster and there used to be some security concerns with npm!
@@ -291,6 +295,19 @@ function callPet(pet : Pet) : string{
 }
 ```
 
+We can also type our objects through our interfaces like so:
+
+```ts
+const newPet : Pet = {
+    name: {
+        first: "Rufus",
+        last: "the Third"
+    },
+    type: "dog"
+}
+```
+
+
 ## TypeScript In React
 You can also use TypeScript in React applications, but just make sure that if you use JSX elements anywhere that you label your files as `.tsx`!
 

supplemental-react/01_ts_my_type_of_language/example_scripts/build/tsTests.js

@@ -1,26 +1,28 @@
 "use strict";
-//BEHAVIOR YOU DON'T WANT
+//TYPES
 function divideTwoNums(a, b) {
     return a / b;
 }
 //console.log(divideTwoNums(8,4));
-//console.log(divideTwoNums("tree","chocolate"));
-//CRASHING BEHAVIOR
-var myPet = "Rufus";
-var newPet = {
+//console.log(divideTwoNums("apple","banana"));
+//INTERFACES
+var myPet = {
     name: {
         first: "Rufus",
-        last: "the Third"
+        last: "The Third"
+    },
+    type: "dog"
+};
+myPet = {
+    name: {
+        first: "Rufus",
+        middle: "Or",
+        last: "The Third"
     },
     type: "dog"
 };
 function callPet(pet) {
-    return "Come here " + pet + "!";
+    return "Come here, " + pet.name.first;
 }
 console.log(callPet(myPet));
-//transpiling
-var arr = [1, 2, 3, 4, 5];
-var func = function (arr) {
-    arr.forEach(function (num) { return console.log(num); });
-};
-//console.log(func(arr));
+//console.log(callPet("Rufus"));

supplemental-react/01_ts_my_type_of_language/example_scripts/build/typedExamples.js

@@ -0,0 +1,24 @@
+"use strict";
+//multiply two numbers
+function multiplyTwoNums(a, b) {
+    return a * b;
+}
+var mattchoo = {
+    name: "Matt",
+    pronouns: "he/him",
+};
+function greetPerson(person) {
+    return "Hello there, " + person.name + " (" + person.pronouns + ")!";
+}
+var smithsonian = {
+    type: "obsidian",
+    age: 40
+};
+var moma = {
+    type: "diamond",
+    age: 200
+};
+function sumAges(first, second) {
+    return first.age + second.age;
+}
+//console.log(sumAges(smithsonian, moma));

supplemental-react/01_ts_my_type_of_language/example_scripts/examples.js

@@ -0,0 +1,37 @@
+//multiply two numbers
+function multiplyTwoNums(a,b){
+  return a*b;
+}
+
+
+
+//greetPerson
+
+const mattchoo = {
+  name: "Matt",
+  pronouns: "he/him",
+};
+
+function greetPerson(person) {
+  return "Hello there, " + person.name + " (" + person.pronouns + ")!";
+}
+
+//console.log(greetPerson(mattchoo));
+
+//Add Ages of two rocks
+
+const smithsonian = {
+  type: "obsidian",
+  age: 40
+}
+
+const moma = {
+  type: "diamond",
+  age: 200
+}
+
+function sumAges(first, second){
+  return first.age + second.age;
+}
+
+//console.log(sumAges(smithsonian, moma));

supplemental-react/01_ts_my_type_of_language/example_scripts/jsTests.js

@@ -1,32 +1,46 @@
-//BEHAVIOR YOU DON'T WANT
-// function divideTwoNums(a,b){
-//     return a/b;
-// }
-
+//divide two nums
+function divideTwoNums(a,b){
+    return a/b;
+}
 // console.log(divideTwoNums(8,4));
 
-// console.log(divideTwoNums("tree","chocolate"));
-
-
-//TODO: show refactoring functions and interfacing with objects
+//console.log(divideTwoNums("apple","banana"));
 
-
-//CRASHING BEHAVIOR
-const myPet = "Rufus";
-
-const newPet = {
+//Call Your Pet
+let myPet = "Rufus";
+myPet = {
     name: {
         first: "Rufus",
-        last: "the Third"
+        last: "The Third"
     },
     type: "dog"
-};
+}
+
 
 function callPet(pet){
-    return "Come here "+ pet.name.first + "!";
+    return "Come here, " + pet;
 }
 
 console.log(callPet(myPet));
 
-//error!
-console.log(callPet(newPet));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

supplemental-react/01_ts_my_type_of_language/example_scripts/package.json

@@ -5,5 +5,6 @@
   "license": "MIT",
   "dependencies": {
     "typescript": "^4.3.4"
-  }
+  },
+  "scripts": {}
 }

supplemental-react/01_ts_my_type_of_language/example_scripts/tsTests.ts

@@ -1,54 +1,46 @@
 
-//BEHAVIOR YOU DON'T WANT
-function divideTwoNums(a: number, b: number): number{
+//TYPES
+function divideTwoNums(a : number ,b : number) : number{
     return a/b;
 }
-
 //console.log(divideTwoNums(8,4));
 
-//console.log(divideTwoNums("tree","chocolate"));
-
-//CRASHING BEHAVIOR
-// const myPet = "Rufus";
-// type Pet = string;
-// // function callPet(pet : Pet) : string{
-// //     return "Come here " + pet + "!"
-// // }
-
-// const newPet = {
-//     name: {
-//         first: "Rufus",
-//         last: "the Third"
-//     },
-//     type: "dog"
-// }
-
+//console.log(divideTwoNums("apple","banana"));
 
 
+//INTERFACES
 
-interface Pet {
+let myPet : Pet = {
     name: {
-        first: string,
-        last: string
+        first: "Rufus",
+        last: "The Third"
     },
-    type: string
+    type: "dog"
 }
 
-function callPet(pet : Pet) : string{
-    return "Come here " + pet.name.first + "!"
+myPet = {
+    name: {
+        first: "Rufus",
+        middle: "Or",
+        last: "The Third"
+    },
+    type: "dog"
 }
 
-//this gives us errors!
-//console.log(callPet(myPet));
-//console.log(callPet(newPet));
-
+interface Pet {
+    name: {
+        first: string;
+        middle?: string;
+        last: string;
+    },
+    type : string
+}
 
 
+function callPet(pet : Pet){
+    return "Come here, " + pet.name.first;
+}
 
+console.log(callPet(myPet));
 
-//transpiling
-// const arr = [1,2,3,4,5]
-// let func = (arr: Array<number> ) =>{
-//     arr.forEach(num=>console.log(num))
-// }
-//console.log(func(arr));
+//console.log(callPet("Rufus"));

supplemental-react/01_ts_my_type_of_language/example_scripts/tsconfig.json

@@ -4,8 +4,8 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
-    "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
@@ -14,7 +14,7 @@
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                           /* Generates corresponding '.map' file. */
     // "outFile": "./",                             /* Concatenate and emit output to single file. */
-     "outDir": "./build/",                              /* Redirect output structure to the directory. */
+    "outDir": "./build/"                            /* Redirect output structure to the directory. */,
     // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                           /* Enable project compilation */
     // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
@@ -25,7 +25,7 @@
     // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
     /* Strict Type-Checking Options */
-    "strict": true,                                 /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                    /* Enable strict null checks. */
     // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
@@ -51,7 +51,7 @@
     // "typeRoots": [],                             /* List of folders to include type definitions from. */
     // "types": [],                                 /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
     // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
     // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
 
@@ -66,7 +66,7 @@
     // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
 
     /* Advanced Options */
-    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
   }
 }