TypeScriptまとめ

はじめに

以前TypeScriptの環境構築はしていたものの、実際に使う機会は作れていなかった。

※以前はtscでトランスパイルしたが今後はGulp使っていきたい。

最近、素のJSを学習したことでTSの恩恵を受けれそうだったので、これを機に改めて学習してみました。

✅ゴール
・TypeScriptの理解を深める

※Windows環境になります。

✅参考

💻さらっとTypeScript入門

個人的には一番わかりやすい。

💻TypeScriptの型入門

より詳細に書かれている。

使い方

✅環境構築

【フロントエンド】Gulpでの環境構築まとめ【Pug/Sass/TypeScript】

👆上記でGulpでの環境構築は行っているので、補足事項をば。

参考:tsconfig.jsonの全オプションを理解する(随時追加中)

tsconfig.jsonの作成

tsc --init

※上記だとオプションが諸々記載されている。

整理するとこんな感じ。

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true 
  }
}

編集

{
  "compilerOptions": {
    "lib": ["es2015","DOM"], // DOMがないとdocumentなど読み込めない
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "es2015"
  },
  "include": [
    "src"
  ]
}

✅型の基本

number 数値
string 文字
boolean 真偽値
array 配列
object オブジェクト
any なんでも入る(※やむを得ない場合のみ)
void 値を返さない関数などに使用
null,undefined 空の値 ※nullは値が欠如、undefinedはそもそも定義されていない

✅型の指定

:を付けてその後ろに型名(アノテーション)を明示的に付ける。

・変数

let userName:string = "Sato";

※付けない場合はTSが型推論する。

・リテラル型

let Sato:"sato" = "sato";

※指定の文字列しか入れることができない型

・配列

let num1: number[] = [ 1, 2, 3 ];
let num2: Array<number> = [ 1, 2, 3 ]; // ジェネリクス
const foo: [string, number] = ['foo', 5]; // タプル型

・オブジェクト

let users: User[] = [
  {
      id: 1,
      name: 'sato',
      age: 27
  },{
      id: 2,
      name: 'saito'
  }
]

type User = {
  id: number
  name: string
  age?: number
};

※typeもしくはinterfaceを用いる。オブジェクトのプロパティがない場合は?で対処。

・複数の型指定

let userName:string | null = "Sato";
userName = null;

※Union Typesで対処

・関数

function sum(num1: number, num2: number): string {
  const sum: number = num1 + num2;
  return `${num1}+${num2}は、${sum}です。`;
}
sum(3,5) // 3+5は、8です。

※関数自体には引数の後に、引数は引数の直後に記載。

・クラス

class Calc {
  private num1: number;
  private num2: number;
  constructor (num1: number, num2: number) {
    this.num1 = num1;
    this.num2 = num2;
  }

  public sum(): string {
    const sum: number = this.num1 + this.num2;
    return `${this.num1}+${this.num2}は、${sum}です。`;
  }
}

const calc = new Calc(5,6);
calc.sum(); // 5+6は、11です。

※クラスメンバーは修飾子(public・private・protected)を付与可能。

・ジェネリック型

interface Foo<N, S> {
  foo: N;
  bar: S;
}

const obj: Foo<number, string> = {
  foo: 3,
  bar: 'hi',
};

※<>で囲った名前を与えることで名前を型変数として扱うことができる。

🙄ゲッター/セッター、列挙型は追々。

発展

✅DOMの型付け

・document.getElementById();の型付け 参考

以下のように記載

let $ = (e:string)=> document.getElementById(e);
let add_btn: HTMLElement = <HTMLElement>$("add_btn");

🙄地味に長い。。。

・eventの型付け

※anyで型付けしてしまったので要修正

以下のように記載

add_btn.addEventListener('click',(event: MouseEvent) => {
  let song: any = event.target;
  console.log(song.parentNode);
})

・Nodelistの型付け

・inputタグの型付け

HTMLInputElementを使う。これによってvalueプロパティも参照可能に。

let event_title: HTMLInputElement = <HTMLInputElement>$("event_title");

✅変数firebase

Cloud Functionではfirebase init時に選択できる。

? What language would you like to use to write Cloud Functions? 
JavaScript
> TypeScript

そもそものfirebase本体は・・・

公式:Firebase を JavaScript プロジェクトに追加する

モジュールハンドラを利用する。

npm install -D firebase

package.jsonに追加される。

"firebase": "^7.15.5",

index.tsに追記

import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

コンパイルするとエラー

error TS2307: Cannot find module 'firebase/app' or its corresponding type declarations.

参考:TypeScript未対応のモジュールをimportするときのエラー対策

とりあえず無視する。

//@ts-ignore
import * as firebase from "firebase/app";

コンパイルできたけど読み込んでない。

requireしてみる。

const firebase = require("firebase/app");

require is not definedになる。

素のJSだといろいろ大変っぽいですな。。。

CDNから読み込めば、変数firebaseがないってなるし。。。

とりあえず無視で対処。

//@ts-ignore
firebase.initializeApp(firebaseConfig);
//@ts-ignore
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);
//@ts-ignore
firebase.analytics();

 

おわりに

どんどんアプリ制作なりでコード書いて慣れていきたい!!

コメントを残す