🤖

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

2023/07/15に公開

前提: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" },
];

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

Discussion