TypeScriptã«ãããã€ã³ããã¯ã¹ã·ã°ããã£ã®å æ¬çãªã¬ã€ãã§ãæè»ãªããŒã¿æ§é ã®åãè§£ãæŸã¡ãŸããããã°ããŒãã«ãªéçºã®ããã®åçããããã£åå®çŸ©ãæ¢æ±ããŸãã
ã€ã³ããã¯ã¹ã·ã°ããã£ïŒTypeScriptã«ãããåçããããã£ã®åå®çŸ©
ãœãããŠã§ã¢éçºãç¹ã«JavaScriptãšã³ã·ã¹ãã ãçµ¶ããé²åããäžã§ãæè»ã§åçãªããŒã¿æ§é ã®å¿ èŠæ§ã¯æ¥µããŠéèŠã§ããTypeScriptã¯ããã®å ç¢ãªåã·ã¹ãã ã«ãããè€éãã管çããã³ãŒãã®ä¿¡é Œæ§ã確ä¿ããããã®åŒ·åãªããŒã«ãæäŸããŸãããããã®ããŒã«ã®äžã§ããã€ã³ããã¯ã¹ã·ã°ããã£ã¯ãäºåã«ååãåãããªãã£ããã倧ããå€åããå¯èœæ§ã®ããããããã£ã®åãå®çŸ©ããããã®éèŠãªæ©èœãšããŠéç«ã£ãŠããŸãããã®ã¬ã€ãã§ã¯ãã€ã³ããã¯ã¹ã·ã°ããã£ã®æŠå¿µãæ·±ãæãäžãããã®æçšæ§ãå®è£ æ¹æ³ããããŠäžçäžã®éçºè ã«ãšã£ãŠã®ãã¹ããã©ã¯ãã£ã¹ã«ã€ããŠãã°ããŒãã«ãªèŠç¹ãã解説ããŸãã
ã€ã³ããã¯ã¹ã·ã°ããã£ãšã¯ïŒ
ã€ã³ããã¯ã¹ã·ã°ããã£ã®æ žãšãªãã®ã¯ãããŒïŒãŸãã¯ã€ã³ããã¯ã¹ïŒã®åãšå€ã®åã¯åãã£ãŠãããã®ã®ããã¹ãŠã®ããŒã®å ·äœçãªååãäžæãªãªããžã§ã¯ãã®åœ¢ç¶ãTypeScriptã«äŒããæ¹æ³ã§ããããã¯ãå€éšãœãŒã¹ããŠãŒã¶ãŒå ¥åããŸãã¯åçã«çæãããèšå®ããååŸãããããŒã¿ãæ±ãéã«éåžžã«åœ¹ç«ã¡ãŸãã
åœéåãããã¢ããªã±ãŒã·ã§ã³ã®ããã¯ãšã³ãããèšå®ããŒã¿ãååŸããã·ããªãªãèããŠã¿ãŸãããããã®ããŒã¿ã«ã¯ãããŸããŸãªèšèªã®èšå®ãå«ãŸããå¯èœæ§ããããããŒãèšèªã³ãŒãïŒäŸïŒ'en'ã'fr'ã'es-MX'ïŒã§ãå€ãããŒã«ã©ã€ãºãããããã¹ããå«ãæååã§ããå ŽåããããŸãããã¹ãŠã®å¯èœãªèšèªã³ãŒããäºåã«ç¥ãããšã¯ã§ããŸããããããããæååã§ããããããã«é¢é£ä»ããããå€ãæååã§ããããšã¯åãã£ãŠããŸãã
ã€ã³ããã¯ã¹ã·ã°ããã£ã®æ§æ
ã€ã³ããã¯ã¹ã·ã°ããã£ã®æ§æã¯ã·ã³ãã«ã§ããè§æ¬åŒ§ã§å²ãŸããã€ã³ããã¯ã¹ïŒããŒïŒã®åãæå®ãããã®åŸã«ã³ãã³ãšå€ã®åãç¶ããŸããããã¯éåžžãinterfaceãŸãã¯type aliaså
ã§å®çŸ©ãããŸãã
äžè¬çãªæ§æã¯æ¬¡ã®ãšããã§ãã
[keyName: KeyType]: ValueType;
keyName: ããã¯ã€ã³ããã¯ã¹ã®ååã衚ãèå¥åã§ããæ £äŸã§ãããåãã§ãã¯èªäœã«ã¯åœ±é¿ããŸãããKeyType: ããã¯ããŒã®åãæå®ããŸããæãäžè¬çãªã·ããªãªã§ã¯ãstringãŸãã¯numberã«ãªããŸããæååãªãã©ã«ã®ãŠããªã³åã䜿çšããããšãã§ããŸãããããã¯ããŸãäžè¬çã§ã¯ãªããä»ã®æ¹æ³ã§åŠçããæ¹ãè¯ãå Žåãå€ãã§ããValueType: ããã¯åããŒã«é¢é£ä»ããããå€ã®åãæå®ããŸãã
ã€ã³ããã¯ã¹ã·ã°ããã£ã®äžè¬çãªãŠãŒã¹ã±ãŒã¹
ã€ã³ããã¯ã¹ã·ã°ããã£ã¯ã次ã®ç¶æ³ã§ç¹ã«äŸ¡å€ããããŸãã
- èšå®ãªããžã§ã¯ã: ããŒãæ©èœãã©ã°ãç°å¢åºæã®å€ããŸãã¯ãŠãŒã¶ãŒèšå®ã衚ãå¯èœæ§ã®ããã¢ããªã±ãŒã·ã§ã³èšå®ãä¿åããå ŽåãäŸãã°ãããŒããprimaryãããsecondaryãããaccentãã§ãå€ãã«ã©ãŒã³ãŒãïŒæååïŒã§ããããŒãã«ã©ãŒãä¿åãããªããžã§ã¯ããªã©ã
- åœéå (i18n) ããã³ããŒã«ã©ã€ãº (l10n): åã®äŸã§èª¬æããããã«ãç°ãªãèšèªã®ç¿»èš³ã管çããå Žåã
- APIã¬ã¹ãã³ã¹: æ§é ãå€åããããåçãã£ãŒã«ããå«ãŸããå¯èœæ§ã®ããAPIããã®ããŒã¿ãåŠçããå ŽåãäŸãã°ãåã¢ã€ãã ãäžæã®èå¥åã§ããŒä»ããããã¢ã€ãã ã®ãªã¹ããè¿ãã¬ã¹ãã³ã¹ãªã©ã
- ãããã³ã°ãšèŸæž: ãã¹ãŠã®å€ãç¹å®ã®åã«æºæ ããŠããããšã確èªããå¿ èŠããããã·ã³ãã«ãªããŒãšå€ã®ã¹ãã¢ãŸãã¯èŸæžãäœæããå Žåã
- DOMèŠçŽ ãšã©ã€ãã©ãª: IDãååã§ã³ã¬ã¯ã·ã§ã³å ã®èŠçŽ ã«ã¢ã¯ã»ã¹ãããªã©ãããããã£ãåçã«ã¢ã¯ã»ã¹ãããJavaScriptç°å¢ãšããåãããå Žåã
stringããŒãæã€ã€ã³ããã¯ã¹ã·ã°ããã£
ã€ã³ããã¯ã¹ã·ã°ããã£ã®æãé »ç¹ãªäœ¿çšæ³ã¯ãæååããŒã䌎ããŸããããã¯ãèŸæžãããããšããŠæ©èœãããªããžã§ã¯ãã«æé©ã§ãã
äŸ1ïŒãŠãŒã¶ãŒèšå®
ãŠãŒã¶ãŒãã«ã¹ã¿ã èšå®ãè¡ãããŠãŒã¶ãŒãããã¡ã€ã«ã·ã¹ãã ãæ§ç¯ããŠãããšæ³åããŠãã ããããããã®èšå®ã¯ã©ã®ãããªãã®ã§ãæ§ããŸããããä»»æã®èšå®å€ãæååãŸãã¯æ°å€ã®ããããã§ããããšãä¿èšŒããããšããŸãã
interface UserPreferences {
[key: string]: string | number;
theme: string;
fontSize: number;
notificationsEnabled: string; // Example of a string value
}
const myPreferences: UserPreferences = {
theme: 'dark',
fontSize: 16,
notificationsEnabled: 'daily',
language: 'en-US' // This is allowed because 'language' is a string key, and 'en-US' is a string value.
};
console.log(myPreferences.theme); // Output: dark
console.log(myPreferences['fontSize']); // Output: 16
console.log(myPreferences.language); // Output: en-US
// This would cause a TypeScript error because 'color' is not defined and its value type is not string | number:
// const invalidPreferences: UserPreferences = {
// color: true;
// };
ãã®äŸã§ã¯ã[key: string]: string | number;ã¯ãUserPreferencesåã®ãªããžã§ã¯ãã§æååããŒã䜿çšããŠã¢ã¯ã»ã¹ãããä»»æã®ããããã£ããstringãŸãã¯numberã®ããããã®å€ãæã€ããšãå®çŸ©ããŠããŸããthemeãfontSizeãnotificationsEnabledã®ãããªç¹å®ã®ããããã£ãå®çŸ©ã§ããããšã«ã泚ç®ããŠãã ãããTypeScriptã¯ããããã®ç¹å®ã®ããããã£ãã€ã³ããã¯ã¹ã·ã°ããã£ã®å€ã®åã«æºæ ããŠããããšããã§ãã¯ããŸãã
äŸ2ïŒåœéåãããã¡ãã»ãŒãž
åœéåã®äŸã忀èšããŸããããç°ãªãèšèªã®ã¡ãã»ãŒãžèŸæžããããšä»®å®ããŸãã
interface TranslatedMessages {
[locale: string]: { [key: string]: string };
}
const messages: TranslatedMessages = {
'en': {
greeting: 'Hello',
welcome: 'Welcome to our service',
},
'fr': {
greeting: 'Bonjour',
welcome: 'Bienvenue à notre service',
},
'es-MX': {
greeting: 'Hola',
welcome: 'Bienvenido a nuestro servicio',
}
};
console.log(messages['en'].greeting); // Output: Hello
console.log(messages['fr']['welcome']); // Output: Bienvenue à notre service
// This would cause a TypeScript error because 'fr' does not have a property named 'farewell' defined:
// console.log(messages['fr'].farewell);
// To handle potentially missing translations gracefully, you might use optional properties or add more specific checks.
ããã§ãå€åŽã®ã€ã³ããã¯ã¹ã·ã°ããã£[locale: string]: { [key: string]: string };ã¯ãmessagesãªããžã§ã¯ããä»»æã®æ°ã®ããããã£ãæã€ããšãã§ããåããããã£ããŒãæååïŒãã±ãŒã«ãäŸãã°ãenãããfrãã衚ãïŒã§ããããã®ãããªåããããã£ã®å€èªäœããªããžã§ã¯ãã§ããããšã瀺ããŠããŸãã{ [key: string]: string }ã·ã°ããã£ã«ãã£ãŠå®çŸ©ããããã®å
éšãªããžã§ã¯ãã¯ãä»»æã®æååããŒïŒã¡ãã»ãŒãžããŒãäŸãã°ãgreetingãã衚ãïŒãæã€ããšãã§ãããã®å€ã¯æååã§ãªããã°ãªããŸããã
numberããŒãæã€ã€ã³ããã¯ã¹ã·ã°ããã£
ã€ã³ããã¯ã¹ã·ã°ããã£ã¯ãæ°å€ããŒã§ã䜿çšã§ããŸããããã¯ããã¹ãŠã®èŠçŽ ã«ç¹å®ã®åã匷å¶ãããé åãŸãã¯é åã©ã€ã¯ãªæ§é ãæ±ãå Žåã«ç¹ã«äŸ¿å©ã§ãã
äŸ3ïŒæ°å€ã®é å
TypeScriptã®é
åã«ã¯æ¢ã«æç¢ºãªåå®çŸ©ïŒäŸïŒnumber[]ïŒããããŸãããé
åã®ããã«æ¯ãèããã®ã®ããªããžã§ã¯ããä»ããŠå®çŸ©ãããäœãã衚çŸããå¿
èŠãããã·ããªãªã«ééãããããããŸããã
interface NumberCollection {
[index: number]: number;
length: number; // Arrays typically have a length property
}
const numbers: NumberCollection = [
10,
20,
30,
40
];
numbers.length = 4; // This is also allowed by the NumberCollection interface
console.log(numbers[0]); // Output: 10
console.log(numbers[2]); // Output: 30
// This would cause a TypeScript error because the value is not a number:
// numbers[1] = 'twenty';
ãã®å Žåã[index: number]: number;ã¯ãnumbersãªããžã§ã¯ãã§æ°å€ã€ã³ããã¯ã¹ã䜿çšããŠã¢ã¯ã»ã¹ãããä»»æã®ããããã£ãnumberãè¿ãããšãèŠå®ããŠããŸããlengthããããã£ããé
åã®ãããªæ§é ãã¢ãã«åããéã«ãã远å ãããŸãã
äŸ4ïŒæ°å€IDããããŒã¿ãžã®ãããã³ã°
ããŒã¿ã¬ã³ãŒããæ°å€IDã§ã¢ã¯ã»ã¹ãããã·ã¹ãã ãèããŠã¿ãŸãããã
interface RecordMap {
[id: number]: { name: string, isActive: boolean };
}
const records: RecordMap = {
101: { name: 'Alpha', isActive: true },
205: { name: 'Beta', isActive: false },
310: { name: 'Gamma', isActive: true }
};
console.log(records[101].name); // Output: Alpha
console.log(records[205].isActive); // Output: false
// This would cause a TypeScript error because the property 'description' is not defined within the value type:
// console.log(records[101].description);
ãã®ã€ã³ããã¯ã¹ã·ã°ããã£ã¯ãrecordsãªããžã§ã¯ãã§æ°å€ããŒãæã€ããããã£ã«ã¢ã¯ã»ã¹ããå Žåããã®å€ã{ name: string, isActive: boolean }ã®åœ¢ç¶ã«æºæ ãããªããžã§ã¯ãã§ããããšãä¿èšŒããŸãã
éèŠãªèæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
ã€ã³ããã¯ã¹ã·ã°ããã£ã¯å€§ããªæè»æ§ãæäŸããŸãããããã€ãã®åŸ®åŠãªç¹ãšæœåšçãªèœãšã穎ã䌎ããŸããããããçè§£ããããšã§ã广çã«äœ¿çšããåå®å šæ§ãç¶æããã®ã«åœ¹ç«ã¡ãŸãã
1. ã€ã³ããã¯ã¹ã·ã°ããã£ã®åå¶çŽ
ã€ã³ããã¯ã¹ã·ã°ããã£ã®ããŒåã¯æ¬¡ã®ããããã§ãã
stringnumbersymbol(ããŸãäžè¬çã§ã¯ãããŸãããããµããŒããããŠããŸã)
ã€ã³ããã¯ã¹åãšããŠnumberã䜿çšãããšãJavaScriptã§ããããã£ã«ã¢ã¯ã»ã¹ããéã«ãTypeScriptã¯å
éšçã«ãããstringã«å€æããŸããããã¯ãJavaScriptã®ãªããžã§ã¯ãããŒãæ¬è³ªçã«æååïŒãŸãã¯SymbolïŒã§ããããã§ãããããã£ãŠãåãåã«stringãšnumberã®äž¡æ¹ã®ã€ã³ããã¯ã¹ã·ã°ããã£ãããå Žåãstringã·ã°ããã£ãåªå
ãããŸãã
ãããèæ ®ããŠãã ããã
interface MixedIndex {
[key: string]: number;
[index: number]: string; // This will be effectively ignored because the string index signature already covers numeric keys.
}
// If you try to assign values:
const mixedExample: MixedIndex = {
'a': 1,
'b': 2
};
// According to the string signature, numeric keys should also have number values.
mixedExample[1] = 3; // This assignment is allowed and '3' is assigned.
// However, if you try to access it as if the number signature was active for value type 'string':
// console.log(mixedExample[1]); // This will output '3', a number, not a string.
// The type of mixedExample[1] is considered 'number' due to the string index signature.
ãã¹ããã©ã¯ãã£ã¹ïŒéåžžã«ç¹å¥ãªçç±ããããæ°å€ã€ã³ããã¯ã¹å€æã®åœ±é¿ãçè§£ããŠããå Žåãé€ãããªããžã§ã¯ãã«ã¯1ã€ã®äž»èŠãªã€ã³ããã¯ã¹ã·ã°ããã£åïŒéåžžã¯stringïŒã䜿çšããã®ãäžè¬çã«æåã§ãã
2. æç€ºçãªããããã£ãšã®çžäºäœçš
ãªããžã§ã¯ããã€ã³ããã¯ã¹ã·ã°ããã£ãšæç€ºçã«å®çŸ©ãããããããã£ã®äž¡æ¹ãæã€å ŽåãTypeScriptã¯æç€ºçãªããããã£ãšåçã«ã¢ã¯ã»ã¹ãããããããã£ã®äž¡æ¹ãæå®ãããåã«æºæ ããããšãä¿èšŒããŸãã
interface Config {
port: number; // Explicit property
[settingName: string]: any; // Index signature allows any type for other settings
}
const serverConfig: Config = {
port: 8080,
timeout: 5000,
host: 'localhost',
protocol: 'http'
};
// 'port' is a number, which is fine.
// 'timeout', 'host', 'protocol' are also allowed because the index signature is 'any'.
// If the index signature were more restrictive:
interface StrictConfig {
port: number;
[settingName: string]: string | number;
}
const strictServerConfig: StrictConfig = {
port: 8080,
timeout: '5s', // Allowed: string
host: 'localhost' // Allowed: string
};
// This would cause an error:
// const invalidConfig: StrictConfig = {
// port: 8080,
// debugMode: true // Error: boolean is not assignable to string | number
// };
ãã¹ããã©ã¯ãã£ã¹ïŒæ¢ç¥ã®ããŒã«ã¯æç€ºçãªããããã£ãå®çŸ©ããæªç¥ã®ããŒãåçãªããŒã«ã¯ã€ã³ããã¯ã¹ã·ã°ããã£ã䜿çšããŠãã ãããåå®å šæ§ãç¶æããããã«ãã€ã³ããã¯ã¹ã·ã°ããã£ã®å€åã¯å¯èœãªéãå ·äœçã«ããŠãã ããã
3. ã€ã³ããã¯ã¹ã·ã°ããã£ã§ã®anyã®äœ¿çš
ã€ã³ããã¯ã¹ã·ã°ããã£ã§å€ã®åãšããŠanyã䜿çšããããšãã§ããŸããïŒäŸïŒ[key: string]: any;ïŒãããã¯æç€ºçã«å®çŸ©ãããŠããªããã¹ãŠã®ããããã£ã®åãã§ãã¯ãæ¬è³ªçã«ç¡å¹ã«ããŸããããã¯äžæçãªè§£æ±ºçãšãªãå¯èœæ§ããããŸãããå¯èœãªéãããå
·äœçãªåã䜿çšããããã«é¿ããã¹ãã§ãã
interface AnyObject {
[key: string]: any;
}
const data: AnyObject = {
name: 'Example',
value: 123,
isActive: true,
config: { setting: 'abc' }
};
console.log(data.name.toUpperCase()); // Works, but TypeScript can't guarantee 'name' is a string.
console.log(data.value.toFixed(2)); // Works, but TypeScript can't guarantee 'value' is a number.
ãã¹ããã©ã¯ãã£ã¹ïŒã€ã³ããã¯ã¹ã·ã°ããã£ã®å€ã«ã¯ãå¯èœãªéãæãå
·äœçãªåãç®æããŠãã ãããããŒã¿ãæ¬åœã«ç°è³ªãªåãæã£ãŠããå Žåã¯ããŠããªã³åïŒäŸïŒstring | number | booleanïŒã䜿çšããããåãåºå¥ããæ¹æ³ãããå Žåã¯èå¥ããããŠããªã³ãæ€èšããŠãã ããã
4. èªã¿åãå°çšã€ã³ããã¯ã¹ã·ã°ããã£
readonly修食åã䜿çšããããšã§ãã€ã³ããã¯ã¹ã·ã°ããã£ãèªã¿åãå°çšã«ããããšãã§ããŸããããã«ããããªããžã§ã¯ããäœæãããåŸã«ããããã£ã誀ã£ãŠå€æŽãããã®ãé²ããŸãã
interface ImmutableSettings {
readonly [key: string]: string;
}
const settings: ImmutableSettings = {
theme: 'dark',
language: 'en',
currency: 'USD'
};
console.log(settings.theme); // Output: dark
// This would cause a TypeScript error:
// settings.theme = 'light';
// You can still define explicit properties with specific types, and the readonly modifier applies to them as well.
interface ReadonlyUser {
readonly id: number;
readonly [key: string]: string;
}
const user: ReadonlyUser = {
id: 123,
username: 'global_dev',
email: 'dev@example.com'
};
// user.id = 456; // Error
// user.username = 'new_user'; // Error
ãŠãŒã¹ã±ãŒã¹ïŒå®è¡æã«å€æŽãããã¹ãã§ã¯ãªãèšå®ãªããžã§ã¯ããç¹ã«äºæãã¬ç¶æ 倿Žãç°ãªãç°å¢éã§ãããã°ãé£ããã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ã«æé©ã§ãã
5. éè€ããã€ã³ããã¯ã¹ã·ã°ããã£
åè¿°ã®éããåãåã®è€æ°ã®ã€ã³ããã¯ã¹ã·ã°ããã£ïŒäŸïŒ2ã€ã®[key: string]: ...ïŒãæã€ããšã¯èš±å¯ãããŠããããã³ã³ãã€ã«æãšã©ãŒã«ãªããŸãã
ãã ããç°ãªãã€ã³ããã¯ã¹åïŒäŸïŒstringãšnumberïŒãæ±ãå ŽåãTypeScriptã«ã¯ç¹å®ã®ã«ãŒã«ããããŸãã
stringåã®ã€ã³ããã¯ã¹ã·ã°ããã£ãšnumberåã®ã€ã³ããã¯ã¹ã·ã°ããã£ãããå Žåããã¹ãŠã®ããããã£ã«ã¯stringã·ã°ããã£ã䜿çšãããŸããããã¯ãJavaScriptã§ã¯æ°å€ããŒãæååã«åŒ·å¶å€æãããããã§ããnumberåã®ã€ã³ããã¯ã¹ã·ã°ããã£ãšstringåã®ã€ã³ããã¯ã¹ã·ã°ããã£ãããå Žåãstringã·ã°ããã£ãåªå ãããŸãã
ãã®æåã¯æ··ä¹±ã®åå ãšãªãããšããããŸããæååããŒãšæ°å€ããŒã§ç°ãªãåäœãæããããå Žåã¯ãããè€éãªåæ§é ããŠããªã³åã䜿çšããå¿ èŠãããããšããããããŸãã
6. ã€ã³ããã¯ã¹ã·ã°ããã£ãšã¡ãœããå®çŸ©
ã€ã³ããã¯ã¹ã·ã°ããã£ã®å€åå ã«ã¡ãœãããçŽæ¥å®çŸ©ããããšã¯ã§ããŸããããã ããã€ã³ããã¯ã¹ã·ã°ããã£ãæã€ã€ã³ã¿ãŒãã§ãŒã¹ã«ã¡ãœãããå®çŸ©ããããšã¯å¯èœã§ãã
interface DataProcessor {
[key: string]: string; // All dynamic properties must be strings
process(): void; // A method
// This would be an error: `processValue: (value: string) => string;` would need to conform to the index signature type.
}
const processor: DataProcessor = {
data1: 'value1',
data2: 'value2',
process: () => {
console.log('Processing data...');
}
};
processor.process();
console.log(processor.data1);
// This would cause an TypeScript error because 'data3' is not a string:
// processor.data3 = 123;
// If you want methods to be part of the dynamic properties, you'd need to include them in the index signature's value type:
interface DynamicObjectWithMethods {
[key: string]: string | (() => void);
}
const dynamicObj: DynamicObjectWithMethods = {
configValue: 'some_setting',
runTask: () => console.log('Task executed!')
};
dynamicObj.runTask();
console.log(typeof dynamicObj.configValue);
ãã¹ããã©ã¯ãã£ã¹ïŒå¯èªæ§ãšä¿å®æ§ãé«ããããã«ãæç¢ºãªã¡ãœãããšåçãªããŒã¿ããããã£ãåé¢ããŠãã ãããã¡ãœãããåçã«è¿œå ããå¿ èŠãããå Žåã¯ãã€ã³ããã¯ã¹ã·ã°ããã£ãé©åãªé¢æ°åã«å¯Ÿå¿ããŠããããšã確èªããŠãã ããã
ã€ã³ããã¯ã¹ã·ã°ããã£ã®ã°ããŒãã«ãªå¿çš
ã°ããŒãã«åãããéçºç°å¢ã§ã¯ãã€ã³ããã¯ã¹ã·ã°ããã£ã¯å€æ§ãªããŒã¿åœ¢åŒãšèŠä»¶ãåŠçããããã«éåžžã«è²Žéã§ãã
1. ç°æåéã®ããŒã¿åŠç
ã·ããªãªïŒã°ããŒãã«ãªeã³ããŒã¹ãã©ãããã©ãŒã ã§ã¯ãå°åã補åã«ããŽãªã«ãã£ãŠç°ãªã補å屿§ã衚瀺ããå¿ èŠããããŸããäŸãã°ãè¡£æåã«ã¯ãsizeãããcolorãããmaterialãããããããããŸããããé»åæ©åšã«ã¯ãvoltageãããpower consumptionãããconnectivityãããããããããŸããã
interface ProductAttributes {
[attributeName: string]: string | number | boolean;
}
const clothingAttributes: ProductAttributes = {
size: 'M',
color: 'Blue',
material: 'Cotton',
isWashable: true
};
const electronicsAttributes: ProductAttributes = {
voltage: 220,
powerConsumption: '50W',
connectivity: 'Wi-Fi, Bluetooth',
hasWarranty: true
};
function displayAttributes(attributes: ProductAttributes) {
for (const key in attributes) {
console.log(`${key}: ${attributes[key]}`);
}
}
displayAttributes(clothingAttributes);
displayAttributes(electronicsAttributes);
ããã§ãåºç¯ãªstring | number | booleanãŠããªã³åãæã€ProductAttributesã¯ãç°ãªã補åã¿ã€ããå°åéã§æè»æ§ãæäŸããä»»æã®å±æ§ããŒãå
±éã®å€åã®ã»ããã«ãããã³ã°ãããããšãä¿èšŒããŸãã
2. å€é貚ããã³å€èšèªãµããŒã
ã·ããªãªïŒéèã¢ããªã±ãŒã·ã§ã³ã¯ãè€æ°ã®é貚ã§ã®çºæ¿ã¬ãŒããäŸ¡æ Œæ å ±ãããã³è€æ°ã®èšèªã§ã®ãŠãŒã¶ãŒåãã¡ãã»ãŒãžãä¿åããå¿ èŠããããŸãããããã¯ãã¹ããããã€ã³ããã¯ã¹ã·ã°ããã£ã®å žåçãªãŠãŒã¹ã±ãŒã¹ã§ãã
interface ExchangeRates {
[currencyCode: string]: number;
}
interface CurrencyData {
base: string;
rates: ExchangeRates;
}
interface LocalizedMessages {
[locale: string]: { [messageKey: string]: string };
}
const usdData: CurrencyData = {
base: 'USD',
rates: {
EUR: 0.93,
GBP: 0.79,
JPY: 157.38
}
};
const frenchMessages: LocalizedMessages = {
'fr': {
welcome: 'Bienvenue',
goodbye: 'Au revoir'
}
};
console.log(`1 USD = ${usdData.rates.EUR} EUR`);
console.log(frenchMessages['fr'].welcome);
ãããã®æ§é ã¯ã倿§ãªåœéçãŠãŒã¶ãŒããŒã¹ã«ãµãŒãã¹ãæäŸããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããäžã§äžå¯æ¬ ã§ãããããŒã¿ãæ£ãã衚çŸãããããŒã«ã©ã€ãºãããããšãä¿èšŒããŸãã
3. åçãªAPIçµ±å
ã·ããªãªïŒãã£ãŒã«ããåçã«å ¬éããå¯èœæ§ã®ãããµãŒãããŒãã£APIãšã®çµ±åãäŸãã°ãCRMã·ã¹ãã ã§ã¯é£çµ¡å ã¬ã³ãŒãã«ã«ã¹ã¿ã ãã£ãŒã«ãã远å ã§ããå Žåãããããã£ãŒã«ãåãšãã®å€ã®åãç°ãªãããšããããŸãã
interface CustomContactFields {
[fieldName: string]: string | number | boolean | null;
}
interface ContactRecord {
id: number;
name: string;
email: string;
customFields: CustomContactFields;
}
const user1: ContactRecord = {
id: 1,
name: 'Alice',
email: 'alice@example.com',
customFields: {
leadSource: 'Webinar',
accountTier: 2,
isVIP: true,
lastContacted: null
}
};
function getCustomField(record: ContactRecord, fieldName: string): string | number | boolean | null {
return record.customFields[fieldName];
}
console.log(`Lead Source: ${getCustomField(user1, 'leadSource')}`);
console.log(`Account Tier: ${getCustomField(user1, 'accountTier')}`);
ããã«ãããContactRecordåã¯ãå¯èœãªãã¹ãŠã®ãã£ãŒã«ããäºåã«å®çŸ©ããããšãªããå¹
åºãã«ã¹ã¿ã ããŒã¿ã«å¯Ÿå¿ã§ããååãªæè»æ§ãæã€ããšãã§ããŸãã
çµè«
TypeScriptã®ã€ã³ããã¯ã¹ã·ã°ããã£ã¯ãåçã§äºæž¬äžå¯èœãªããããã£åã«å¯Ÿå¿ããåå®çŸ©ãäœæããããã®åŒ·åãªã¡ã«ããºã ã§ãããããã¯ãå€éšããŒã¿ãšããåãããåœéåãåŠçãããŸãã¯èšå®ã管çãããå ç¢ã§åå®å šãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«äžå¯æ¬ ã§ãã
æååããã³æ°å€ããŒã§ã€ã³ããã¯ã¹ã·ã°ããã£ã䜿çšããæ¹æ³ãçè§£ããæç€ºçãªããããã£ãšã®çžäºäœçšãèæ
®ããanyãããå
·äœçãªåãæå®ããããé©åãªå Žæã§readonlyãæŽ»çšããããããªã©ã®ãã¹ããã©ã¯ãã£ã¹ãé©çšããããšã§ãéçºè
ã¯TypeScriptã³ãŒãããŒã¹ã®æè»æ§ãšä¿å®æ§ã倧å¹
ã«åäžãããããšãã§ããŸãã
ããŒã¿æ§é ãéåžžã«å€æ§ã§ããã°ããŒãã«ãªæèã«ãããŠãã€ã³ããã¯ã¹ã·ã°ããã£ã¯ãéçºè ãå ç¢ã§ããã ãã§ãªãã倿§ãªåœéçãªãŒãã£ãšã³ã¹ã®ããŒãºã«é©å¿ã§ããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããšãå¯èœã«ããŸããã€ã³ããã¯ã¹ã·ã°ããã£ãåãå ¥ããTypeScriptãããžã§ã¯ãã§æ°ããªã¬ãã«ã®åçã¿ã€ãã³ã°ãè§£ãæŸã¡ãŸãããã