TypeScript 学びの一里塚

背景

AWS を利用したアプリ＆Lambda 開発の為に TypeScript を学び始めて一か月ちょっと経過したので、
現時点での学びの記録

VS Code

移動

• path 記載があるときに、CTRL + Click で対象ファイルに飛べる
  • error ファイルや、import ファイルへ飛べるのはめっちゃ便利
  • $profile や、npm config list で設定ファイルを表示して開くのも便利
• terminal で、code {path} とすると、VS Code で開ける
  • 新規ファイル作成も、既存ファイルの編集も出来るて、touch なんて要らないのね

文字列変形

小文字のみしか使えないときなどに便利。package.name とか

1. CTRL + Shift + P
2. "lower" とtype して以下を選択
   

大文字化などもある

• kebab
  • common-snake-case
• snake
  • common_snake_case
• title
  • Common_Snake_Case
  • Commonsnakecase

general

console

制御を以下のようにして NODE_ENV の定義等で変えることは可能。
ただ、log を残しておくことは微妙なので、最終的には、必要なとこのみにすべきだね。

console disable

var DEBUG = false;
if(!DEBUG){
    if(!window.console) window.console = {};
    var methods = ["log", "debug", "warn", "info"];
    for(var i=0;i<methods.length;i++){
        console[methods[i]] = function(){};
    }
}

coding style

で、自動化する為に eslint を入れる。後回しにしてたけど、やらないとな・・

variables

• let: 変数: 初期化済、ブロックスコープ有、再定義不可、ってことで、基本はこちらが良さそう
  • kotlin や C# の感覚で、つい var を記述してしまうことがあるけど、思い出したら全部置換しよう
• const: read only が明確なので、出来るだけこれで定義するのが良さそう

define

preferring-base-types-over-unions

こうやって書くと便利だけど、巨大になると Compile になると重くなるとのこと

Union

interface WeekdaySchedule {
  day: "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday";
  wake: Time;
  startWork: Time;
  endWork: Time;
  sleep: Time;
}

interface WeekendSchedule {
  day: "Saturday" | "Sunday";
  wake: Time;
  familyMeal: Time;
  sleep: Time;
}

declare function printSchedule(schedule: WeekdaySchedule | WeekendSchedule);

回避策としてはこんなん

subtype

interface Schedule {
  day: "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";
  wake: Time;
  sleep: Time;
}

interface WeekdaySchedule extends Schedule {
  day: "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday";
  startWork: Time;
  endWork: Time;
}

interface WeekendSchedule extends Schedule {
  day: "Saturday" | "Sunday";
  familyMeal: Time;
}

declare function printSchedule(schedule: Schedule);

object merge

shallow copy merge

var content4 = {
    type: {
        audience: "people",
    }
};
var content5 = {
    type: {
        audience: "animal",
        author: "person",
        batchSize: 5,
    },
    id: 1,
}
console.log({ ...content5, ...content4, type: { ...content5.type, ...content4.type } }, "// プロパティにオブジェクトがある場合");

lodash merge

import _ from "lodash";

const paramsMerged = _.merge(keyCondition, filterExpression);
console.log(paramsMerged);

Array

map

C# での Select みたいな感じで便利。
IDE が支援してくれると、言語の差ってそれほど大変じゃなくなるのが今どきなのかな、とも

あー関数型言語は全然違うか・・

filter

Filter

const isInsert = (f)=> f.
let usersFiltered = users.filter((f)=> f.Name == "Filtered")

重複削除

重複削除

let users = Array.from(new Set(usersCanBeRedundant)); 

build

import

import { } from "module";
この中括弧内に ipmort 対象を記述することで、Load 対象をそれだけにできるらしく効率が良いらしいので、基本これかな。

Cannot find module

• npm install @types/node
• // @ts-ignore
• package.json
• tsconfig.ts
  • この辺いまいちまだ分かっておらず・・少しずつ見ていこう

課題

• *.ts のままで、import 時に *.js とか書かなくてよい方法

そもそもの target 等は以下でなんとなく把握した程度・・

現状の回避策

tsconfig.json

    "target": "ESNext",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "CommonJS",                                /* Specify what module code is generated. */
    "moduleResolution": "NodeNext",                       /* Specify how TypeScript looks up a file from a given module specifier. */

index.ts での import

import { ConstValue } from "./lib.js";

folder イメージ

src
 - index.ts
 - lib.ts  

include/exclude

こんな感じにしたほうがいいよ、とのこと。ポイントは "**" でフォルダ非依存の指定かな、と。階層化してなければ関係はなさそう

include/exclude

  "include": ["src"],
  "exclude": ["**/node_modules", "**/.*/"],

あとがき

書いてみると、思い出せないことも多いし、調べたりないことも多いことが分かる
でもって、ここはもう少し調査したいってところも見えてきていいね。

現状としては、まずは以下かな。

• tsconfig.json/package.json 辺りをもう少し詳しく
• eslint の導入
• ts-node-dev/ts-node の導入

とりあえず、少しは成長したと思える、その為にも記録は大切ですね

Udemy お勧めの記事について

Udemy のお勧めってなると、どうしても Power BI しか思いつかなかったので再掲

Power BI は、経理や総務、人事といったバックオフィスの人にこそ使えるようになってほしい。
会社で簡単に閲覧できるようにしたいものです

Power BIの基本 -初学者～中級者に「準備・視覚化・共有」の3ステップで、データの見える化と分析の基本が身につく