Chapter 33. Module Introduction
Chapter 34. Using “Watch Mode”
Don’t want to keep re-running “tsc app.ts” command over and over. Add “–watch” at the end or “-w”
Chapter 35. Compiling the Entire Project / Multiple Files
More than one file, (for example, a “analytics.ts” file that sends analytics data to our server).
tsc --init // tells TS to compile everything in the folderMake sure you are in the right directory before running the “tsc –init” command. This will create a new “ts.config.json” file, with a long list of options that are commented out.
No we can run “tsc –watch” command to compile any TS files in your project and do so automatically for each change.
Chapter 36. Including & Excluding Files
You can import files into one another with modules syntax.
See some of the options you can add after the list of the existing options to tell TS how to work with this project.
"exclude" : [
"analytics.ts"
"*.dev.ts" // any files with the .dev.ts file extension
"node_modules"
]
"include" : [] // if specified then add all
Note that if an “exclude” option is not set, the “node_modules” folder will be excluded automatically.
Note that if both “exclude” and “include” set then include minus exclude is compiled.
Chapter 37. Setting a Compilation Target
Most options will not matter.
“Control + space” to get auto-completion. Talked about changing “es5” to “es6”
Chapter 38. Understanding TypeScript Core Libs
Which default objects and features TS knows, like working with the DOM.
if you comment “lib” you are overriding defaults and will need to add back “dom,” “es6,” “dom.iterable,” “scripthost” and other APIs listed in the docs. The four values listed here are the defaults for “lib.”
Chapter 39. More Configuration & Compilation Options
“allowJS”
“checkJS”
“jsx”
“declaration”
“declarationMap”
Chapter 40. Working with Source Maps
This is an important option in the TS compiler. Helps us with debugging and developing. Act as a brideg to connect JS files to the TS files. Takes debugging to the next level by simpligying.
Chapter 41. rootDir and outDir
“outFile” ignore
“outDir”
“rootDir”
Note: In most projects you will typically see a “src” folder and a “dist” folder and we can use the “outDir” and “rootDir” properties. Will need to update script imports.
"outDir":"./dist",
"rootDir":"./src",“composite” ignore
“removeComments” strips out comments on compilation
“noEmit” ignore
“importHelpers” ignore
“downlevelIteration” advanced; turn on with loops not behaving correctly
“isolatedModules” ignore
Chapter 42. Stop Emitting Files on Compilation Errors
“noEmitOnError” option is not listed by default but still important and is either true or false (default). If TS runs into an error is still creates the JS files, which you may not want. If you see an error but know it will still work. When you set this to true the problematic files are not generated.
Chapter 43. Strict Compilation
Setting “strict” to true is like setting all the other “strict type-checking options” to be true. You could also set them one by one if you would rather do that.
The “noImplicitAny” option ensures that we have to be clear about the parameters by defining type. This applies to parameters and not variables.
“strictNullChecks” tells TS to be strict with values that may be null (Can’t call a listener on a button that doesn’t exist). We should typically wrap these in “if checks” anyway.
const button = document.querySelector('button')
if (button) {
button.addEventListener("click", () => console.log("Clicked."))
}“strictFunctionTypes” more advanced setting catching niche bugs.
“strictBindCallApply” can be helpful if working with these. Checks which function yuou are calling “bind,” “call,” or “apply,” and checks if what you are setting up makes sense.
const button = document.querySelector('button')
function clickHandler(message:string) {
console.log("clicked. " + message)
}
if (button) {
button.addEventListener("click", clickHandler.bind(null, "You're welcome"))
}“strictPropertyInitialization” becomes important when working with classes but we can ignore for now
“noImplicitThis” also not a concern right now. Tries to warn you where you use the “this” keyword where it is not clear what it refers to
“alwaysStrict” controls the JS files crated are using strict mode.
Chapter 44. Code Quality Options
“noUnusedLocals” Where you have a local variable but are not using it. Yellow instead of a red squiqly line, so more of a warning than an error. Global variables are allowed as you may still need.
“noUnusedParameters” Same as above but with parameters.
“noImplicitReturns” We get an error that sometimes “returns” and sometimes does not.
“noFallthroughCasesInSwitch” helps with switch statement where you forget the “break” keyword
Ignore the “Module Resolution Options,” all of these are pretty advanced, and don’t matter to us in a lot of projects.
“Source Map Options” defaults should be fine
“Experimental Options” not sure if they will end up in JS and it’s optional whether you want to use them
Chapter 45. Debugging with Visual Studio Code
“ESLint” extension helps improve the code quality. “Prettier” is mentioned again.
Also may want to give “Debugger for Chrome” a try, 22m downloads by Microsoft, allows you to debug your TS files from inside of VSCode, through chrome, without using the dev tools, (requires you to enable or uncomment “sourceMaps” in the “tsconfig.json” file). This allows you to set breakpoints in your code and click “debug” > “start debugging” (selecting Chrome as environment), and this will pull up a “launch.json” file where you can update the “url” property to “http://localhost:300.”
Now that you’re all set up click debug and it will open up a new tab in VSCode automatically. The code will pause at your breakpoint and you can see a lot of great information. Alternative to setting up dozens of “console.log()” lines. Allows you to step through your code.
Chapter 46. Wrap Up
Chapter 47. Useful Resources & Links