é«åºŠãªåå®å šæ§ã®æè¡ãæ¢æ±ããTypeScriptã®æ ã«åºãŸããããèªä¿¡ãæã£ãŠãå ç¢ã§ä¿å®æ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããæ¹æ³ãåŠã³ãŸãããã
TypeScriptã®å®å®æ¢æ»ïŒããã·ã§ã³ã³ã³ãããŒã«åå®å šæ§
å®å®æ¢æ»å®¶ã®çãããããããïŒæ¬æ¥ã®ããã·ã§ã³ã¯ãTypeScriptãšãã®åŒ·åãªåã·ã¹ãã ã®é åçãªäžçãæ¢æ±ããããšã§ããTypeScriptããå ç¢ã§ä¿¡é Œæ§ãé«ããä¿å®æ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®ãããã·ã§ã³ã³ã³ãããŒã«ããšèããŠãã ããããã®é«åºŠãªåå®å šæ§æ©èœã掻çšããããšã§ããœãããŠã§ã¢éçºã®è€éããèªä¿¡ãæã£ãŠä¹ãè¶ãããšã©ãŒãæå°éã«æããã³ãŒãã®å質ãæå€§éã«é«ããããšãã§ããŸãããã®æ ã§ã¯ãåºæ¬çãªæŠå¿µããé«åºŠãªãã¯ããã¯ãŸã§ãå¹ åºããããã¯ãã«ããŒããTypeScriptã®åå®å šæ§ã®ãã¹ã¿ãŒã«ãªãããã®ç¥èãšã¹ãã«ãç¿åŸã§ããŸãã
ãªãåå®å šæ§ãéèŠãªã®ãïŒå®å®è¡çªã®é²æ¢
åºçºããåã«ããªãåå®å šæ§ãããã»ã©éèŠãªã®ããçè§£ããŠãããŸããããJavaScriptã®ãããªåçèšèªã§ã¯ããšã©ãŒã¯å€ãã®å Žåãå®è¡æã«ã®ã¿è¡šé¢åããäºæããªãã¯ã©ãã·ã¥ããŠãŒã¶ãŒã®äžæºã«ã€ãªãããŸããéçåä»ããåããTypeScriptã¯ãæ©æèŠåã·ã¹ãã ãšããŠæ©èœããŸããéçºäžã«æœåšçãªåé¢é£ã®ãšã©ãŒãç¹å®ããããããæ¬çªç°å¢ã«å°éããã®ãé²ããŸãããã®ç©æ¥µçãªã¢ãããŒãã«ããããããã°æéãå€§å¹ ã«ççž®ãããã¢ããªã±ãŒã·ã§ã³å šäœã®å®å®æ§ãåäžããŸãã
é貚æç®ãåŠçããéèã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããŠããã·ããªãªãèããŠã¿ãŸããããåå®å šæ§ããªããšã誀ã£ãŠæååãæ°å€ã®ä»£ããã«èšç®é¢æ°ã«æž¡ããŠããŸããäžæ£ç¢ºãªçµæãæœåšçãªééçæå€±ã«ã€ãªããå¯èœæ§ããããŸããTypeScriptã¯ãéçºäžã«ãã®ãšã©ãŒãææããèšç®ãåžžã«æ£ããããŒã¿åã§å®è¡ãããããã«ããŸãã
TypeScriptã®åºç€ïŒåºæ¬åãšã€ã³ã¿ãŒãã§ãŒã¹
ç§ãã¡ã®æ
ã¯ãTypeScriptã®åºæ¬çãªæ§æèŠçŽ ã§ããåºæ¬åãšã€ã³ã¿ãŒãã§ãŒã¹ããå§ãŸããŸããTypeScriptã¯ãnumberãstringãbooleanãnullãundefinedãããã³symbolãå«ãå
æ¬çãªããªããã£ãåã®ã»ãããæäŸããŸãããããã®åã¯ãããŒã¿ã®æ§é ãšåäœãå®çŸ©ããããã®åŒ·åºãªåºç€ãæäŸããŸãã
äžæ¹ãã€ã³ã¿ãŒãã§ãŒã¹ã䜿çšãããšããªããžã§ã¯ãã®åœ¢ç¶ãæå®ããå¥çŽãå®çŸ©ã§ããŸãããªããžã§ã¯ããæããªããã°ãªããªãããããã£ãšã¡ãœãããèšè¿°ããã³ãŒãããŒã¹å šäœã§äžè²«æ§ãšäºæž¬å¯èœæ§ã確ä¿ããŸãã
äŸïŒåŸæ¥å¡ã€ã³ã¿ãŒãã§ãŒã¹ã®å®çŸ©
æ¶ç©ºã®äŒç€Ÿã§åŸæ¥å¡ã衚ãã€ã³ã¿ãŒãã§ãŒã¹ãäœæããŸãããã
interface Employee {
id: number;
name: string;
title: string;
salary: number;
department: string;
address?: string; // ãªãã·ã§ã³ããããã£
}
ãã®ã€ã³ã¿ãŒãã§ãŒã¹ã¯ãidãnameãtitleãsalaryãããã³departmentãªã©ãåŸæ¥å¡ãªããžã§ã¯ããæã€å¿
èŠãããããããã£ãå®çŸ©ããŸããaddressããããã£ã¯ã?èšå·ã䜿çšããŠãªãã·ã§ã³ãšããŠããŒã¯ãããŠãããå¿
é ã§ã¯ãªãããšã瀺ããŠããŸãã
次ã«ããã®ã€ã³ã¿ãŒãã§ãŒã¹ã«æºæ ããåŸæ¥å¡ãªããžã§ã¯ããäœæããŸãããã
const employee: Employee = {
id: 123,
name: "Alice Johnson",
title: "Software Engineer",
salary: 80000,
department: "Engineering"
};
TypeScriptã¯ããã®ãªããžã§ã¯ããEmployeeã€ã³ã¿ãŒãã§ãŒã¹ã«æºæ ããŠããããšã確èªããå¿
èŠãªããããã£ã誀ã£ãŠçç¥ããããééã£ãããŒã¿åãå²ãåœãŠããããã®ãé²ããŸãã
ãžã§ããªã¯ã¹ïŒåå©çšå¯èœã§åå®å šãªã³ã³ããŒãã³ãã®æ§ç¯
ãžã§ããªã¯ã¹ã¯ãããŸããŸãªããŒã¿åã§åäœããåå©çšå¯èœãªã³ã³ããŒãã³ããäœæã§ããTypeScriptã®åŒ·åãªæ©èœã§ããæè»ã§åå®å šãªã³ãŒããèšè¿°ã§ããããã«ãªããç¹°ãè¿ãã³ãŒããæåã®åãã£ã¹ããäžèŠã«ãªããŸãã
äŸïŒãžã§ããªãã¯ãªã¹ãã®äœæ
ä»»æã®åã®èŠçŽ ãä¿æã§ãããžã§ããªãã¯ãªã¹ããäœæããŸãããã
class List<T> {
private items: T[] = [];
addItem(item: T): void {
this.items.push(item);
}
getItem(index: number): T | undefined {
return this.items[index];
}
getAllItems(): T[] {
return this.items;
}
}
// äœ¿çšæ³
const numberList = new List<number>();
numberList.addItem(1);
numberList.addItem(2);
const stringList = new List<string>();
stringList.addItem("Hello");
stringList.addItem("World");
console.log(numberList.getAllItems()); // åºå: [1, 2]
console.log(stringList.getAllItems()); // åºå: ["Hello", "World"]
ãã®äŸã§ã¯ãListã¯ã©ã¹ã¯ãžã§ããªãã¯ã§ãããä»»æã®åTã§äœ¿çšã§ããŸããList<number>ãäœæãããšãTypeScriptã¯ãªã¹ãã«æ°å€ã®ã¿ã远å ã§ããããšã確èªããŸããåæ§ã«ãList<string>ãäœæãããšãTypeScriptã¯ãªã¹ãã«æååã®ã¿ã远å ã§ããããšã確èªããŸããããã«ããã誀ã£ãŠééã£ãåã®ããŒã¿ããªã¹ãã«è¿œå ãããªã¹ã¯ããªããªããŸãã
é«åºŠãªåïŒç²ŸåºŠã«ããåå®å šæ§ã®æŽç·Ž
TypeScriptã¯ãåå®å šæ§ã埮調æŽããè€éãªåã®é¢ä¿ã衚çŸã§ãããããŸããŸãªé«åºŠãªåãæäŸããŸãããããã®åã«ã¯ã次ã®ãããªãã®ããããŸãã
- ãŠããªã³åïŒè€æ°ã®åã®ããããã«ãªãå€ã衚ããŸãã
- 亀差åïŒè€æ°ã®åã1ã€ã®åã«çµã¿åãããŸãã
- æ¡ä»¶ä»ãåïŒä»ã®åã«äŸåããåãå®çŸ©ã§ããŸãã
- ãããåïŒæ¢åã®åãæ°ããåã«å€æããŸãã
- åã¬ãŒãïŒç¹å®ã®ã¹ã³ãŒãå ã§å€æ°ã®åãçµã蟌ãããšãã§ããŸãã
äŸïŒæè»ãªå ¥åã«ãŠããªã³åã䜿çšãã
æååãŸãã¯æ°å€ã®ãããããå ¥åãšããŠåãå ¥ããããšãã§ãã颿°ããããšããŸãããã
function printValue(value: string | number): void {
console.log(value);
}
printValue("Hello"); // æå¹
printValue(123); // æå¹
// printValue(true); // ç¡å¹ (booleanã¯èš±å¯ãããŠããŸãã)
ãŠããªã³åstring | numberã䜿çšããããšã«ãããvalueãã©ã¡ãŒã¿ãŒãæååãŸãã¯æ°å€ã®ããããã«æå®ã§ããŸããTypeScriptã¯ããã®åã®å¶çŽãé©çšãã誀ã£ãŠããŒã«å€ããã®ä»ã®ç¡å¹ãªåã颿°ã«æž¡ãã®ãé²ããŸãã
äŸïŒåå€æã«æ¡ä»¶ä»ãåã䜿çšãã
æ¡ä»¶ä»ãåã䜿çšãããšãä»ã®åã«äŸåããåãäœæã§ããŸããããã¯ããªããžã§ã¯ãã®ããããã£ã«åºã¥ããŠåçã«çæãããåãå®çŸ©ããã®ã«ç¹ã«åœ¹ç«ã¡ãŸãã
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
function myFunction(x: number): string {
return x.toString();
}
type MyFunctionReturnType = ReturnType<typeof myFunction>; // string
ããã§ã`ReturnType`æ¡ä»¶ä»ãåã¯ã`T`ã颿°ãã©ããããã§ãã¯ããŸããããã§ããã°ã颿°ã®æ»ãå`R`ãæšæž¬ããŸãããã以å€ã®å Žåã¯ãããã©ã«ãã§`any`ã«ãªããŸããããã«ãããã³ã³ãã€ã«æã«é¢æ°ã®æ»ãåãåçã«æ±ºå®ã§ããŸãã
ãããåïŒåã®å€æã®èªåå
ãããåã¯ãåã®åããããã£ã«å€æãé©çšããããšã«ãããæ¢åã®åã倿ããããã®ç°¡æœãªæ¹æ³ãæäŸããŸããããã¯ããã¹ãŠã®ããããã£ããªãã·ã§ã³ãŸãã¯readonlyã«ãããªã©ããªããžã§ã¯ãã®ããããã£ã倿ŽãããŠãŒãã£ãªãã£åãäœæããã®ã«ç¹ã«åœ¹ç«ã¡ãŸãã
äŸïŒReadonlyåã®äœæ
ãªããžã§ã¯ãã®ãã¹ãŠã®ããããã£ãreadonlyã«ãããããåãäœæããŸãããã
type Readonly<T> = {
readonly [K in keyof T]: T[K];
};
interface Person {
name: string;
age: number;
}
const person: Readonly<Person> = {
name: "John Doe",
age: 30
};
// person.age = 31; // ãšã©ãŒ: èªã¿åãå°çšããããã£ã®ããã'age'ã«å²ãåœãŠãããšã¯ã§ããŸããã
`Readonly<T>`ãããåã¯ãå`T`ã®ãã¹ãŠã®ããããã£`K`ãå埩åŠçããããããreadonlyã«ããŸããããã«ããããªããžã§ã¯ããäœæãããåŸã§ãªããžã§ã¯ãã®ããããã£ã誀ã£ãŠå€æŽããããšãé²ããŸãã
ãŠãŒãã£ãªãã£åïŒçµã¿èŸŒã¿åã®å€æã®æŽ»çš
TypeScriptã¯ãããã«å©çšã§ããäžè¬çãªåã®å€æãæäŸããäžé£ã®çµã¿èŸŒã¿ãŠãŒãã£ãªãã£åãæäŸããŸãããããã®ãŠãŒãã£ãªãã£åã«ã¯ã次ã®ãããªãã®ããããŸãã
Partial<T>ïŒTã®ãã¹ãŠã®ããããã£ããªãã·ã§ã³ã«ããŸããRequired<T>ïŒTã®ãã¹ãŠã®ããããã£ãå¿ é ã«ããŸããReadonly<T>ïŒTã®ãã¹ãŠã®ããããã£ãreadonlyã«ããŸããPick<T, K>ïŒTããããããã£ã®ã»ããKãéžæããŠãæ°ããåãäœæããŸããOmit<T, K>ïŒTããããããã£ã®ã»ããKãçç¥ããŠãæ°ããåãäœæããŸããRecord<K, T>ïŒããŒKãšå€Tã®åãäœæããŸãã
äŸïŒPartialã䜿çšããŠãªãã·ã§ã³ããããã£ãäœæãã
Partial<T>ãŠãŒãã£ãªãã£åã䜿çšããŠãEmployeeã€ã³ã¿ãŒãã§ãŒã¹ã®ãã¹ãŠã®ããããã£ããªãã·ã§ã³ã«ããŸãããã
type PartialEmployee = Partial<Employee>;
const partialEmployee: PartialEmployee = {
name: "Jane Smith"
};
ããã§ãnameããããã£ã®ã¿ãæå®ãããåŸæ¥å¡ãªããžã§ã¯ããäœæã§ããŸããä»ã®ããããã£ã¯ãPartial<T>ãŠãŒãã£ãªãã£åã®ãããã§ãªãã·ã§ã³ã§ãã
äžå€æ§ïŒå ç¢ã§äºæž¬å¯èœãªã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯
äžå€æ§ã¯ãäœæåŸã«å€æŽã§ããªãããŒã¿æ§é ã®äœæãéèŠããããã°ã©ãã³ã°ãã©ãã€ã ã§ãããã®ã¢ãããŒãã«ã¯ãäºæž¬å¯èœæ§ã®åäžããšã©ãŒã®ãªã¹ã¯ã®è»œæžãããã©ãŒãã³ã¹ã®åäžãªã©ãããã€ãã®å©ç¹ããããŸãã
TypeScriptã«ããäžå€æ§ã®é©çš
TypeScriptã¯ãã³ãŒãã§äžå€æ§ãé©çšããã®ã«åœ¹ç«ã€ããã€ãã®æ©èœãæäŸããŸãã
- Readonlyããããã£ïŒ
readonlyããŒã¯ãŒãã䜿çšããŠãåæååŸã«ããããã£ã倿Žãããã®ãé²ããŸãã - ãªããžã§ã¯ãã®ããªãŒãºïŒ
Object.freeze()ã¡ãœããã䜿çšããŠããªããžã§ã¯ãã倿Žãããã®ãé²ããŸãã - äžå€ããŒã¿æ§é ïŒImmutable.jsãMoriãªã©ã®ã©ã€ãã©ãªããäžå€ããŒã¿æ§é ã䜿çšããŸãã
äŸïŒReadonlyããããã£ã®äœ¿çš
Employeeã€ã³ã¿ãŒãã§ãŒã¹ã倿ŽããŠãidããããã£ãreadonlyã«ããŸãããã
interface Employee {
readonly id: number;
name: string;
title: string;
salary: number;
department: string;
}
const employee: Employee = {
id: 123,
name: "Alice Johnson",
title: "Software Engineer",
salary: 80000,
department: "Engineering"
};
// employee.id = 456; // ãšã©ãŒ: èªã¿åãå°çšããããã£ã®ããã'id'ã«å²ãåœãŠãããšã¯ã§ããŸããã
ããã§ãemployeeãªããžã§ã¯ãã®idããããã£ã¯ãäœæåŸã«å€æŽã§ããªããªããŸããã
颿°åããã°ã©ãã³ã°ïŒåå®å šæ§ãšäºæž¬å¯èœæ§ã®æ¡çš
颿°åããã°ã©ãã³ã°ã¯ãçŽç²ãªé¢æ°ãäžå€æ§ãããã³å®£èšåããã°ã©ãã³ã°ã®äœ¿çšãéèŠããããã°ã©ãã³ã°ãã©ãã€ã ã§ãããã®ã¢ãããŒãã¯ãããä¿å®æ§ããã¹ãå¯èœããã€ä¿¡é Œæ§ã®é«ãã³ãŒãã«ã€ãªããå¯èœæ§ããããŸãã
颿°åããã°ã©ãã³ã°ã®ããã®TypeScriptã®æŽ»çš
TypeScriptã®åã·ã¹ãã ã¯ã匷åãªåãã§ãã¯ãæäŸããæç¢ºãªå ¥åºååãæã€çŽç²ãªé¢æ°ãå®çŸ©ã§ããããã«ããããšã§ã颿°åããã°ã©ãã³ã°ã®ååãè£å®ããŸãã
äŸïŒçŽç²ãªé¢æ°ã®äœæ
æ°å€ã®é åã®åèšãèšç®ããçŽç²ãªé¢æ°ãäœæããŸãããã
function sum(numbers: number[]): number {
let total = 0;
for (const number of numbers) {
total += number;
}
return total;
}
const numbers = [1, 2, 3, 4, 5];
const total = sum(numbers);
console.log(total); // åºå: 15
ãã®é¢æ°ã¯ãåãå ¥åã«å¯ŸããŠåžžã«åãåºåãè¿ããå¯äœçšããªããããçŽç²ã§ããããã«ããããã¹ããšæšè«ã容æã«ãªããŸãã
ãšã©ãŒåŠçïŒå埩åã®ããã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯
ãšã©ãŒåŠçã¯ããœãããŠã§ã¢éçºã®éèŠãªåŽé¢ã§ããTypeScriptã¯ããšã©ãŒåŠçã·ããªãªã®ã³ã³ãã€ã«æã®åãã§ãã¯ãæäŸããããšã«ãããããå埩åã®ããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããã®ã«åœ¹ç«ã¡ãŸãã
äŸïŒãšã©ãŒåŠçã«å€å¥å ±çšäœã䜿çšãã
å€å¥å ±çšäœã䜿çšããŠãAPIåŒã³åºãã®çµæã衚ããŸããããããã¯ãæåãŸãã¯ãšã©ãŒã®ããããã«ãªããŸãã
interface Success<T> {
success: true;
data: T;
}
interface Error {
success: false;
error: string;
}
type Result<T> = Success<T> | Error;
async function fetchData(): Promise<Result<string>> {
try {
// APIåŒã³åºããã·ãã¥ã¬ãŒã
const data = await Promise.resolve("APIããã®ããŒã¿");
return { success: true, data };
} catch (error: any) {
return { success: false, error: error.message };
}
}
async function processData() {
const result = await fetchData();
if (result.success) {
console.log("ããŒã¿ïŒ", result.data);
} else {
console.error("ãšã©ãŒïŒ", result.error);
}
}
processData();
ãã®äŸã§ã¯ãResult<T>åã¯ãSuccess<T>ãŸãã¯Errorã®ããããã«ãªãå€å¥å
±çšäœã§ããsuccessããããã£ã¯å€å¥åãšããŠæ©èœããAPIåŒã³åºããæåãããã©ãããç°¡åã«å€æã§ããŸããTypeScriptã¯ããã®åã®å¶çŽãé©çšããæåãšãšã©ãŒã®äž¡æ¹ã®ã·ããªãªãé©åã«åŠçããããšãä¿èšŒããŸãã
ããã·ã§ã³å®äºïŒTypeScriptã®åå®å šæ§ã®ãã¹ã¿ãŒ
å®å®æ¢æ»å®¶ã®çãããããã§ãšãããããŸãïŒTypeScriptã®åå®å šæ§ã®äžçãæ£åžžã«ããã²ãŒããããã®åŒ·åãªæ©èœã«ã€ããŠããæ·±ãçè§£ã§ããŸããããã®ã¬ã€ãã§èª¬æãããŠãããã¯ããã¯ãšååãé©çšããããšã«ãããããå ç¢ã§ä¿¡é Œæ§ãé«ããä¿å®æ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸããã¹ãã«ãããã«åäžãããçã®åå®å šæ§ãã¹ã¿ãŒã«ãªãããã«ãTypeScriptã®åã·ã¹ãã ãç¶ç¶çã«æ¢çŽ¢ããŠå®éšããããšãå¿ããªãã§ãã ããã
ãããªãæ¢æ±ïŒãªãœãŒã¹ãšãã¹ããã©ã¯ãã£ã¹
TypeScriptã®æ ãç¶ããã«ã¯ã次ã®ãªãœãŒã¹ãæ€èšããŠãã ããã
- TypeScriptããã¥ã¡ã³ãïŒå ¬åŒTypeScriptããã¥ã¡ã³ãã¯ãèšèªã®ãã¹ãŠã®åŽé¢ã«ã€ããŠåŠã¶ããã®è²ŽéãªãªãœãŒã¹ã§ãã
- TypeScript Deep DiveïŒTypeScriptã®é«åºŠãªæ©èœã«é¢ããå æ¬çãªã¬ã€ãã
- TypeScriptãã³ãããã¯ïŒTypeScriptã®æ§æãã»ãã³ãã£ã¯ã¹ãåã·ã¹ãã ã®è©³çŽ°ãªæŠèŠã
- ãªãŒãã³ãœãŒã¹TypeScriptãããžã§ã¯ãïŒçµéšè±å¯ãªéçºè ããåŠã³ã圌ããå®éã®ã·ããªãªã§TypeScriptãã©ã®ããã«é©çšããŠãããã確èªããããã«ãGitHubã§ãªãŒãã³ãœãŒã¹ã®TypeScriptãããžã§ã¯ããæ¢çŽ¢ããŸãã
åå®å šæ§ãåãå ¥ããç¶ç¶çã«åŠç¿ããããšã«ãããTypeScriptã®å¯èœæ§ãæå€§éã«åŒãåºããæã®è©Šç·Žã«èããåªãããœãããŠã§ã¢ãæ§ç¯ã§ããŸããããããŒã³ãŒãã£ã³ã°ïŒ