Type Declaration

JavaScriptの場合

const container = document.getElementById('root');

TypeScriptの場合、【cont variable:TYPE = data】

const container: HTMLElement | null = document.getElementById('root');

VisualStudio Codeツールでは、以下のように変数にmouse hoverすると何Typeを指定すればいいか教えてくれます。VSCode自体がTypeScriptで作られたようで、TypeScriptの機能を沢山サポートするようです。

Object Type Declaration

JavaScriptの場合

const store = {
  currentPage: 1,
  feeds: [],
};

TypeScriptの場合、Typeを記述する方法が二つあります。

// ①Interface
interface Store {
  currentPage: number;
  feeds: NewsFeed[]; // NewsFeed[]がType。NewsFeed配列しか扱いしないと制約をかけます。
}

// ②Type Alias
type Store = {
  currentPage: number;
  feeds: NewsFeed[]; // NewsFeed[]がType。NewsFeed配列しか扱いしないと制約をかけます。
}

const store: Store = {
  currentPage: 1, //'1'にすると、エラーが発生。上でcurrentPageのTypeをnumberとしたため。
  feeds: [],
};

Type Interface

Typeを推論するとの意味。以下のfor文を書くと、let iにtypeを指定していないのに、
typeを書きなさいとメッセージが出ません。
それは、TypeScriptがコード上の状況を見て自らどのTypeを扱っているか認知するからです。
「i = 0」としているので、TypeScriptはnumberでしょ・・と推論するわけです。

function makeFeeds(feeds: NewsFeed[]):  NewsFeed[] {
  for (let i = 0; i < feeds.length; i++) {
    feeds[i].read = false;
  }
  return feeds;
}

Type Guard

containerはHTMLElement Typeとnullデータが入れます。
Typeが二つであり、その一つがnullであれば、Type Guardをしてあげる必要があります
つまり、データが当然あるでしょと思い、変数にアクセスしようとした時に、Typeを制御する仕組みになります。 そのため、下の【No Type Guard】ロジックのままだとエラーが発生するはずです。

// No Type Guard
const container: HTMLElement | null = document.getElementById('root');
// containerがnullかもしれないのに？
container.innerHTML = "Is there a container? Yes" 


// Do Type Guard
function updateView(html: string): void {
  if (container) {
    container.innerHTML = html;
  } else {
    console.error('do not exist container')
  }  
}