Zenn
✨

Prepare for Huckson Internship

2024/08/11に公開
TypeScript
internship
huckson
tech

TypeScript

こちらの記事を参考に，TypeScript の基本的な使い方を学びます．

静的型付け

  • TypeScript は，静的型付け言語
    • C 言語，Java も同じ
    • コンパイル時に変数の型が定まる言語
      • 型にまつわる問題はプログラムを実行しなくても発見できる
  • 動的型付け言語
    • Python，Ruby，JavaScript
    • 実行時に変数の型が定まる言語 - 型にまつわる問題はプログラムを実行しないと発見できない
      詳しくはこちら：静的型付け

アロー関数

https://typescriptbook.jp/reference/functions/arrow-functions

ジェネリクス

  • ジェネリクスは，型も引数のように扱うという発想
  • コードの共通化と型の安全性を両立するための言語機能
function chooseRandomly<String>(v1: <string>, v2: <string>): <string> {
  return Math.random() <= 0.5 ? v1 : v2;
}
function chooseRandomly<Number>(v1: <number>, v2: <number>): <number> {
  return Math.random() <= 0.5 ? v1 : v2;
}
function chooseRandomly<URL>(v1: <URL>, v2: <URL>): <URL> {
  return Math.random() <= 0.5 ? v1 : v2;
}
chooseRandomly<String>("勝ち", "負け");
chooseRandomly<Number>(1, 2);
chooseRandomly<URL>(urlA, urlB);

上記をジェネリクスを使って書き換えると以下のようになる．

// 注意: これは架空の文法です
function chooseRandomly<type>(v1: <type>, v2: <type>): <type> {
  return Math.random() <= 0.5 ? v1 : v2;
}
chooseRandomly<string>("勝ち", "負け");
chooseRandomly<number>(1, 2);
chooseRandomly<URL>(urlA, urlB);

https://typescriptbook.jp/reference/generics

React

DOM

  • DOM(Document Object Model)は，画面を表示するまでに解釈した HTML/CSS/JavaScript によって構築された DOM（ツリー）を指す
  • It is a structural representation of HTML elements of a web application in simple words.

props と state

Discussion