TypeScriptタイピングのコツTypeScript構文型アノテーション
TypeScriptタイピングのコツ：高速コーディングのためのTypeScript構文マスター
TypeScriptコードを素早く入力するための必須テクニックを学びましょう。型アノテーション、ジェネリクス、インターフェースからユーティリティ型、高度なパターンまで、TypeScriptのタイピング速度と正確性を向上させます。
TypeScriptはスケーラブルなJavaScriptアプリケーション構築の標準となっています。その強力な型システムはコンパイル時にエラーを検出しますが、TypeScriptコードを効率的に入力するには、その独自の構文パターンをマスターする必要があります。この包括的なガイドでは、TypeScriptをより速く、より少ないエラーで入力する方法を解説します。
TypeScriptタイピングスキルが重要な理由
TypeScriptはJavaScriptに型アノテーションを追加するため、入力する文字数が増えます。しかし、エラーを早期に発見できる生産性の向上は、追加のキー入力をはるかに上回ります。TypeScriptを流暢に入力できる開発者は、デバッグに費やす時間が減り、機能構築により多くの時間を使えます。
マスターすべきTypeScriptの必須記号
1
コロン (:)
変数、パラメータ、戻り値の型アノテーションに使用。
2
山括弧 (<>)
ジェネリクス、型アサーション、JSX要素に必須。
3
パイプ (|)
複数の型を組み合わせるユニオン型。
4
アンパサンド (&)
複数の型を組み合わせるインターセクション型。
5
クエスチョンマーク (?)
オプショナルプロパティとオプショナルチェイニング。
基本的な型アノテーションパターン
型アノテーションはTypeScriptの基礎です。自然に入力できるまで練習しましょう：
typescript
const name: string = 'Alice';
const age: number = 30;
const isActive: boolean = true;typescript
const items: string[] = ['a', 'b', 'c'];
const numbers: Array<number> = [1, 2, 3];typescript
const user: { name: string; age: number } = {
name: 'Bob',
age: 25,
};関数の型パターン
TypeScriptの関数にはパラメータと戻り値の型アノテーションが必要です：
typescript
function greet(name: string): string {
return `Hello, ${name}!`;
}typescript
const add = (a: number, b: number): number => {
return a + b;
};typescript
function fetchUser(id: number): Promise<User> {
return api.get(`/users/${id}`);
}typescript
function process(data: string, callback: (result: string) => void): void {
callback(data.toUpperCase());
}インターフェースパターン
インターフェースはオブジェクトの形状を定義し、TypeScriptの基本です：
typescript
interface User {
id: number;
name: string;
email: string;
}typescript
interface Config {
readonly apiUrl: string;
timeout?: number;
retries: number;
}typescript
interface Repository<T> {
find(id: number): Promise<T>;
save(item: T): Promise<void>;
delete(id: number): Promise<boolean>;
}typescript
interface ApiResponse<T> {
data: T;
status: number;
message: string;
}型エイリアスパターン
型エイリアスはカスタム型名を作成します：
typescript
type ID = string | number;typescript
type Status = 'pending' | 'active' | 'completed';typescript
type Point = {
x: number;
y: number;
};typescript
type Callback<T> = (data: T) => void;typescript
type Nullable<T> = T | null | undefined;ジェネリクスパターン
ジェネリクスは再利用可能で型安全なコードを実現します：
typescript
function identity<T>(value: T): T {
return value;
}typescript
function map<T, U>(items: T[], fn: (item: T) => U): U[] {
return items.map(fn);
}typescript
class Container<T> {
constructor(private value: T) {}
getValue(): T {
return this.value;
}
}typescript
interface State<T> {
data: T;
loading: boolean;
error: Error | null;
}ユニオン型とインターセクション型
型を組み合わせて柔軟性を高めます：
typescript
type StringOrNumber = string | number;typescript
type Result<T> = { success: true; data: T } | { success: false; error: string };typescript
type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged;typescript
function handle(value: string | number | boolean): void {
if (typeof value === 'string') {
console.log(value.toUpperCase());
}
}ユーティリティ型パターン
TypeScriptには組み込みのユーティリティ型があります：
typescript
type PartialUser = Partial<User>;typescript
type RequiredConfig = Required<Config>;typescript
type ReadonlyUser = Readonly<User>;typescript
type UserKeys = keyof User;typescript
type NameType = User['name'];typescript
type UserWithoutId = Omit<User, 'id'>;typescript
type UserIdAndName = Pick<User, 'id' | 'name'>;クラスパターン
TypeScriptのクラスはアクセス修飾子とインターフェースをサポートします：
typescript
class User {
constructor(
public name: string,
private age: number,
readonly id: string
) {}
}typescript
class Service implements IService {
private cache: Map<string, Data> = new Map();
async fetch(id: string): Promise<Data> {
return this.cache.get(id) ?? await this.load(id);
}
}typescript
abstract class BaseRepository<T> {
abstract find(id: number): Promise<T>;
abstract save(item: T): Promise<void>;
}型ガードパターン
型ガードは実行時に型を絞り込みます：
typescript
function isString(value: unknown): value is string {
return typeof value === 'string';
}typescript
function isUser(obj: unknown): obj is User {
return typeof obj === 'object' && obj !== null && 'name' in obj;
}typescript
if (value instanceof Date) {
console.log(value.toISOString());
}非同期パターン
非同期コードを適切に型付けします：
typescript
async function fetchData(): Promise<Data[]> {
const response = await fetch(url);
return response.json();
}typescript
const getData = async (): Promise<Result<User>> => {
try {
const user = await api.getUser();
return { success: true, data: user };
} catch (error) {
return { success: false, error: String(error) };
}
};React with TypeScriptパターン
Reactアプリケーションでよく使うパターン：
typescript
interface Props {
title: string;
onClick: () => void;
children?: React.ReactNode;
}typescript
const Button: React.FC<Props> = ({ title, onClick }) => {
return <button onClick={onClick}>{title}</button>;
};typescript
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);typescript
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};モジュールとインポートパターン
TypeScriptコードの整理方法：
typescript
import type { User, Config } from './types';
import { fetchUser, saveUser } from './api';typescript
export interface ApiResponse<T> {
data: T;
status: number;
}typescript
export type { User, Config };
export { UserService, ConfigService };TypeScript練習のコツ
•
山括弧 <> に集中する - ジェネリクスで常に使用
•
変数名の後、型の前のコロン : の配置を練習
•
ユニオン型のパイプ | とインターセクションのアンパサンド & をマスター
•
ジェネリクス制約の extends キーワードに慣れる
•
keyof、typeof、インデックスアクセス型を練習