📘
【Typescript】メモ✍
基本的な型
const word: string = "hello";
const bool: boolean = true;
type Name = {
firstName: string;
lastName: string;
}
const userInfo: Name = {
firstName: "foo";
lastName: "bar";
}
const myFunc = (x: number, y: number): string => {
const result = x + y;
return result.toString();
}
Intersection Types
type GROUP = {
groupName: "string";
}
type PROFILE = {
name: string;
position: string;
}
type MEMBER = GROUP & PROFILE;
const memberA: MEMBER = {
groupName: 'ITZY',
name: 'RYUJIN',
position: 'main rapper'
}
Union Types
let value: boolean | number;
value = true;
value = 10;
value = "hello" // error
let arrayUni: (number | string)[];
array1 = [0, 1, 2, "hello"];
array1 = [0, 1, 2, true]; // error
Literal Types
let member: 'Jennie' | 'Rose' | 'Lisa' | 'Jisoo' = 'Jennie';
member = 'black pink' // error
typeof
let message: string = 'Hi';
let message2: typeof msg;
msg2 = 'hello';
msg2 = 1 // error
let artist = {name: 'Aimer'};
let album: typeof artist = {name: 'Walpurgis'};
keyof
type KEYS = {
primary: string;
secondary: string;
};
let key: keyof KEYS;
key = 'primary' // or 'secondary'
// typeof + keyof
const JPOP = {
utada: 'One Last Kiss';
milet: 'checkmate';
}
let keySports: keyof typeof JPOP;
keySports = 'utada'; // or 'milet'
enum
enum OS {
Windows,
Mac,
Linux,
}
interface PC {
id: number;
OSType: OS;
}
const PC1: PC = {
id: 1,
PsType: OS.Windows,
};
const PC2: PC = {
id: 2,
PsType: OS.Mac,
};
型の互換性
const comp1 = 'test';
let comp2: string = comp1;
let comp3: string = 'test';
let comp4: 'test' = comp3; // error
let functComp1 = (x: number) => {}
let functComp2 = (x: string) => {}
functComp1 = functComp2 // error
functComp2 = functComp1 // error
Generics ジェネリックス
interface GEN<T> {
item: T;
}
const gen0: GEN<string> = {item: 'hello'}
const gen1: GEN = {item: 'hello'} // error
const gen2: GEN<number> = {item: 100}
interface GEN1<T = string> {
item: T;
}
const gen3: GEN1 = {item: 'hello'}
interface GEN2<T extends string | number> {
item: T
}
const gen4: GEN2<string> = {item: 'hello'}
const gen5: GEN2<number> = {item: 100}
const gen6: GEN2<boolean> = {item: true} // error
function funcGen<T>(props: T) {
return {item: props}
}
const gen7 = funcGen('test');
const gen8 = funcGen<string | null>(null);
function funcGen1<T extends string | null> (props: T) {
return {value: props}
}
const gen9 = funcGen1('hello')
const gen10 = funcGen1(100) // error
interface Props {
price: number;
}
function funcGen3<T extends Props>(props: T) {
return {value: props}
}
const gen11 = funcGen3({price: 1000})
// arrow function
const funcGen4 = <T extends Props>(props: T) => {
return {value: props}
}
Discussion