From 5072f7d93e24323bf66ac4aa637b2859034876d5 Mon Sep 17 00:00:00 2001 From: Matthew Nieva Date: Thu, 24 Jun 2021 22:16:42 -0700 Subject: [PATCH] SRS updated Sesh 1 materials, added in our code-along examples --- README.md | 2 +- .../01_ts_my_type_of_language/README.md | 17 +++++ .../example_scripts/build/tsTests.js | 28 ++++---- .../example_scripts/build/typedExamples.js | 24 +++++++ .../example_scripts/examples.js | 37 +++++++++++ .../example_scripts/jsTests.js | 52 +++++++++------ .../example_scripts/package.json | 3 +- .../example_scripts/tsTests.js | 16 ----- .../example_scripts/tsTests.ts | 64 ++++++++----------- .../example_scripts/tsconfig.json | 14 ++-- .../example_scripts/typedExamples.ts | 51 +++++++++++++++ 11 files changed, 215 insertions(+), 93 deletions(-) create mode 100644 supplemental-react/01_ts_my_type_of_language/example_scripts/build/typedExamples.js create mode 100644 supplemental-react/01_ts_my_type_of_language/example_scripts/examples.js delete mode 100644 supplemental-react/01_ts_my_type_of_language/example_scripts/tsTests.js create mode 100644 supplemental-react/01_ts_my_type_of_language/example_scripts/typedExamples.ts diff --git a/README.md b/README.md index 2dad85d..e55c87e 100644 --- a/README.md +++ b/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! diff --git a/supplemental-react/01_ts_my_type_of_language/README.md b/supplemental-react/01_ts_my_type_of_language/README.md index 1156308..802730d 100644 --- a/supplemental-react/01_ts_my_type_of_language/README.md +++ b/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`! diff --git a/supplemental-react/01_ts_my_type_of_language/example_scripts/build/tsTests.js b/supplemental-react/01_ts_my_type_of_language/example_scripts/build/tsTests.js index 0f65965..19020d3 100644 --- a/supplemental-react/01_ts_my_type_of_language/example_scripts/build/tsTests.js +++ b/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")); diff --git a/supplemental-react/01_ts_my_type_of_language/example_scripts/build/typedExamples.js b/supplemental-react/01_ts_my_type_of_language/example_scripts/build/typedExamples.js new file mode 100644 index 0000000..a4a4520 --- /dev/null +++ b/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)); diff --git a/supplemental-react/01_ts_my_type_of_language/example_scripts/examples.js b/supplemental-react/01_ts_my_type_of_language/example_scripts/examples.js new file mode 100644 index 0000000..3007498 --- /dev/null +++ b/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)); diff --git a/supplemental-react/01_ts_my_type_of_language/example_scripts/jsTests.js b/supplemental-react/01_ts_my_type_of_language/example_scripts/jsTests.js index 8d85533..2a7d569 100644 --- a/supplemental-react/01_ts_my_type_of_language/example_scripts/jsTests.js +++ b/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)); + + + + + + + + + + + + + + + + + + + + + diff --git a/supplemental-react/01_ts_my_type_of_language/example_scripts/package.json b/supplemental-react/01_ts_my_type_of_language/example_scripts/package.json index 76e7c3b..99d5f94 100644 --- a/supplemental-react/01_ts_my_type_of_language/example_scripts/package.json +++ b/supplemental-react/01_ts_my_type_of_language/example_scripts/package.json @@ -5,5 +5,6 @@ "license": "MIT", "dependencies": { "typescript": "^4.3.4" - } + }, + "scripts": {} } diff --git a/supplemental-react/01_ts_my_type_of_language/example_scripts/tsTests.js b/supplemental-react/01_ts_my_type_of_language/example_scripts/tsTests.js deleted file mode 100644 index a87e82c..0000000 --- a/supplemental-react/01_ts_my_type_of_language/example_scripts/tsTests.js +++ /dev/null @@ -1,16 +0,0 @@ -//BEHAVIOR YOU DON'T WANT -function divideTwoNums(a, b) { - return a / b; -} -function callPet(pet) { - return "Come here " + pet.name.first + "!"; -} -//this gives us errors! -//console.log(callPet(myPet)); -//console.log(callPet(newPet)); -//transpiling -// const arr = [1,2,3,4,5] -// let func = (arr: Array ) =>{ -// arr.forEach(num=>console.log(num)) -// } -//console.log(func(arr)); diff --git a/supplemental-react/01_ts_my_type_of_language/example_scripts/tsTests.ts b/supplemental-react/01_ts_my_type_of_language/example_scripts/tsTests.ts index 421bb76..58a1335 100644 --- a/supplemental-react/01_ts_my_type_of_language/example_scripts/tsTests.ts +++ b/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 ) =>{ -// arr.forEach(num=>console.log(num)) -// } -//console.log(func(arr)); \ No newline at end of file +//console.log(callPet("Rufus")); \ No newline at end of file diff --git a/supplemental-react/01_ts_my_type_of_language/example_scripts/tsconfig.json b/supplemental-react/01_ts_my_type_of_language/example_scripts/tsconfig.json index 39fe0ac..a64a38b 100644 --- a/supplemental-react/01_ts_my_type_of_language/example_scripts/tsconfig.json +++ b/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. */ } } diff --git a/supplemental-react/01_ts_my_type_of_language/example_scripts/typedExamples.ts b/supplemental-react/01_ts_my_type_of_language/example_scripts/typedExamples.ts new file mode 100644 index 0000000..8cb042d --- /dev/null +++ b/supplemental-react/01_ts_my_type_of_language/example_scripts/typedExamples.ts @@ -0,0 +1,51 @@ +//multiply two numbers +function multiplyTwoNums(a : number,b : number) : number{ + return a*b; + } + + + + //types/interfaces + //greetPerson + + interface Person { + name: string; + pronouns: string; + } + + const mattchoo : Person = { + name: "Matt", + pronouns: "he/him", + }; + + function greetPerson(person: Person) : string { + return "Hello there, " + person.name + " (" + person.pronouns + ")!"; + } + + + //console.log(greetPerson(mattchoo)); + + + //typing objects + + //Add Ages of two rocks + interface Rock { + type: string + age: number + } + + const smithsonian : Rock = { + type: "obsidian", + age: 40 + } + + const moma : Rock = { + type: "diamond", + age: 200 + } + function sumAges(first : Rock, second : Rock) : number{ + return first.age + second.age; + } + + //console.log(sumAges(smithsonian, moma)); + \ No newline at end of file