Typescript初見殺しを乗り越えよう

前提：javascriptﾁｮｯﾄﾜｶﾙ

Javasriptﾁｮｯﾄﾜｶﾙくらいの私が初めてTypeScriptに触れて、なんじゃこりゃーと思った時の記憶をたどってみました。

以下を抑えておけば少しコードをみるのがくつ・・・ゲフンゲフンレベルアップすると思います

静的型付けの理解：

JavaScriptは動的型付け言語で、変数の型は実行時まで確定しません。しかし、TypeScriptでは変数の型をコードを書く段階で指定します。例えば、以下のように指定します：

let name: string = "John";

型注釈と型推論：

TypeScriptでは、型注釈を使って変数の型を明示的に指定します。しかし、初期化と同時に変数を宣言する場合、TypeScriptは型推論を使って自動的に型を決定します。例えば

let age = 30; // TypeScriptはこれをnumber型と推論します

型注釈と型推論のバランスを理解するのは難しいかもしれません。

高度な型：

TypeScriptにはJavaScriptにはない高度な型があります。例えば、ユニオン型は複数の型のいずれかを取ることができます：

let id: number | string; // idはnumberまたはstring型を取ることができます

型アサーション：

型アサーションは、ある値の型を明示的に指定する方法です。これは、TypeScriptに対して「私はこの値の型を正確に知っているので、私の指定した型として扱ってください」と伝えるものです。型アサーションは以下の2つの形式があります：

// angle-bracket形式
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

// as形式
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

これらの形式は同じ意味を持ちますが、JSXと一緒にTypeScriptを使用する場合は、as形式の型アサーションを使用する必要があります。
わたしは最初<string>のような形式が？？？ってなりました。

arr: person[]みたいなやつ：

stringとかnuberとかじゃなくて自由に名前つけれるのか？なんだこりゃーと思っていましたが

TypeScriptでは、既に定義された型を使用して配列を作成することができます。person型を使用して、person型の配列を作成することができます：

Copy code
type person = {
  age: number;
  hobby: string;
  from: string;
};

let arr: person[] = [
  { age: 30, hobby: "reading", from: "Japan" },
  { age: 25, hobby: "gaming", from: "USA" },
];

なれればなんてことないですが最初はパニックでしたｗ