0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

TypeScriptが難しいと感じたので、改めて整理してみた!

Posted at

TypeScriptは、難しくない?

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

大枠を捉えてみた!

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

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

目的と対象

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

具体的なコード例

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

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歳でフロントエンジニアを目指す私としては、まだまだ険しい道のりになりそうですが、必ずものにしてみせたいと情熱を燃やしております!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?