[WP] 24.02.2023 | Typescript intro

fig 1.1 example tsconfig contents

----------------------------------------------------------------------

 To create typescript project type: npx tsc –init. It basically creates tsconfig.json file within your project folder. Basic tsconfig.json file contents will be as follows:

There are some settings such as no ts lint inside eslintrc.json config file. Unary + is an trick done in javascript. if we add + to single string it will be coerced into a number. Good example of using TS is to type API responses. With well-defined API response types TS will make sure that the form of the reponses recieved from the API will be always in the same form or TS will throw an error. When people with C languages use interfaces they tend to use capital I before the name of the interface – interface Isomething {…} .

To make repetition of TS i reviewed an exercise of migration of app from JS to TS from Frontend Masters Intro to React Course. It was about adjusting simple pet-adoption react SPA from .js & .jsx files to .ts & .tsx files. When it comes to Typescript… There are some specific types such as ReactElement, MutableRefObject – they were imported from external libraries. „caret parenthesses” < > are used for type parameters to build generic types. On example for MutableRefObject<HTMLDivElement || null> is a parameter to mutable ref object to tell it how to structure itself.

There were three descriptions to APIresponse – one type and two interfaces. The type was an example of literal type. type Animal = „dog”|”cat”|”bird… – it is an example of literal type. It means that every variable with Animal type is bound to hold one of the values literally specified within the TS type definition. Interfaces specify type for complex data structures(objects) and specify how many fields the object need to have, names of the fields and what is specific type of each and every field within object complying with created interface. After definintion type and interfaces were exported with ES6 export syntax. This allows us to reuse these response types anywhere within an app.

TS requires user to be explicit about types whenever it cannot infer default types. With strict linting settings TS will not accept any as a type. TS forces a lot of defensive programming.

Backlog no 2

gmarcin

Komentarze

Prześlij komentarz

Popularne posty z tego bloga

[WP] 23.06.2023 | subjects

Obraz
  fig 1.1 BehaviorSubject abstraction marble diagram       It is high time to write another part of angular basics revision. Last time i mentioned Subject object. It is also worth to describe other ‚special’ cases of Subject. The first is behavior subject. It is part of powerful tool for reactive programming called rxjs . When writing angular version of exchange app or mars-rover-photos app I was using behavior subject in following way. Start with declaring behavioral subject private field within your service. The following example ilustrates this step: private myDataSubject: BehaviorSubject<any> = new BehaviorSubject<any>( null );     it will declare new private field with myDataSubject name and BehaviorSubject type. The value within <> braces is called type parameter and is a part of TypeScript generic types. In this case it would describe the type of values emited by this subject. on the right side of the assignment statement we can see basic javas
Czytaj więcej

15.07.2024 | simplicity

Another subject from the set of 97 things that every programer should know is simplicity. The most important thing designing software is to provide client with the functionality tailored to their real needs. Managers dont care about tools applied to obtain requested outcome as long as it gets the job done quickly and satisfy the requieements. On the other hand developers mostly need challenge and constant growth. As a consequence nowadays applications tend to be over-engineered and stuffed with additional libraries, frameworks with tons of configuration. Today ive also watched a youtube video of primagean. It was a comment on article titled "Radical simplicity". It is a reason why id written previous paragraph. The article was about technical overhead that is tend to be introduced within the aplications recently. The one good thought was that nowadays applications are able to do more stuff. The main thought was to use the bare minimum and be careful about introducing new d
Czytaj więcej

[WP] 05.06.2023 | angular-intro

Obraz
fig 1.1 angular application structure overview      Recently I have been re-writing one of my side projects using another js framework. Originaly written in react, after several days and long hours of scrolling and prompting it was re-shaped to Angular version . In this blog post I want to summarize the stuff I have learned about javascript frontend framework developed by Google . There are only class components. No function component nor hooks available in angular. Moreover it requires developer to use typescript straightaway without support for vanillla js which make it less available for beginners. Angular has no dedicated syntax such as jsx/tsx which enables to combine template, controller and styles within single file. It divides the responsibilities to separate view-template.html file and component.ts file which contains logic. It is a good moment to mention that re-renders of the ui uses diferent technique under the hood. Angular utilizes incremental DOM mechanism a
Czytaj więcej