こんにちは！　株式会社アルシエで教育に関するサポートをしている岸本です。

今回のテーマは「TypeScriptパート1」です。

TypeScriptは、型チェックのプログラムを実行せずとも、プログラムの欠陥に気づくことができます。

バグは発見が遅れるほど修正コストが高くつきますが、TypeScriptではコーディング中に頻繁にチェックすることができ、バグ早期発見によって修正コストも抑えることができます。

例えば以下のコードのJavaScriptは、コードを実行してからエラーが出ます。　

Typescriptの場合だと、実行する前にエラーがでます。

このように、バグを早期に発見できるのがTypescriptの強みです。

// JavaScript
const user = {
  name: "Daniel",
  age: 26,
};
 
user.location;

// TypeScript
const user = {
  name: "Daniel",
  age: 26,
};
 
user.location;　// ERROR

型推論

型推論とは、TypeScriptが自動的に型を付与してくれる事です。

ちなみに、TypeScriptはJavaScriptに型がある言語と言われていますが、JavaScriptにも型があります。

JavaScriptのコードが動くとき(ランタイム時）に自動で型付与されています。

// a は number 型
const a = 123 - 45;

// i は string 型
const i = "123" + "456";

// u　は　number[]
const u = [1,2,3,4]

// e は　{ name:string,age:number}
const e = {name:"田中",age:20}

関数でも型推論は可能です。以下のコードでは、meta関数にnameを引数として渡し、文字列を返します。

コードでは、引数のnameがstring型しか記述してませんが、TypeScriptが型推論をしてstring型を返す関数になっています。

//関数でも型推論
//const meta: (name: string) => string 
const meta = (name: string) => {
  return `私は${name}と言います`;
};
console.log(meta("DLA")); // 私はDLAと言います

型アノテーション

型アノテーションとは、自分で型をつける方法です。

ここで、自動で型を付与してくれる型推論があるのに、型アノテーションを使う必要があるのか疑問に思った方もいるでしょう。

型アノテーションを使う事でいくつかのメリットがあります。

• コードの型を瞬時に理解できるからです。
• • 以下のコードでは、meta関数は stringかundefinedを返すと瞬時に理解できます。
  • 返り値に型が無い場合、関数内の処理が多くなれば「なんの型を返すのだろう」と考える時間が必要になり、無駄な時間を割かなければいけません。

// undefinedは、「値がない」を意味しています。
const meta = (name: string):string | undefined => {
  if(name.length <= 0) {
    return
  }
  return `私は${name}と言います`;
};
console.log(meta("DLA"));　// 私はDLAと言います

• コンパイラ側が理解しやすくコンパイル速度が上がります。
• • TypeScriptで書いたコードを実行するには、一度JavaScriptコードに変換(コンパイル)する必要があります。
  • 型推論だけでもプログラムは動いているので、型を付与する事で型推論の処理をスキップできコンパイル速度が上がります。

型アサーション

型アサーションとは、型を上書きする事です。

基本的に多様するべきではありません。

型アサーションは任意の型に上書きができるため、型の安全性が保証されなくなります。
つまり、型アサーションによる型に問題があった場合、コンパイルエラーとして検知されず、実行時に初めて気が付くことになります。

使い所は、外部のライブラリーを使うとき型が用意されてなかったり不十分のときです。

// ERROR
// ここでTSは　testの型はプロパティがゼロのオブジェクトね!と型推論する
const test = {} 
test.foo = 3  // fooというプロパティが無いのでエラー!! 

以下、エラーを解決するための書き方です。

//  test の型　{foo: number}　と上書きする事でエラーを解決
let test = {} as {foo:number}
test.foo = 3

プリミティブ型

次に、プリミティブ型とはJavaScriptが持っているデータ型の1つです。

JavaScriptのデータ型は、プリミティブ型とオブジェクトの2つに分類されます。

プリミティブ型は次の7つがあります。

1. 論理型(boolean):trueまたはfalseの真偽値。
2. 数値型(number):0や0.1のような数値。
3. 文字列型(string):"Hello World"のような文字列。
4. undefined型: 値が未定義であることを表す型。
5. ヌル型(null): 値がないことを表す型。
6. シンボル型(symbol): 一意で不変の値。
7. bigint型:9007199254740992n:のようなnumber型では扱えない大きな整数型。

上記のプリミティブ型以外は、JavaScriptにおいてはすべてオブジェクトと考えて問題ありません。配列や正規表現オブジェクトなどもすべてオブジェクトです。

const bar:boolean = true 
const bar:boolean = 2 // number を型　booleanに割り当てることはできません

const bar :string = "2"; 
const bar :string = true // boolean を型 stringに割り当てることはできません

const bar :number = 2 
const bar :number = true // boolean を型 numberに割り当てることはできません

const bar :null = null
const bar :null = "null" // null を型　nullに割り当てることはできません

const bar :undefined = undefined
const bar :undefined = null // null を型　undefinedに割り当てることはできません

nullとundefinedの使い分けに関しまして、私はnullは「何もない」という値を表し、
undefinedは「未定義」と認識しています。

以上となります。

次回はTypeScriptパート2にて「Literal Types、Widening」を伝えしていきます！