islomar/poc-typescript

Playground for learning about TypeScript

PoC Typescript

Playground for learning about TypeScript

Table of Contents

• General
• TS from scratch
• Codely course: from JS to TS (2021)
• TypeScript for JS programmers
• Pending readings
• Currently reading
• Already read
• Interesting links

General

• Developed by Microsoft
• Open-source: Apache License 2.0
• First version: October 2012
• Current version: 5.4.2
  • TypeScript 5.5 Iteration Plan
• https://github.com/microsoft/TypeScript
  • Good first issue
• Playground for TS
• https://www.typescriptlang.org/
• TypeScript Origins: The Documentary - video, 80 minutes
• https://stateofjs.com/en-US
• https://en.wikipedia.org/wiki/TypeScript
• https://code.visualstudio.com/docs/typescript/typescript-tutorial
• TypeScript is a strongly typed programming language that builds on JavaScript
• TypeScript is a strict superset of ECMAScript 2015, which is itself a superset of ECMAScript 5, commonly referred to as JavaScript.
• The TypeScript compiler is itself written in TypeScript and compiled to JavaScript
• TypeScript supports definition files that can contain type information of existing JavaScript libraries, much like C++ header files can describe the structure of existing object files.

TS from scratch

• https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html
• TypeScript is a language that is a superset of JavaScript: JS syntax is therefore legal TS. Syntax refers to the way we write text to form a program.
• TypeScript is also a programming language that preserves the runtime behavior of JavaScript.
  • This means that if you move code from JavaScript to TypeScript, it is guaranteed to run the same way.
• Roughly speaking, once TypeScript’s compiler is done with checking your code, it erases the types to produce the resulting "compiled" code. This means that once your code is compiled, the resulting plain JS code has no type information.
  • This also means that TypeScript never changes the behavior of your program based on the types it inferred
• TypeScript doesn’t provide any additional runtime libraries.

Codely course: from JS to TS (2021)

• https://pro.codely.com/library/de-javascript-a-typescript-128106
  • @nuria_codes and @ismanapa
• https://github.com/CodelyTV/refactor-from-js-to-ts-course -https://github.com/CodelyTV/typescript-basic-skeleton
• https://github.com/CodelyTV/refactor-from-js-to-ts-course
• Types do NOT exist in runtime.
  • e.g. el typeof de un objeto siempre será Object, no la interfaz que hemos definido.
• The first step to add TS to a project is adding the file tsconfig.json
  • npx tsc
  • TS also does a downgrade
  • In Webpack we configure the ts-loader, extensions (e.g. adding ts), etc. []webpack.common.js](https://github.com/CodelyTV/refactor-from-js-to-ts-course/blob/main/21-supporting-typescript/webpack.common.js)
  • La opción transpileOnly nos permite compilar a pesar de que haya errores de TypeScript. Esto nos será útil en el proceso de refactor para poder seguir trabajando aunque haya errores de tipado.
• Static type checking
• TS assigns a type to EVERYTHING even if we don't configure it explicitely.
• If TS can not infer a type, it will use any.
  • With ESLint we can mark any as warning instead of error, so that we can move on in baby steps with typing.
• We can type objects using interface
• There are interfaces specifically for the DOM
  • HTMLElementTagNameMap can help us with the different DOM types (it maps HTML tags with interfaces)
• Las interfaces, igual que los prototipos de JavaScript, pueden tener herencia.
• Union types: a variable could be two or more types Type1 | Type2 | Type3
• unknown type:
  • Code example
  • Added in TS 3.0 as a safe alternative to any
  • https://dmitripavlutin.com/typescript-unknown-vs-any/
• Detecting errors in development time
  • Code example
  • strictChecks
    • https://www.carlrippon.com/controlling-type-checking-strictness-in-typescript/
    • "noImplicitAny": true: it forces us to define in an explicit way all the types from our code.
    • No implicit any
  • strictNullChecks
    • "strictNullChecks": true:
    • Code example
    • Strict null checks
• Using TS with external dependencies
  • Code example
  • Axios
  • Declaration files
  • "moduleResolution": "node", to define how we want to import external dependencies
  • Open Source "Definitely Typed": d.ts
  • Custom types: what to do when you use a library which does not have types?
    • Code example for grade-js
    • We can either define from scratch a definition type or extend/fix an already existing one.
• Testing and TypeScript
  • Code example
  • ts-jest
  • For testing HTTP APIs: https://www.npmjs.com/package/supertest
  • Cypress:
    • It requires an extension to tsconfig.json
    • Code example
    • https://docs.cypress.io/guides/tooling/typescript-support#Clashing-types-with-Jest
    • Cypress and TS configuration
• React and TS
  • Code example
  • npx create-react-app my-app --template typescript
  • React and TS
  • React TypeSript Cheatsheets
  • Better not use CRA to start a new React app? Other options: vite
  • Do NOT use Function Components
• Express API
  • Code example
  • Deno directly works with TypeScript
• Interfaces vs types
  • https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces
    • If you would like a heuristic, use interface until you need to use features from type.
    • A type cannot be re-opened to add new properties vs an interface which is always extendable.
  • Code example
  • interface vs type
  • Official documentation for Interfaces
  • The Difference Between Type Aliases and Interfaces in TypeScript
    • Type aliases are used to create new names for existing types, whereas interfaces are used to define the shape and behavior of an object.
  • Playground example: Types vs Interfaces
    • We recommend you use interfaces over type aliases. Specifically, because you will get better error messages
  • Both implements and extends can be done with both types and interfaces
  • Things that can only be done with types, not with interfaces:
    • Unions
    • Typing a Tuple
    • Typing a primitive
  • Things that can only be done with interfaces, not with types:
    • Declaration merging
  • Neither Interfaces nor Types exist when transpiling
    • The do not exist on runtime.
    • Narrowing is a way to hack some things.
• Experiences moving to TS
  • https://dev.to/pincfloit/game-development-diary-v-moving-to-typescript-5a4k
  • Genially
    • Monorepo
    • Express with Responsibility Chain
    • ErrorHandlerMiddleware (catch exceptions - Domain, etc. - and return the corresponding HTTP Status codes, mesages, etc.)
    • Use of Sentry
    • Decorators in the Controllers, e.g. @Authorized() or @HttpCode(200)

TypeScript for JS programmers

• https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
• Visual Studio Code uses TypeScript under the hood to make it easier to work with JavaScript.
• You’ll see that there are two syntaxes for building types: Interfaces and Types. You should prefer interface. Use type when you need specific features.
• There is already a small set of primitive types available in JavaScript: boolean, bigint, null, number, string, symbol, and undefined, which you can use in an interface.
• One of TypeScript’s core principles is that type checking focuses on the shape that values have. This is sometimes called “duck typing” or “structural typing”.

Pending readings

• Slack: the transition from JS to TS - 2018
• Everyday Types
• https://react-typescript-cheatsheet.netlify.app/
• TS Playground examples
• JavaScript Module Cheatsheet

Currently reading

• https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html

How to migrate a project from JS to TS

• https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
• https://pro.codely.com/library/de-javascript-a-typescript-128106/347481/path/step/131062671/
• https://github.com/CodelyTV/refactor-from-js-to-ts-course/tree/main/21-supporting-typescript
• https://www.digitalocean.com/community/tutorials/typescript-running-typescript-ts-node

Interesting links

• TSyringe: dependency injection
• InversifyJS: A powerful and lightweight inversion of control container for JavaScript & Node.js apps powered by TypeScript.
  • It uses constants to "hack" de fact that interfaces and types disappear after transpiling.
• DIOD: Dependency Injection On Demand: A very opinionated and lightweight (under 2kB minified and gzipped) inversion of control container and dependency injector for Node.js or browser apps.
  • It uses abstract classes to "hack" de fact that interfaces and types disappear after transpiling.
• Branded Types in TypeScript