TypeScriptメモ

■クラス
・クラス

class クラス名 {}

・コンストラクタ

class クラス名{
    constructor(){
    }
}

・インスタンス変数

class クラス名{
    public 変数名: 型;
    private 変数名: 型;

    // getter
    public get 名前（） {
        return this.変数名;
    }

    // setter
    public set 名前(変数名){
        this.変数名 = 変数名
    }
}

public 変数名は、constructorでも設定可能

class クラス名{
    constructor(public 変数名: 型){} // publicをつけると public 変数名を書いたのと同じになる
}

・インスタンスメソッド

class クラス名{
    public メソッド名(){}

    private メソッド名(){}
}

vscodeメモ

定義に移動
win
ctr + マウスオーバー　でクリック

mac
Option + マウスオーバーでクリック

トグルスイッチ

あとで眺める
https://www.designlabthemes.com/css-toggle-switch/

VSCodeでTypeScriptを軽く触る時の最低限のメモ

◆達成したいこと。

ちょっとTypeScriptを使ってコードを書いて見たい場合に、
html/js/TypeScriptのいずれも保存時自動で更新するようにしたい

◆やったこと
html/jsの保存時、自動更新は拡張機能のLive Serverを使用
TypeScriptについては以下のようにした

VSCodeでプロジェクトのルートフォルダを開くためcodeコマンドを実行
$ code フォルダパス

TypeScriptとをインストール
$ npm i typescript


package.jsonを作成
$ npm init -y

package.jsonにtscコマンドを指定

  "scripts": {
    "watch": "tsc -w"
  },

フォルダ構成
下記のようにしたいので

├── node_modules
├── src
│ ├─js
│ ├─ts
│ └─index.html
├── package-lock.json
├── package.json
└── tsconfig.json

tsconfig.jsonを作って場所を設定する
$ tsc --init

"outDir": "./src/js",

後は、Live Serverを起動した状態で、
$ npm run watch でtsの保存を監視してコンパイルさせるようにする

VSCode複数起動

見比べたくて複数起動したかったのでメモ

mac: shift + command + n
win: shift + control + n

VSCodeでHTML書く時用のメモ

Emmet+VSCodeのショートカットのメモ

◾️HTML5の雛形
! + [Tab]

◾️次の行へ移動し空行追加
[Ctrl] + Enter

◾️タグ
基本的にはタグ名 + Enter

id属性は
タグ#id + Enter

class属性は
タグ.Class + Enter

それ以外は
タグ:属性 + Enter