msl note

Intro In this time, I tried Hooks. [TypeScript] Try React 1 [TypeScript] Try React + Redux Try Hooks Introducing Hooks – React According to the documents, Hooks were for using states and side-effects in function components. State "useStates" gave me current states and functions what create next states like Reducer of Redux. App.tsx import 'raf/polyfill'; import React, { useState, useEffect } from 'react'; import logo from './logo.svg'; import './App.css'; import { renderBoard } from './tic-tac-toe-hooks/BoardHook'; import { BoardState } from './tic-tac-toe/Board'; function App() { // default value and the "state" type came from the argument of "useState". const [state, setBoardState] = useState(initialState()); function updateSquareValues(key: number) { const lastSquares = state.squares.slice(); lastSquares[key] = (state.nextIsX)? '✕': '◯'; // update &

Intro [TypeScript] Try React 1 This time, I tried Redux to manage props and states. Manage by React First, I tried manging props and states by React. Manage in child components(Square.tsx) If only in the child components(Square.tsx) used the states, I could let them manage the states. SquareValue.ts export type SquareValue = '◯'|'✕'|null; Square.tsx import React from "react"; import './Square.css'; import { SquareValue } from './SquareValue'; export type SquareProps = { key: number, value: SquareValue, onClick: () => void, }; export type SquareState = { value: SquareValue, } export class Square extends React.Component<SquareProps, SquareState> { render() { return (<button className="square" onClick={() => this.setState({ value: '✕'})}> {this.state?.value} </button>); }; } When I clicked the buttons, they would show '✕

Intro This time I tried React. First, I referred Documents and Tutorial. React – A JavaScript library for building user interfaces GitHub - facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces. Getting started with React - Learn web development | MDN Create a project To create a new React project, I used "Create React App". GitHub - facebook/create-react-app: Set up a modern web app by running one command. It created these files. .git node_modules public L favicon.ico L index.html L logo192.png L logo512.png L manifest.json L robots.txt src L App.css L App.test.tsx L App.tsx L index.css L index.test.tsx L index.tsx L logo.svg L react-app-env.d.ts L serviceWorker.ts L setupTests.ts .gitignore package.json package-lock.json README.md tsconfig.json Make the page work with IE11 I could view the page by "npm start" or "npm run start".  

Intro In this post, I tried migration and setting foreign key. [PostgreSQL] Play with TypeORM 1 GitHub - typeorm/typeorm TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Migration To migrate tables, I created migration files by command. npx typeorm migration:create -n AddUpdateDate The file was created in src/migration. 1591186678545-AddUpdateDate.ts import {MigrationInterface, QueryRunner} from "typeorm"; export class AddUpdateDate1591186678545 implements MigrationInterface { public async up(queryRunner: QueryRunner): Promise<void> { } public async down(queryRunner: QueryRunner): Promise<void> { } } This time, I wanted to add "updateDate" column into "SampleUser" table. 1591186678545-AddUpdateDate.ts import {MigrationInterface, QueryRunner} from "typeorm"; export class AddUpdateDate1591186678545 implements MigrationInterface { public async up(queryRunner: QueryRunner): Promise<

Intro This time, I tried accessing Database by TypeORM. Because I wanted to manage Database tables by ORM, I created a table first.  GitHub - typeorm/typeorm   TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Installation and creating a project Installation TypeORM needed "reflect-metadata" and database driver. npm install --save typeorm reflect-metadata pg typescript tsc npm install --save-dev @types/node And I also installed "ts-node" to skip compiling. npm install --save ts-node Preparing References I could generate a TypeORM project by TypeORM command. npx typeorm init --name gen-typeorm-sample --database postgres I refered Most of all settings from it. Adding files and folders First, I added tsconfig.json. npx tsc --init And I edited like below. tsconfig.json { "compilerOptions": { /* Basic Options */ "incremental": true, "target": "es5", "module": "comm

Intro Finally, I could try WebRTC. I used the code what I had wrote last time. [Nest.js] Use WebSocket with ws First, I accessed Camera and Mic from Web browser. After that, I opened two client pages and connected them by WebSocket and WebRTC. I referred MDN sample. samples-server/s/webrtc-from-chat at master · mdn/samples-server · GitHub And I also referred this. Building a WebRTC video broadcast using Javascript Access Camera and Mic Adapter.js According to MDN documents, I should install Adapter.js for interoperability between Web browsers. WebRTC API - Web APIs | MDN GitHub - webrtc/adapter: READ ONLY FORK: Shim to insulate apps from spec changes and prefix differences. Latest adapter.js release: But at least in this time, I felt I didn't have to do that. Thus, I didn't install it. getUserMedia I could access Camera and Mic by "getUserMedia". [client-side] index.html <!DOCTYPE html> <html> <head> <title>Index page<

Intro Until last time , I had used node-web-rtc to try WebRTC. But because the example was a little complicated for I understood the core functions of using WebRTC. So I look for other frameworks or libraries. PeerJS is a famous library for WebRTC. peers/peerjs: Peer-to-peer data in the browser. - GitHub peers/peerjs-server: Server for PeerJS - GitHub PeerJS - Simple peer-to-peer with WebRTC A problem is I don't know how to integrate to the Nest.js project. I couldn't find examples. So I don't choose at least this time. What shall I choose? According MDN, WebRTC doesn't specify strictly what technology is used on server application for connecting two devices. Signaling and video calling - Web APIs | MDN But in many examples include MDN's one use WebSocket. samples-server/s/webrtc-from-chat at master · mdn/samples-server · GitHub So I try WebSocket in the Nest.js project. Use WebSocket in a Nest.js project Nest.js has a function for using We

Intro When I write codes, I often confuse if I should use type alias or interface. Actually, they are quite similar in some situations. So I want to know how to distinct them. Environments TypeScript ver.3.8.3 Node.js ver.12.10.0 Similarity After compiling Both type alias and interface are only in TypeScript. After compiling to JavaScript, they will be disappeared. TypeScript interface ISample{ name: string; } type TSample = { message: string }; function main() { const iSample: ISample = { name: 'Hello' }; const tSample: TSample = { message: 'World' }; } main(); JavaScript "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function main() { var iSample = { name: 'Hello' }; var tSample = { message: 'World' }; } main(); Treat as same type If an object has same properties with them, they treat as their type, though the object d

Intro Recently, I often update ASP.NET Web Forms application in my work. Because Web Forms won't be supported in .NET 5, so I want to replace them into MVC. Introducing .NET 5 | .NET Blog I hope I can rebuild the projects from the beginning, but it's a little difficult. The reasons are like the bugets, there are many "Big ball of mud", and so on. So now, I try to organize to reduce burden for replace in the future. This time, to change from Web Forms to HTML(reduce the Web Forms functions from View), I try to interact between Web Forms(+ code behind) and TypeScript. Environments ASP.NET ver.4.5.2 TypeScript ver.3.8.3 webpack ver.4.42.1 package.json { "scripts": { "webpack": "npx webpack -w" }, "dependencies": { "rxjs": "^6.5.4", "ts-loader": "^6.2.2", "tsc": "^1.20150623.0", "typescript": "^3.8.3", "we

Intro [TypeScript] About tsconfig 1 [TypeScript] Read source code of tsc 1(Parse options) The result of parsing, the instance of BuildOptions is created. compiler/tsbuildPublic.ts export interface BuildOptions { dry?: boolean; force?: boolean; verbose?: boolean; /*@internal*/ clean?: boolean; /*@internal*/ watch?: boolean; /*@internal*/ help?: boolean; /*@internal*/ preserveWatchOutput?: boolean; /*@internal*/ listEmittedFiles?: boolean; /*@internal*/ listFiles?: boolean; /*@internal*/ pretty?: boolean; incremental?: boolean; assumeChangesOnlyAffectDirectDependencies?: boolean; traceResolution?: boolean; /* @internal */ diagnostics?: boolean; /* @internal */ extendedDiagnostics?: boolean; /* @internal */ locale?: string; /* @internal */ generateCpuProfile?: string; [option: string]: CompilerOptionsValue | undefined; } It inclu