3
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の上位互換言語で、多くのWeb開発者が使用しています。しかし、初めてTypeScriptを学ぶとなると、慣れない概念や仕組みに遭遇することがあります。この記事では、TypeScriptで初心者がわかりにくいところを紹介します。

1. 型の定義

TypeScriptでは、変数や関数の引数に型を定義することができます。型の定義をすることで、プログラムを実行する前に型の不一致などのエラーを検出することができます。

例:

const message: string = "Hello, World!";
console.log(message);

2. 型推論

TypeScriptでは、変数の型を明示的に定義しない場合でも、変数の値から型を推論することができます。これを型推論と呼びます。

例:

const message = "Hello, World!";
console.log(message);

この例では、message変数に代入された値から、型が文字列であることが推論されます。

3. オブジェクトの型定義

TypeScriptでは、オブジェクトの型定義には複数の方法があります。例えば、以下のようにインターフェースを使って定義することができます。

例:

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "John Doe",
  age: 30
};

console.log(user);

4. インターフェース

インターフェースは、オブジェクトが持つプロパティやメソッドを定義するためのものです。インターフェースを使うことで、関数やクラスに対して渡すオブジェクトの型を指定することができます。

例:

interface Person {
  firstName: string;
  lastName: string;
}

function greet(person: Person) {
  console.log(`Hello, ${person.firstName} ${person.lastName}!`);
}

const person = { firstName: "John", lastName: "Doe" };
greet(person);

この例では、Personインターフェースを使って、greet関数に渡すオブジェクトが持つプロパティを定義しています。greet関数では、このインターフェースを使ってオブジェクトの型を判別することができます。

5. 関数の型定義

TypeScriptでは、関数にも型を定義することができます。関数の型定義には、引数の型と戻り値の型を指定することができます。

例:

function add(a: number, b: number): number {
  return a + b;
}

const result = add(1, 2);
console.log(result);

6. 配列の型定義

TypeScriptでは、配列にも型を定義することができます。配列の型定義には、配列内の要素の型を指定することができます。

例:

const numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers);

7. Generics

Genericsは、型を一般化するための概念です。Genericsを使うことで、関数やクラスをより汎用的に作ることができます。

例:

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

const result = identity<string>("Hello, World!");
console.log(result);

この例では、identity関数を使うことで、任意の型の値を受け取り、同じ型の値を返すことができます。

以上が、TypeScriptで初心者がわかりにくいところの一部です。TypeScriptは、JavaScriptの上位互換言語であり、慣れることでより高機能な開発ができるようになります。初めてのTypeScript学習には少し時間がかかるかもしれませんが、継続することで有用なスキルを習得することができます。

まとめ

  • TypeScriptはJavaScriptの上位互換言語であり、より高機能な開発を行うことができます
  • 変数や関数には型を定義することができ、型定義によってエラーを早期に検出することができます
  • クラスやインタフェースを使ってオブジェクト指向のプログラミングを行うことができます
  • Genericsを使うことで、関数やクラスをより汎用的に作ることができます

TypeScriptを学ぶことで、より質の高いコードを書くことができるようになります。初めは少し難しいかもしれませんが、継続することで身に付けられるスキルは大きいです。

3
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
3
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?