型

let hasValue: boolean = true;
let count: number = 10;
let float: number = 3.14;
let negative: number = -0.12;
// # 以下は全部文字列
let single: string = "hello";
let double: string = "hello";
let back: string = `hello`;

型推論

基本的に型を指定せず、宣言時の型推論を使うらしい。

let hasValue2 = true;
let count2 = 10;
let float2 = 3.14;
let negative2 = -0.12;
// # 以下は全部文字列
let single2 = "hello";
let double2 = "hello";
let back2 = `hello`;

オブジェクトの型

const person: {
  name: string;
  age: number;
} = {
  name: "Jack",
  age: 21,
};

配列の型

const fruits: string[] = ['apple', 'banana', 'grape']
const fruits2: any[] = ['apple', 'banana', 'grape', 1]
fruits2.forEach((a) => {
  console.log(a)
})

タプル (配列のそれぞれの要素に型を指定できる)

const book: [string, number, boolean] = ['business', 1500, false]
book[1] = 700
// NG book[1] = 'shopping'

enum

enum CoffeeSize {
  SHORT,
  TALL,
  GRANDE,
  VENTI,
}

const coffee = {
  hot: true,
  size: CoffeeSize.TALL,
}

// NG coffee.size = 'big'
coffee.size = CoffeeSize.GRANDE

any型

※ なるべく使わないように

let anything: any = true
anything = 'str'
anything = 1
anything = {}

let banana = 'banana';
// 文字列の型の変数にもany型を入れられてしまう。
banana = anything

union型

| を使うことで複数の型を扱うことができる

let unionType: number | string = 10;
unionType = 'hello'
unionType.toUpperCase()
unionType = 10
// NG unionType.toUpperCase()

// 配列にunion型を使う場合
let unionTypes: (number | string)[] = ['hello', 2020]
unionType[0] = 2019

literal型

// constで指定する定数
const apple = 'apple'
// union型と組み合わせるとenumみたいに使える
let clothSize: 'small' | 'medium' | 'large' = 'medium'
clothSize = 'small'
// NG clothSize = 'big'

type alias

type ClothSize = 'small' | 'medium' | 'large'

let shirtSize : ClothSize = 'large'
// NG let pantsSize : ClothSize = 'big'

関数の型

返り値は型推論が効くけど、書いておくのが無難。引数には効かないからちゃんと書こう

function add(num1: number, num2: number): number {
  return num1 + num2
}
add(1, 2)

関数が何も返さない場合は void を書こう。

function sayHello(): void {
    console.log('Hello!')
}

関数の型注釈

// 型注釈の場合は : でなく =>
const anotherAdd: (n1: number, n2: number) => number = add
// 無名関数も
const anotherAdd2: (n1: number, n2: number) => number = function add(
  num1: number,
  num2: number
): number {
  return num1 + num2
}

// 型推論が効くので左辺か右辺のどちらかに型情報があればよい
const anotherAdd2: (n1: number, n2: number) => number = function add(
  num1,
  num2
) {
  return num1 + num2
}

// アロー関数
const doubleNum = (num: number) => num * 2
const doubleNum2 = (num: number) => {
    return num * 2
}

// Callback関数
function doubleAndHandle(num: number, cb: (num: number) => string): void {
  const doubleNum = cb(num * 2)
  console.log(doubleNum)
}

doubleAndHandle(35, (doubleNum) => {
  return doubleNum.toString()
})

unknown, never

// unknown型 anyより少し厳しい
let unknownInput: unknown
let anyInput: any
let text: string
unknownInput = 'hello'
unknownInput = 21
unknownInput = true
// 代入は何でもできるけど、使う時は気をつけて
// NG text = unknownInput
if (typeof unknownInput === 'string') {
  // OK
  text = unknownInput
}
// any型はいつでも使える
text = anyInput

// 決して何も返さない
function error(msg: string): never {
    throw new Error(msg)
    // NG これを書くと、reachableになるのでダメ console.log(msg)
}

コンパイル

watchモード

–watch (-w) をつけると保存時に自動的にindex.jsをコンパイルしてくれる

$ yarn tsc index.js -w

tsc –init で tscconfig.json を作って まとめてコンパイル

$ yarn tsc --init

そのあと、以下ですべてのファイルをまとめてコンパイルしてくれる

$ yarn tsc

• tsconfig.jsonでexcludeを指定するとコンパイルしないファイルを指定できる
• includeでコンパイルしたいファイルを指定できる。excludeの方が優先される。