TypeScriptは、難しくない？

私は、フロントエンドエンジニアを目指すものです。
今まで、JavaScriptを中心に学習しており、ReactやNextについても現在開発を進めています。
その中で、「エラーが発生することなく動作すること」を目標として実装してきたTypeScriptですが、やはり根本的な理解のレベルを上げることが、開発スピードやクオリティを上げるために必要だと考え、改めて調べてみました。
とはいえ、自分の中では以前のレベルより「一段階」上がったと感じたので、自分のためにも、同じような境遇の方にもまとめることにしました。
※とはいえ、まだ十分に理解しきっている状態ではないため、誤った解釈などございましたら、ご指摘いただけますと幸いです。

大枠を捉えてみた！

参考にさせていただきました記事はこちら↓

あとは、ChatGPTさんにもご協力いただき、私なりの解釈でまとめていきます。

目的と対象

No	名称	対象	代表的なキーワード
1	変数の宣言時に型指定する	変数	`:number` `:string`
2	関数のパラメータと戻り値に型指定する	戻り値	`:number` `:string`
3	インターフェースや型エイリアスを使用する	オブジェクト	`<>` `as`
4	ジェネリクスを使用する	特定の型に依存しない関数・クラス	`<T>`
5	型ガードを使用する	関数内	`typeof` `instansof`
6	非null/undefinedアサーションを使用する	`null`や`undefind`	`!`

具体的なコード例

自分なりに使いそうなシーンのコード例を記載してみます。

1. 変数の宣言時に型指定をする

// 数値型の変数
let age: number = 30;

// 文字列型の変数
let name: string = "John";

// 配列型の変数
let numbers: number[] = [1, 2, 3];

// オブジェクト型の変数
let person: { name: string, age: number } = { name: "Alice", age: 25 };

2. 関数のパラメータと戻り値に型指定する

//引数にも型指定ができる
//引数の()の後が戻り値に対する型指定になる
function add(x: number, y: number): number {
    return x + y;
}

3. インターフェースや型エイリアスを使用する

//interfaceで宣言
interface Person {
    name: string;
    age: number;
}

//typeで宣言
type Point = {
    x: number;
    y: number;
};

let person: Person = { name: "Bob", age: 28 };
let point: Point = { x: 10, y: 20 };

4. ジェネリクスを使用する

function identity<T>(arg: T): T {
    return arg;
}

let result: string = identity("Hello, TypeScript!");
let value: number = identity(42);

5. 型ガードを使用する

//typeof
function isString(value: any): value is string {
    return typeof value === "string";
}

function processValue(value: any) {
    if (isString(value)) {
        // valueはstring型に絞り込まれた
        console.log(value.length);
    } else {
        console.log("Not a string");
    }
}

//in
interface Tweet {
  likedCount: number
}
interface User {
  name: string
}

const getData = (input: Tweet | User) => {
  if ('likedCount' in input) {
    return `いいね数: ${input.likedCount}`
  } else {
    return `ユーザー名: ${input.name}`
  }
}

const tweet: Tweet = {
  likedCount: 100
}
console.log(getData(tweet))
// 'いいね数: 100'

const user: User = {
  name: 'Taro'
}
console.log(getData(user))
// 'ユーザー名: Taro'

6. 非null/undefinedアサーションを使用する

//変数がnullまたはundefinedではないことを確認するために使用する

let value: string | null = getNullableValue();
let length: number = value!.length; // 非null/undefinedアサーションを使用

まとめ

私は、上記の記事やソースコードにより、以前よりすこ〜しだけ理解が深まったと感じています。
まだまだ知識を深めている最中ですので、本や教材のようにわかりやすくなかったかもしれませんが、私の知識向上とともに更新していきたいと思っております。

38歳でフロントエンジニアを目指す私としては、まだまだ険しい道のりになりそうですが、必ずものにしてみせたいと情熱を燃やしております！