DEV Community: wshi9124

TypeScript with React

wshi9124 — Mon, 15 Aug 2022 18:39:48 +0000

Set up React TypeScript project:
npx create-react-app app-name --template typescript

Add TypeScript to existing React App:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Notice that instead of js files, we have tsx files instead.

As a review, here is how we declare types in TypeScript
-let age: number | string means that age can be either a number or string (union type)
-let hobbies:string[] means that the array can only contain strings
-let role:[number,string] means that the array can only contain one number and one string
-for objects we need to declare a type or interface keyword
-? makes age property optional
-let lotsOfPeople:Person[] means that we want an array of Person object

Function Types
-void means that there is an absence of any type at all
-you should use unknown instead of any type if you don't know what type it is going to be

Aliases(type and interface)

in the image below both type and interface mean the same thing. Keep in mind that there is no = for interface -A difference between type and interface is way they extend -you can extend between type and interface

Now that the review is over, lets get into React with TypeScript

UseState
you can declare type if state with <>. However, you do not really need to specify if there is only one type. It is better for TypeScript to infer what type it is.

Props
There are 2 ways to pass down props in React
However, you should always make an interface first
-Notice that you can find out what type setNumber is by hovering over it

Functions
You can set what type you want the function to return by putting a : after the ().
-Hint- if you don't know what type the function is, you can hover over the name once you complete writing the function.

Handling events
when handling onClick the type for e is
$React.ChangeEvent< HTMLInputElement | HTMLTextAreaElement >
HTMLInputElement is for inputs
HTMLTextAreaElement is for text area
when handling onSubmit the type for e is
$React.FormEvent
Once again if you can't figure out the type you can hover over the name of the function
Importing interfaces
One way to make code more dry is to import interfaces
the syntax is:
import { InterfaceYouWantToImport as NewNameOfInterface} from "location"

Now that you have the basics of TypeScript with React, you can start incorporating TypeScript to your own React projects!

References:
https://www.typescriptlang.org/docs/handbook/intro.html
https://www.youtube.com/watch?v=jrKcJxF0lAU&t=898s&ab_channel=PedroTech
https://www.youtube.com/watch?v=FJDVKeh7RJI&t=151s&ab_channel=freeCodeCamp.org

Rspec- Ruby Testing Tool

wshi9124 — Sun, 14 Aug 2022 20:56:00 +0000

“RSpec is a computer domain-specific language testing tool written in programming language Ruby to test Ruby code.

Why use Rspec:
Rspec is a great tool to use for test driven development(TDD). TDD is when you start by creating tests and then move to program the feature to pass the tests. TDD is used for documentation, handling edge cases, time efficiency and maintainability. TDD is considered the gold standard in the industry and is beneficial in the long run. However, writing good tests take time and might not be achievable due to deadlines and discipline.

How to install:
gem install rspec
How to check version:
rspec -v
Add testing to project:
rspec --init

First, make sure to have the gem 'rspec' inside the gem file and bundle install. Then initialize rspec with rspec --init in terminal.

For my example, I will be writing tests for a class Calculator. To do so, I will first create a calculator.rb file inside the lib folder and a calculator_spec.rb in the spec folder. I will also create an enviroment.rb in the config folder.

In the .rspec file, make sure to have --format documentation line inside. This will help you better view which tests are passing or failing when you run tests (rspec).

Since we have an enviroment.rb file, we should require_relative the calculator.rb file and require_relative the enviroment.rb file inside spec_helper.rb

After, we will make the class Calculator and describe Calculator inside the calculator_specs.rb file

Now that set up is done, lets write some basic tests
Structure of tests:

When we run rspec in the terminal, this is what we get back. it...do describes each individual test that we want to pass. context...do is optional, but useful to organize tests. expect is the core of how we make tests. For example, expect(subject.add(5,6)).to eq(11) means that the test is looking for an instance method called add that has two parameters and will return 11. We should write more than one expect in each method so that we can't "cheat" the tests.

Here are some other ways to write expectations:
I will also link documentation about expectations in the bottom of the blog

To pass these tests, lets go to our Calculator class and write some methods.

When we run rspec again, we can see that we passed all of our tests! Now you are ready to create your own tests in Ruby!

Rspec documentation and source:
https://rspec.info/documentation/
https://rspec.info/documentation/3.9/rspec-expectations/
Code and slides belong to Laura Berge:
https://github.com/lberge17/nyc-060622-rspec-intro
https://docs.google.com/presentation/d/132o4KFVVIZsPvPy8M9mROL3Nitd4PKBC0tN9QsKKvhg/edit#slide=id.g14510627d9b_0_130

Intro to TypeScript Part 2

wshi9124 — Thu, 11 Aug 2022 15:47:00 +0000

Classes in TypeScript - TypeScript supports access modifiers (private, public and protected) (it will be public by default) In this example, we do not access to firstName and lastName because they are private only to the class, User.
readonly- makes a property as read-only(value cannot change once it is set).
Interface- In the interface, UserInterface, TypeScript expects the function getFullname in class User or their will also be an error.
Static property- only accessible on the class itself and not the instance

Generics, interfaces, and functions in TypeScript
Generics- all generic datatypes are written inside <> (instead of using any, you use generics) Instead of using multiple interfaces, we used generics (allows use to provide different data types)
Interfaces- set rules and syntax that any entity must adhere to.

Enums(enumerable) in TypeScript
Enum is the reserved word to create enumerable (should be all capitalized)
*values should be assigned with an equal sign instead of a : *
Next blog: Typescript in React
Reference:
TypeScript official documentation:
https://www.typescriptlang.org/docs/handbook/intro.html
https://www.youtube.com/watch?v=gp5H0Vw39yw&ab_channel=freeCodeCamp.org

Intro to TypeScript

wshi9124 — Wed, 20 Jul 2022 23:49:00 +0000

TypeScript is a superset of JavaScript. It is used to highlight unexpected behavior in your code, lowering the chance of bugs.

Installing TypeScript:
$ npm install -g typescript
on your terminal

check version: tsc -v

configure file and keep compiler on, type $ tsc-w in terminal

One way TypeScript does this is for you to tell what the types should be. TypeScript will throw an error if you use a different type.

For functions you can declare type on the parameters and type you want to return

Creating objects

Interfaces- helps us describe entities
? makes key not mandatory and should be placed before the colon

Union Operators- | stands for or
Most popular use for union is to check for null

Alias- can replace type with aliases (should be capitalized)

Combining Union Operators and Aliases

Void data type- set of undefined and null (also used if we don't want a return value)

Any type- Can be any type (not very useful, do not use, turns off checks)

Never Type- function with never cant be executed to the end (function) that will never end

Unknown type when you don't know what type you want it to be. You can fix the error below by changing pageNumber: from string to unknown

Type assertion - "as" keyword is known as Type assertion

TypeScript working with DOM - TypeScript has a lot of types for DOM already built in

Next Blog: Classes, generic interfaces, enums, and Typescript in React

Reference:
TypeScript official documentation:
https://www.typescriptlang.org/docs/handbook/intro.html
https://www.youtube.com/watch?v=gp5H0Vw39yw&ab_channel=freeCodeCamp.org

Common types of Event Listeners and more

wshi9124 — Tue, 28 Jun 2022 03:31:41 +0000

When writing JavaScript, there are many different types of events that the browser can trigger. Here are some of the most common events.

Mouse Events- Events that occur when the mouse interacts with the HTML document

1)click- occurs when the user clicks on something
2)dbclick- occurs when user double clicks on something
3)contextmenu- occurs when the user right-clicks on an element to open a context menu
3)mouseup- occurs when when a user releases a mouse button over an element
4)mousedown- occurs when the user presses a mouse button over an element

Keyboard Events- event that occurs when user interacts with the keyboard (useful when creating games)

1)keydown- occurs when a key is pressed
2)keyup- occurs when key is released
3)keypress- occurs when key is held (obsolete not recommended for use)

Touch events- occurs when there is finger activity on a touch screen or trackpad. They are similar to mouse events except that they support simultaneous touches at different locations on the touch surface. However, in most cases you want to use mouse events over touch events.

1)touchstart- occurs when the user places a touch point on the touch surface
2)touchend- occurs when the user removes a touch point from the surface
3)touchmove- occurs when the user moves a touch point along the surface
4)touchcancel- occurs when a touch point has been disrupted in some way

Other common Events-
1)submit- occurs when the submit button is clicked (different from a click event)
2)error- occurs when a resource has failed to load

Useful event listeners for reference
Animation Event- Events that occur when a CSS animation runs
(animationend, animationiteration, animationstart)
Clipboard Event- Events that occur when the clipboard is modified
(copy,cut,paste)
Drag Event- Events that occur when elements are dragged and/or dropped
(drag, dragend, dragenter, dragleave, dragover, dragstart, drop)
Focus Event- Events that occur when elements gets or loses focus
(blur, focus, focusin, focusout)
Hash Change Event-
Events that occur when the anchor part of the URL changes
(hashchange)
Input Event- Events that occur when an form element's content changes
Keyboard Event- Events that occur when user presses a key on the keyboard
Mouse Event- Events that occur when the mouse interacts with the HTML
(mouseenter, mouseleave, mousemove, mouseout, mouseover)
Page Transition Event- Events that occur when user navigates to, and away from, a webpage
(pagehide, pageshow)
Pop State Event- Events that occur when the window's history changes
(popstate)
Progress Event- Events that occur when loading external resources
(loadstart)
Storage Event- Events that occur when there is changes in the window's storage area
(storage)
Touch Event- Events that occur when user touches a touch-based device
Transition Event- Events that occur when a CSS transition runs
(transitionend)
Ui Event- Events that are triggered from the user interface
(abort, beforeunload, error, load, resize, scroll ,select, unload)
Wheel Event- Events that occur when the mouse wheel is scrolling
(wheel)
Event Object page