๐คทโ๏ธ ํ์ ์คํฌ๋ฆฝํธ keyof๋?
์๋ฐ์คํฌ๋ฆฝํธ์์๋ ์กด์ฌํ์ง ์๋ keyof ์ฐ์ฐ์์ ๋๋ค.
ํ์ ์คํฌ๋ฆฝํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ํผ์ ์ด๋ฉฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ปดํ์ผํด์ ์คํํฉ๋๋ค.
ํ์ ์คํฌ๋ฆฝํธ์์ keyof ํ์ ์ฐ์ฐ์๋ ์ฃผ์ด์ง ๊ฐ์ฒด์ ๋ชจ๋ ์์ฑ์ key๊ฐ์ ์ ๋์จ ํ์ ์ผ๋ก ๋ฐํํฉ๋๋ค.
์ด keyof ์ฐ์ฐ์๋ฅผ ํ์ฉํ๋ฉด ๋ ์์ ํ๊ณ ๊ฐ๋ ฅํ ์ฝ๋๋ก ์ ์ง๋ณด์ํ ์ ์์ต๋๋ค.
[ํ์ ์คํฌ๋ฆฝํธ] ํ์ ์คํฌ๋ฆฝํธ ๊ฐ๋ ๊ณผ ์ค๋ฌด์ ์ ์ฉํ Type Narrowing ๊ธฐ๋ฒ
https://cometruedream.tistory.com/265
๐คทโ๏ธ keyof ๊ธฐ๋ณธ ๊ฐ๋ ?
1. keyof ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
interface Person {
name: string;
age: number;
address: string;
}
type PersonKeys = keyof Person; // "name" | "age" | "address"
Person ๊ฐ์ฒด ํ์ ์ ์์ฑ name, age, address๋ฅผ ์ ๋์จ ํ์ ์ผ๋ก ๋ง๋ค์ด์ PersonKeys ํ์ ์ ์ ์ฅํฉ๋๋ค.
PersonKeys์ Person ๊ฐ์ฒด ํ์ ์ ์์ฑ์ ์ ๋์จ ํ์ "name" | "age" | "address" ์ ์๋ฉ๋๋ค.
2. ๊ฐ์ฒด์ ์์ฑ์ ์ ๋์จ ํ์ ์ผ๋ก ๋ณํ
interface Car {
make: string;
model: string;
year: number;
}
type CarKeys = keyof Car; // "make" | "model" | "year"
const key: CarKeys = "model"; // ์ ํจํจ
const invalidKey: CarKeys = "color";
// ์ค๋ฅ: "color"๋ "make" | "model" | "year" ์ค ํ๋๊ฐ ์๋๋๋ค.
์ ์์ ์ฒ๋ผ Carkeys๋ keyof ์ฐ์ฐ์๋ฅผ ํ์ฉํด์ Car ๊ฐ์ฒด ์์ฑ์ “make”, “model”, “year” ์ ๋์จ ํ์ ์ผ๋ก ๋ณํํด์ key ํ์ ์ผ๋ก ์ ์ํฉ๋๋ค.
“model” ์ ๋์จํ์ ์์ฑ์ด๊ธฐ ๋๋ฌธ์ ์ค๋ฅ๊ฐ ๋ฐ์๋์ง ์์ต๋๋ค.
ํ์ง๋ง “color” ์ ๋์จํ์ ์์ฑ์ด ์๋๊ธฐ ๋๋ฌธ์ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
3. ๊ฐ์ฒด ์์ฑ key์ ํ์ฉํ ํจ์
interface User {
username: string;
email: string;
password: string;
}
function getProperty<T>(obj: T, key: keyof T): T[keyof T] {
return obj[key];
}
const user: User = {
username: 'john_doe',
email: 'john@example.com',
password: 'secret',
};
const username = getProperty(user, 'username'); // "john_doe"
const email = getProperty(user, 'email'); // "john@example.com"
const invalid = getProperty(user, 'nonexistent');
// ์ค๋ฅ: 'nonexistent'๋ 'username' | 'email' | 'password' ์ค ํ๋๊ฐ ์๋๋๋ค.
์ด ํจ์๋ ๊ฐ์ฒด์ ์์ฑ key์ ๋ฐ์ ํด๋น ๊ฐ์ฒด์ ์์ฑ ๊ฐ์ ๋ฐํํฉ๋๋ค.
๐คทโ๏ธ keyof ์ฐ์ฌ์๋ฅผ ์ฌ์ฉํ๋ ์ด์
- keyof๋ ๊ฐ์ฒด ํ์ ์ ๋ชจ๋ ์์ฑ ์ด๋ฆ์ ์ ๋์จ ํ์ ์ผ๋ก ์ถ์ถํ๋ ์ฐ์ฐ์์ ๋๋ค.
- keyof๋ฅผ ํตํด ํ์ ์์ ์ฑ์ ๋์ด๊ณ ๋ ๊ฐ๋ ฅํ๊ฒ ์ฝ๋๋ฅผ ๊ด๋ฆฌํ๊ณ , ์ฝ๋์์ ์์ฑ ์ด๋ฆ์ ๋์ ์ผ๋ก ์ฌ์ฉํ ์ ์๊ฒ ๋ฉ๋๋ค.
- keyof๋ฅผ ํ์ฉํ๋ฉด ๊ฐ์ฒด์ ์์ฑ ์ด๋ฆ์ ๊ธฐ๋ฐ์ผ๋ก ๋ ์์ ํ ํจ์๋ ํ์ ์ ์ ์ํ ์ ์์ต๋๋ค.
๐คทโ๏ธ ๋ง์ง๋ง์ผ๋ก
ํ์ ์คํฌ๋ฆฝํธ ์ฌ์ฉํ๋ค๋ณด๋ฉด ๋ค์ํ ๊ฐ์ฒด ์์ฑ์ ํ์ ์ ์ธํ ํด์ผ ๋ ๋๊ฐ ์์ต๋๋ค.
keyof ์ฐ์ฐ์๋ฅผ ํ์ฉํด์ ๊ฐ์ฒด ์์ฑ์ ์ ๋์จ ํ์ ์ผ๋ก ๋ณํํด์ ํ์ ์์ ์ฑ๊ณผ ๋ ๊ฐ๋ ฅํ ์ฝ๋๋ก ์ ์ง๋ณด์ ํ ์ ์์ต๋๋ค.
keyof ์ฐ์ฐ์๋ ํ์ ์คํฌ๋ฆฝํธ์์ ํ ๋ฒ์ฏค์ ๋ณผ ์ ์๋ ํ์ ์ฐ์ฐ์์ด๋ฉฐ keyof๊ฐ ์ด๋ค ์ฉ๋๋ก ์ฌ์ฉํ๊ณ ์ ์ํ๋์ง ๊ถ๊ธํ๊ฑฐ๋ ์ ๋ชจ๋ฅผ ์ ์์ต๋๋ค.
์ด ๊ธ์ ํตํด์ ํ์ ์คํฌ๋ฆฝํธ์ keyof ์ฐ์ฐ์๋ฅผ ์ดํดํ๊ณ ์ ํ์ฉํ ์ ์์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค.
์ฌ๋ฐ๋ ์ค๋์ ๋ ๋ณ ์ด์ธ ๋ณด๊ณ ๊ฐ์ธ์!
https://cometruedream.tistory.com/247
https://cometruedream.tistory.com/243
https://cometruedream.tistory.com/242
https://cometruedream.tistory.com/241
https://cometruedream.tistory.com/244