├── .gitignore ├── LICENSE ├── README.md ├── example.ts └── images ├── TS_JS.png └── TS_LOGO.png /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | lerna-debug.log* 10 | .pnpm-debug.log* 11 | 12 | # Diagnostic reports (https://nodejs.org/api/report.html) 13 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 14 | 15 | # Runtime data 16 | pids 17 | *.pid 18 | *.seed 19 | *.pid.lock 20 | 21 | # Directory for instrumented libs generated by jscoverage/JSCover 22 | lib-cov 23 | 24 | # Coverage directory used by tools like istanbul 25 | coverage 26 | *.lcov 27 | 28 | # nyc test coverage 29 | .nyc_output 30 | 31 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 32 | .grunt 33 | 34 | # Bower dependency directory (https://bower.io/) 35 | bower_components 36 | 37 | # node-waf configuration 38 | .lock-wscript 39 | 40 | # Compiled binary addons (https://nodejs.org/api/addons.html) 41 | build/Release 42 | 43 | # Dependency directories 44 | node_modules/ 45 | jspm_packages/ 46 | 47 | # Snowpack dependency directory (https://snowpack.dev/) 48 | web_modules/ 49 | 50 | # TypeScript cache 51 | *.tsbuildinfo 52 | 53 | # Optional npm cache directory 54 | .npm 55 | 56 | # Optional eslint cache 57 | .eslintcache 58 | 59 | # Optional stylelint cache 60 | .stylelintcache 61 | 62 | # Microbundle cache 63 | .rpt2_cache/ 64 | .rts2_cache_cjs/ 65 | .rts2_cache_es/ 66 | .rts2_cache_umd/ 67 | 68 | # Optional REPL history 69 | .node_repl_history 70 | 71 | # Output of 'npm pack' 72 | *.tgz 73 | 74 | # Yarn Integrity file 75 | .yarn-integrity 76 | 77 | # dotenv environment variable files 78 | .env 79 | .env.development.local 80 | .env.test.local 81 | .env.production.local 82 | .env.local 83 | 84 | # parcel-bundler cache (https://parceljs.org/) 85 | .cache 86 | .parcel-cache 87 | 88 | # Next.js build output 89 | .next 90 | out 91 | 92 | # Nuxt.js build / generate output 93 | .nuxt 94 | dist 95 | 96 | # Gatsby files 97 | .cache/ 98 | # Comment in the public line in if your project uses Gatsby and not Next.js 99 | # https://nextjs.org/blog/next-9-1#public-directory-support 100 | # public 101 | 102 | # vuepress build output 103 | .vuepress/dist 104 | 105 | # vuepress v2.x temp and cache directory 106 | .temp 107 | .cache 108 | 109 | # Docusaurus cache and generated files 110 | .docusaurus 111 | 112 | # Serverless directories 113 | .serverless/ 114 | 115 | # FuseBox cache 116 | .fusebox/ 117 | 118 | # DynamoDB Local files 119 | .dynamodb/ 120 | 121 | # TernJS port file 122 | .tern-port 123 | 124 | # Stores VSCode versions used for testing VSCode extensions 125 | .vscode-test 126 | 127 | # yarn v2 128 | .yarn/cache 129 | .yarn/unplugged 130 | .yarn/build-state.yml 131 | .yarn/install-state.gz 132 | .pnp.* 133 | 134 | .env -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License Copyright (c) 2022 Coding Garden 2 | 3 | Permission is hereby granted, free 4 | of charge, to any person obtaining a copy of this software and associated 5 | documentation files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, copy, modify, merge, 7 | publish, distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to the 9 | following conditions: 10 | 11 | The above copyright notice and this permission notice 12 | (including the next paragraph) shall be included in all copies or substantial 13 | portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF 16 | ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO 18 | EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR 19 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Introduction to Typescript 2 | 3 | ![](./images/TS_LOGO.png) 4 | 5 | --- 6 | 7 | # Typescript 8 | 9 | * A statically typed `superset` of JavaScript that compiles to plain JavaScript. 10 | * Any valid JavaScript, is valid Typescript 11 | * TypeScript adds additional developer features to JavaScript that are stripped away at compile time 12 | 13 | ![](./images/TS_JS.png) 14 | 15 | * TypeScript is a static type checker 16 | * Detects errors in code without running it 17 | * TypeScript does NOT effect the runtime behavior of JavaScript 18 | * To run TypeScript code, we have to convert it to JavaScript FIRST 19 | * The TypeScript to JavaScript compilation process removes all type information 20 | * TypeScript doesn’t provide any additional runtime libraries. There’s no additional TypeScript-specific framework to learn. 21 | * [Should I learn JavaScript or TypeScript first?](https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html#learning-javascript-and-typescript) 22 | 23 | --- 24 | 25 | # Prerequisites 26 | 27 | * You have built basic web pages or backends with JavaScript 28 | * You have `npm` and `node` installed 29 | 30 | --- 31 | 32 | # Agenda 33 | 34 | * [ ] Project Setup 35 | * create `package.json` 36 | * `npm init -y` 37 | * install `typescript` as dev dependency 38 | * `npm i -D typescript` 39 | * create / update [`tsconfig.json`](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) 40 | * install [`nodemon`](https://www.npmjs.com/package/nodemon) and [`ts-node`](https://www.npmjs.com/package/ts-node) 41 | * `npm i -D nodemon ts-node` 42 | * add scripts to `package.json` 43 | * build, dev, start 44 | * [ ] [Type Annotations](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html) 45 | * [ ] [Inferred Types](https://www.typescriptlang.org/docs/handbook/type-inference.html#handbook-content) 46 | * [ ] [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) 47 | * [ ] Objects and Interfaces 48 | * [ ] [Optional Properties](https://www.typescriptlang.org/docs/handbook/2/objects.html#optional-properties) 49 | * ["duck typing" or "structural typing"](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html#structural-type-system) 50 | * As long as the object has the same shape, it is considered the same type 51 | * [ ] [Classes](https://www.typescriptlang.org/docs/handbook/2/classes.html) 52 | * [ ] [Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html#handbook-content) 53 | * [ ] How to read / fix errors 54 | * [ ] [Type assertions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions) 55 | * [ ] [@ts-ignore / @ts-nocheck](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html#ts-check) 56 | * [ ] [any](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any), [unknown](https://www.typescriptlang.org/docs/handbook/2/functions.html#unknown), [never](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#the-never-type) 57 | * [ ] Generate [Typescript Interfaces](https://quicktype.io/) from JSON / API Responses 58 | 59 | # Examples 60 | 61 | We'll use project templates for these so we don't have to configure typescript from scratch. 62 | 63 | * [ ] Typescript with Express 64 | * `npx create-express-api --typescript --directory my-api-name` 65 | * [ ] [API contract with express + axios](https://www.jonmellman.com/posts/typescript-for-api-contracts) 66 | * [ ] Typescript with [react](https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets) 67 | * `npm create vite@latest -- --template react-ts` 68 | * [ ] Typescript with [Vue](https://vuejs.org/guide/typescript/overview.html#definecomponent) 69 | * `npm create vite@latest -- --template vue-ts` 70 | * Usage with [composition API](https://vuejs.org/guide/typescript/composition-api.html#typing-component-props) 71 | * [ ] Anything on npm will work (within reason) 72 | * [ ] [Definitely Typed](https://www.typescriptlang.org/dt/search?search=) 73 | -------------------------------------------------------------------------------- /example.ts: -------------------------------------------------------------------------------- 1 | // Type Annotations 2 | 3 | // Inferred Types 4 | 5 | // Union Types 6 | 7 | // Objects and Interfaces 8 | 9 | // Optional Properties 10 | 11 | // Classes 12 | 13 | // Generics 14 | 15 | // any, unknown, never 16 | 17 | // Type Assertions 18 | 19 | // @ts-ignore / @ts-nocheck 20 | -------------------------------------------------------------------------------- /images/TS_JS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingGarden/intro-to-typescript/a7f8fa3f116bb0de05a5958418995ec28557a7cd/images/TS_JS.png -------------------------------------------------------------------------------- /images/TS_LOGO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingGarden/intro-to-typescript/a7f8fa3f116bb0de05a5958418995ec28557a7cd/images/TS_LOGO.png --------------------------------------------------------------------------------