フロントエンドの保守性を上げるTypeScript実践テクニックを紹介！TypeScriptの型システム・応用方法を解説します

let num = 100 // let num: number = 100
console.log(num) // 100

let hasText = false // let hasText: boolean = false
console.log(hasText) // false

/**
 * カウントを1増やす
 * @param count 現在のカウント数
 * @returns +1されたカウント数
 */
function increment(count: number) {
  return count++
}
increment(1)

function waiting(duration: number) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`${duration}ms passed`), duration);
  });
}
waiting(3000).then((result) => {
  console.log(result) // 3000ms passed
})

function waiting(duration: number): Promise<unknown>

// resultにカーソルを当てた場合
(parameter) result: unknown

// 1. 関数の返り値に型アノテーションを指定
function waiting(duration: number): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`${duration}ms passed`), duration);
  });
}
// 2. Promiseのインスタンスを作成した際に型を指定
function waiting(duration: number) {
  return new Promise<string>((resolve) => {
    setTimeout(() => resolve(`${duration}ms passed`), duration);
  });
}

waiting(3000).then((result) => {
  console.log(result) // 3000ms passed
})

function waiting(duration: number): Promise<string>

// resultにカーソルを当てた場合
(parameter) result: string

async function waiting(duration: number) {
  return await new Promise<string>((resolve) => {
    setTimeout(() => resolve(`${duration}ms passed`), duration);
  })
}

const posts = {}
posts.title = 'hoge'

interface IPosts {
  title: string
  content: string
}

// 1. as構文
const posts = {} as IPosts
posts.title = 'hoge'
// こちらはcontentがstringと定義されているためエラー
posts.content = 111

// 2. <>構文
const posts = <IPosts> {}
posts.title = 'hoge'
posts.content = 111

const foo = <string>bar;
</string>

import Vue, { PropType } from 'vue'
// ※interfaceなどの型定義は本来は別ファイルで管理しインポートするのが望ましい
interface IPost {
  title: string
  content: string
}
export default Vue.extend({
  props: {
    posts: {
      type: Array as PropType<IPost[]>,
      default: () => [],
      required: true,
    },
  },
})

let hasSample: boolean = false
let number1: number = 0

// NG
// 型 'number' を型 'boolean' に割り当てることはできません
hasSample = number1

let hasSample: any = false
let number1: number = 0

// OK
hasSample = number1

let hasSample: unknown = false

// NG
// 型 'unknown' を型 'boolean' に割り当てることはできません
let ok: boolean = hasSample
// OK
let text: string = hasSample as string

let fn1 = function(isSample: boolean, text: string) {}
let fn2 = function(isSample: boolean, hoge: string) {}

// OK
fn1 = fn2
// OK
fn2 = fn1

let fn1 = function(isSample: boolean, text: string) {}
let fn2 = function(text: string, isSample: boolean) {}

// NG
// 型 '(text: string, isSample: boolean) => void' を
// 型 '(isSample: boolean, text: string) => void' に割り当てることはできません。
fn1 = fn2
fn2 = fn1

let fn1 = function(isSample: boolean, text: string) {}
let fn2 = function(isSample: boolean) {}

// OK
fn1 = fn2
// NG
// 型 '(isSample: boolean, text: string) => void' を
// 型 '(isSample: boolean) => void' に割り当てることはできません。
fn2 = fn1

class Animal {
  feet: number = 4
  constructor(name: string, categoryId: number) {}
}
class Human {
  feet: number = 2
  hands: number = 2
  constructor(name: string, age: number, genderId: number) {}
}
let animal = new Animal('Cat', 1)
let human = new Human('John', 25, 1)

// OK
animal = human
// NG
// プロパティ 'hands' は型 'Animal' にありませんが、型 'Human' では必須です。
human = animal