Typescript自分用メモ

プロジェクト開始時

以下の設定をしておく

• ファイル変更時にコンパイルを自動で行う
  • 複数ファイルの更新に対応
• ウェブブラウザが自動リロードされるようにする
• 開発用サーバを起動する
• srcフォルダ以下の.tsファイルがコンパイル対象にする
• distフォルダに出力する
• SourceMapも出力する

mkdir src
mkdir dist
npm init
npm install -save-dev lite-server
tsc --init

package.jsonのscriptsに設定を追加

{
  "scripts": {
    "start": "lite-server"
 }
}

tsconfig.jsonに以下を追記

{
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": ["./src/**/*.ts"]
}

開発作業開始

package.jsonのscriptsのstartを実行して開発サーバーを起動し、ファイル変更を監視&自動コンパイル

npm run start
tsc -watch

比較演算子

型も含めて比較できる厳密比較演算子を使うこと。

# 厳密等価演算子
===

# 厳密不等価演算子
!==

文字列フォーマット

`${変数名}`

nullとundefined

• undefined: 変数は定義されているが、初期値をセットしていない
• null: 変数は定義されているが、該当する値がない

三項演算子

多用して逆に見づらくならないようにする。

const drink = (age >= 20) ? 'sake' : 'cola';

関数

function命令

function getRectangle(x: number, y: number): number {
  return x * y;
}

関数リテラル

const getRectangle = function(x: number, y: number): number {
  console.log(x * y);
}

アロー関数

// 基本形
const getRectangle = (x: number, y: number): number => {
  return x * y;
};

// 中身が1行の時は短くできる
const getRectangle = (x: number, y: number): number => x * y;

// 引数がない場合
const hello = () => console.log("hello");

引数デフォルト値

const getRectangle = (x: number, y: number = 10): number => {
  return x * y;
};

getRectangle(3); // 30

配列操作

# 型を指定する
const arr: string[] = ['a', 'b', 'c'];

# 挿入
const arr = ['a', 'b', 'c'];
# 引数: 挿入位置, 削除する数(挿入なら0以下を指定する), 値
arr.splice(1, 0, 'x');
console.log(arr);
['a', 'x', 'b', 'c']

# 削除
# 値を与えない
# 第2引数: 削除する数
arr.splice(1, 2);

# 結合
# arr, arr2は変化せず、結合された配列がxに入る
x = arr.concat(arr2);


arr = ['a', 'b', 'c', ...arr2];

# 先頭を削除
arr.shift();

# 末尾を削除
arr.pop();

オブジェクト

# 型を明示的に指定できる
const a = {
    name: string,
    age: number
} = {
    name: 'Taro',
    age: 10
};

# コンパイルエラーの例
a.name = 3; // 型相違
a.from; // 存在しないのでエラー

interface

javaと同じか

interface UserObj {
    name: string,
    age: number,
    gender?: string // 省略可能なものは?をつける
}

const user: UserObj = {
    name: 'Taro',
    age: 10
}

tuple

const user: [string, number, string] = ['taro', 10, 'man'];

user[0] // 'taro'

クラス

• コンストラクタ
• アクセス修飾子(public/private)、デフォルトはパブリック
• 読み取り専用
• 継承
• オーバーライド

// 定義
class User {
    name: string = ''; // 初期値は絶対必要、設定しないとコンパイルエラー
    readonly age: number = 0; // readonlyは読み取り専用
    private age2: number = 0; // プライベート
    gender?: str; // オプショナルは?をつける、初期値がなくてもエラーにならない

    // コンストラクタ
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    // メソッド
    isAdult(): boolean {
        return age >= 18;
    }
    // セッター
    setAge(age: number): void {
        this.age = age;
    }
}
console.log(taro.gender); // undefined
console.log(taro.age2); // privateなのでアクセスできない

// インスタンス化
const taro = new User(); // コンストラクタを使わない
const taro2 = new User('taro2', 14); // コンストラクタを使う

// プロパティ代入
taro.name = 'taro';
taro.age = 11; // 読み取り専用なのでエラー

継承

• extendsを使う

class AdminUser extends User {
    adminRole: number = 1;
    public sayAdminRole() {
        console.log(this.adminRole);
    }

    // コンストラクタのオーバーライド
    constructor(name: string, age: number, adminRole: number) {
        // 親クラスのコンストラクタを呼ぶ
        super(name, age);
        // 自クラス固有処理
        this.adminRole = adminRole;
    }

    // オーバーライド
    // overrideキーワードは使っても使わなくてもい
    public override isAdult(): boolean {
        return true;
    }
}

モジュール

• export
• import

tsconfig.jsonを編集

htmlを編集 scriptタグにtype="module"属性を追加

<script type="module" src=...

モジュール側のコード

// 外部からアクセスできるようにする
export const name = "taro";
export const age = 10;

// まとめてもよい
export const name = "taro";
export const age = 10;
export {name, age};

// 関数
export 

利用する側

import {name, age} from 'taro.js';