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
|
! |
具体的なコード例
自分なりに使いそうなシーンのコード例を記載してみます。
// 数値型の変数
let age: number = 30;
// 文字列型の変数
let name: string = "John";
// 配列型の変数
let numbers: number[] = [1, 2, 3];
// オブジェクト型の変数
let person: { name: string, age: number } = { name: "Alice", age: 25 };
//引数にも型指定ができる
//引数の()の後が戻り値に対する型指定になる
function add(x: number, y: number): number {
return x + y;
}
//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 };
function identity<T>(arg: T): T {
return arg;
}
let result: string = identity("Hello, TypeScript!");
let value: number = identity(42);
//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'
//変数がnullまたはundefinedではないことを確認するために使用する
let value: string | null = getNullableValue();
let length: number = value!.length; // 非null/undefinedアサーションを使用
まとめ
私は、上記の記事やソースコードにより、以前よりすこ〜しだけ理解が深まったと感じています。
まだまだ知識を深めている最中ですので、本や教材のようにわかりやすくなかったかもしれませんが、私の知識向上とともに更新していきたいと思っております。
38歳でフロントエンジニアを目指す私としては、まだまだ険しい道のりになりそうですが、必ずものにしてみせたいと情熱を燃やしております!