TypeScript勉強会第一回(2021/12/28) #TypeScript

TypeScriptとは

JavaScriptを人が読みやすくするために型をつけた言語
設定により「型の厳しさ」を変更できる
強力な型推論機能があり、人が型を書く手間を極力減らすようにしている

TypeScriptの現在地

着々とユーザーを増やしていて、ユーザーの満足度も高い

なぜTypeScriptを使うのか

例えば以下の関数を考える

function sum(a,b){
 return a + b;
}

JSだと
* 引数の型がわからない
* 文字列を指定してもエラーにならない

複雑なObjectが存在しても、どんなメンバを持っているのかわかる
存在しないメンバにアクセスしたときにエラーになる

TypeScriptの基礎の型

PlayGroundへのリンク

// 文字列
const str: string = 'Hello'
// 数字
const num: number = 0
// 真偽値
const isBool: boolean = true
// null型
const n: null = null
// undefined型
const u: undefined = undefined
// オブジェクト型
const obj: { name: string, id: number } = {
  name: 'a',
  id: 0
}
// 配列型
const arr: string[] = [str, str]
// タプル型
const tuple: [string, number] = [str, num]
// 関数型
const sum: (a: number, b: number) => number = (a, b) => a + b

// 連想配列を表す型。Recordという型関数を用いる
const record: Record<string, typeof obj> = {
  a: obj,
  b: obj
}

// 以下上記の型の型定義を取り除いた型。殆どの場合、型定義は書かなくても、代入された変数から型を推論してくれる

const _str = 'Hello'
const _num = 0
const _isBool = true
const _n = null
const _u = undefined
const _obj = {
  name: 'a',
  id: 0
}
const _arr = [str, str]
// タプル型は型指定が必要、指定しない場合、(string | number)[]と推論されてしまう
const _tuple: [string, number] = [str, num]

// 関数型の場合、引数の型は推論できないため、指定が必要
const _sum = (a: number, b: number) => a + b

// 連想配列の場合、型を明示しないと通常のObject型と認識されてしまうことに注意
const _record: Record<string, typeof obj> = {
  a: obj,
  b: obj
}

// 余談

// JavaScriptに組み込みで用意されているクラスを型として用いることもできるが、こちらを用いる場合、
// JavaScriptのクラスはObject型を継承しているため、String型とObject型で互換性が生まれてしまう
const s: String = 'fjwif'
const o: Object = s // String型をObject型に代入できる

// 小文字始まりの型を使用することでこの問題を解決することができる
// これはTypeScript固有の型
const ss: string = 'fheofaw'
const oo: object = ss // エラーになる

TypeScript勉強会第一回(2021/12/28)

目次

TypeScriptとは

TypeScriptの現在地

なぜTypeScriptを使うのか

TypeScriptの基礎の型