TypeScript 学習記録

はじめに

TypeScriptの学習で学んだことについて後日自分で振り返るためにまとめていきます。

TypeScriptとは

JavaScriptが型定義できるようになった言語

TypeScriptを扱う上で必要な知識

tsconfig

TypeScriptをJavaScriptにコンパイルをするときに使う設定ファイル

webpack

javascriptファイルをまとめてbundle.jsを作成

ESLint

javascriptの為の静的検証ツール

Prettier

itにコミットするときにソースコードを成形してくれる

TypeScriptの基本

型

TypeScriptは型を推論する。
型アノテーションを用いて型を宣言することができる。
const sample: string = "test"

○プリミティブ型
string、number、bolean

○存在しないことを表す型
null、undefined
nullは枠組みだけある、undefinedはなにもない
nullはなるべく使わない
nullはobject型、undefinedはundefined

○様々な型を許容する型
any、unknown
anyは入れるものによって型が変化する。
扱いが難しいのでanyはなるべく使わない

let sample: any = "panda" 
//type of sample は string
sample = 7
//type of sample は number

unknown型の変数を使用するときは、
型を特定してからでないと、オブジェクトのプロパティやメソッドの参照ができない。

let sample2: unknown = 7
//sample2 = sample2 + 7;　エラーになる
if (typeof sample2 === 'number') {
  sample2 = sample2 + 7;
}

関数

〇関数の戻り値で使用する特別な型
void…return文を持たない関数の戻り型
never…エラー発生後などの、決して戻ることのない戻り型

〇パラメータ
オプション…あってもなくてもいい(?をつける)
デフォルト…初期値を設定する
可変長引数…引数をいくつ渡してもいい、なるべく使わない
レストパラメーター…パラメータの最後に定義、...をつける

const sampleFunc1 = (para1:string = "デフォルト",...para2:number[]):void {
}
const sampleFunc2 = (para3:string,para4?:string):void {
}

〇型シグネチャ
・どのような関数の型定義を行う、関数のひな型のようなもの

type FuncTemp1 = (sample: string) => number //簡略型
type FuncTemp2 = {
(sample: string) : number
} //きちんと書いた型シグネチャ

export const Func: FuncTemp1 = (test) => {
return 10
}

参考記事
・【TypeScript】any型とunknown型の違いを具体例で理解する
・トラハック 日本一わかりやすいTypeScript入門シリーズ