1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

TypeScript メモ

Last updated at Posted at 2021-09-28

##基本の型
Boolean

let isDone: boolean = false;  // true または false

Number

let decimal: number = 6;     // 10進数
let hex: number = 0xf00d;    // 16進数
let octal: number = 0o744;   // 8進数
let binary: number = 0b1010; // 2進数

String

let str1: string = 'シングル';        // シングルクォート
let str2: string = "ダブル";         // ダブルクォート
let msg: string = `文字, ${str1}`;   // バッククォートと${ expr }の形式で文字列、数値を埋め込む

Array

let list: number[] = [1, 2];            // 数値
let list: Array<string> = ['1', '2'];   // 文字列

Tuple

let list: [string, number] = ["moji", 10];  // 型を決めた配列

Enum

enum Color {Red, Green, Blue};
let color: Color = Color.Green;

Any

let a: any = 1;
a = 'moji';        // どんな値でも代入可能

Union

let union: number | string = 10    // 複数の型を指定可能
union=5;
union='apple';

Literal

const str: 'A' = 'A';  // A以外だとエラー

Object

// interfaceで定義
// num,strのプロパティを持つObj型を作成
interface Obj {
  num: number;
  str: string;
}

let obj: Obj = {
  num: 0,
  str: 'moji'
};

Null

let n: null;

Undefined

let u:undefined;

Void

// 関数の戻り値の型で何も返さない場合に使用
function func(): void {
    console.log("返却値なし");
}

##関数
関数の書き方
・引数と戻り値の型を指定して宣言(戻り値の型を省略した場合はanyになる)

function func(num: number): number {
    return num + 1;
}
// 関数の呼び出し
let n: number = func(1);

・関数式で関数を定義

let func=function(num: number): number {
    return num + 1;
};
// 関数の呼び出し
func(1);

・アロー関数

let func = (num: number): number => {
    return num + 1;
}
// 関数の呼び出し
func(1);

関数の引数
・オプション引数
引数名の後に?を付けることによって、省略可能な引数の設定ができる

function func(num1: number, num2?: number): void {
}
func(1);
func(1,2);

・デフォルト引数
引数に初期値を指定できる
値が入った場合は初期値が上書きされる

function func(num1: number, num2: number = 1): void {
}
func(1);
func(1,2);

・rest引数
引数の前に...を付けることによって、引数を可変長にできる
可変長の引数は関数内で配列として取得

function func(... num: number[]): number {
    var sum: number = 0;
    for (var i: number = 0; i < num.length; i++) {
        sum += num[i];
    }
    return sum;
}
let n: number = func(1, 2, 3, 4);

##日時を扱う関数
日付の取得

// 日付オブジェクトを取得
var d = new Date();             // 現在日時を取得
var d = new Date(2020,9);       // 指定した日時を取得(2020-9-1 00:00:00.000)
var d = new Date("2020/9/2");   // 指定した日時を取得(2020-8-2 00:00:00.000)

// 年・月・日・時・分・秒・ミリ秒・曜日を取得
var year = d.getFullYear();               // 年を取得
var month = d.getMonth();                 // 月を取得(0~11の値のため+1して取得すれば良い)
var date = d.getDate();                   // 日を取得
var hours = d.getHours();                 // 時を取得
var minutes = d.getMinutes();             // 分を取得
var seconds = d.getSeconds();             // 秒を取得
var Milliseconds = d.getMilliseconds();   // ミリ秒を取得
var day = d.getDay();                     // 曜日を取得(0~6の値で0が日曜日で6が土曜日)

日付の加算、減算
取得した値に加算してset系メソッドで設定

var d = new Date();
d.setMonth(d.getMonth() + 1);  // 1か月加算
d.setDate(d.getDate() - 10);   // 10日減算

日付のフォーマット
Dateオブジェクトに任意のフォーマットへ変換するメソッドがないみたい
yyyy年mm月dd日の形式にするには取得した日付を年月日を取得してつなげる(自分で加工する)

var d = new Date();
var f = d.getFullYear() + "" + d.getMonth() + "" + d.getDate() + ""

あとはJavascriptの日付ライブラリ「Moment.js」があるみたい
https://momentjs.com/

日付の比較
getTime()メソッドを使用し日付からミリ秒に変換した数値を比較する

var date1 = new Date("2021-09-01 11:00:00");
var date2 = new Date("2021-09-01 12:00:00");

// 大小判定
if(date1 < date2){
    console.log("date2大");
}

// 同値判定
if(date1 == date2){
    console.log("同じ値");
}

時間計測
performance.now()メソッドを使用する

// 開始
const startTime = performance.now();
// 計測したい処理
func();
// 終了
const endTime = performance.now();

##クラス
クラスの定義
・プロパティ、メソッドはデフォルトでpublicになるため、
 外部からアクセスできないようにするにはprivateにしておく必要がある

class Person {
    // プロパティの定義
    private name: string;
  
    // コンストラクタの定義
    constructor(name: string) {
        this.name = name;
    } 
    
    // メソッドの定義
    profile(): string {
        return this.name;
    }
}
let person = new Person('Taro');
console.log(person.profile());

クラスの継承
・既存のクラスを拡張し、新しいクラスを作成
 基本クラスからプロパティとメソッドを継承
 継承にはextendsを使用

class Person {
    p_name() {
        console.log('Person');
    }
}

class Info extends Person {
    i_name() {
        console.log('Info');
    }
}

let info = new Info();
info.i_name(); //Info
info.p_name(); //Person

コンストラクタでプロパティ定義省略

class Person {
    private name: string;  constructor(name: string) {
        this.name = name;
    }
}

// 省略のパターン
class Person {
    constructor(private name: string) { }
}

setter/getter
・メソッドの前にset、getを付ける
・getは値を取得する時に呼び出し
・setは値を設定する時に呼び出し

class Person {
    private _name: string = '';
    
    //_nameに値を設定
    set name(val: string) {
        this._name = val;
    }

    //_nameの値を取得
    get name():string {
        return this._name;
    }
}
let person = new Person();
person.name = 'taro';     //set
console.log(person.name); //get

修飾子

// 全体からアクセス可能
public name1: string;
// クラス内からのみアクセス可能
private name2: string;
// クラスを継承した小クラスからでもアクセス可能
protected name3: string;
// プロパティを読み取り専用にする
readonly name4: string;

##例外処理
try...catch文は例外が発生するブロックをマークし、例外が発生した時の応答を指定する
try...catch文
1.例外が発生しうる処理を記述する
  ブロック内で例外が発生すると、それ以降の処理は実行されないず、
  catch に処理が移行する
2.tryの中で例外が発生した場合に実行される処理を記述する
  例外オブジェクトを保持している
3.tyr文完了後、例外が発生しなくても必ず通る処理
  省略可能

try {
  // 1
} catch(e) {
  // 2
} finally {
  // 3
}

throw文
例外を投げるができる
投げられた例外はオブジェクトとしてcatchで参照できる

try {
    throw new Error("例外が投げられました");
} catch(e) {
    console.log(error.message);
}

エラーオブジェクト
ErrorオブジェクトのインスタンスはErrorをnewして作成する
コンストラクタの第一引数には、エラーメッセージとなる文字列を渡し、
渡したエラーメッセージはError#messageプロパティに格納される

throw new Error("例外が投げられました");

エラーサブタイプ
Errorを継承したビルドインのサブタイプ

・RangeError
 数値変数またはパラメータが有効な範囲外にあるときに発生するエラー

・ReferenceError
 参照されたのが無効な参照だった場合に発生するエラー

・SyntaxError
 有効でないJavaScriptを解析する際に発生する構文エラー

・TypeError
 変数またはパラメータが有効な型でないときに発生するエラー

・URIError
 encodeURI()または decodeURI()に無効なパラメータが渡されたときに発生するエラー


##モジュール
モジュールは各機能単位で分割したファイル
複数にファイルを分割することでコードの管理をしやすくする
モジュールの作成はexport を付けた.ts ファイルがモジュールになる

クラス、インターフェースの定義にexport を付ける

sample_ex.ts
export interface TestInterface {
      msg: string;
}

export class TestClass implements TestInterface {
      constructor(public msg: string) {}
}

上記のモジュールをimport する

sample.ts
import { TestInterface, TestClass } from './sample_ex';

const t: TestClass = new TestClass('test');
console.log(t.msg);  

##ログ出力

console.log('log');                     // 単純なログを出力
console.info('info');                   // インフォメーションとしてログを出力
console.warn('warn');                   // 警告のログを出力
console.error('error');                 // エラーのログを出力
console.assert(assert,'assert=false');  // 第一引数がfalseの場合、第二引数の内容を出力
console.count('count');                 // 呼び出された回数を出力(引数がない場合はdefault: 1, default: 2,…で出力される)
console.countReset('count');            // カウントをリセット(引数はリセットしたい該当の名)
console.table(table);                   // 配列、オブジェクト情報をテーブル形式で出力
console.dir(table);                     // 配列、オブジェクト情報の構造をツリー形式で出力
console.time();                         // 処理実行前に記述して開始時間を出力(引数がない場合はdefault: 1.000000000000ms,…で出力される)
console.timeEnd();                      // 処理実行後に記述して終了時間を出力(上記と同じ)
console.timeLog();                      // 処理途中に記述し経過時間を出力(上記と同じ)

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?