๐คทโโ๏ธ ๊ฐ๋ ๊ณต๋ถ: 3. Typescript๊ฐ ๋ญ๊น? (2) ( interface, type alias, enum, Generic, Utility Types(Pick, Omit, Exclude)...)
Type interface
ํ์ ์คํฌ๋ฆฝํธ์์ ์ธํฐํ์ด์ค๋ ํ์ ์ด๋ฆ ์ง์ ์ ์ญํ ์ ๋ถ์ฌํ๊ณ , ์ฝ๋ ์์ด๋ ๋ฐ์์ ๊ณ์ฝ์ ์ ์ํ๋ ๊ฐ๋ ฅํ ๋ฐฉ๋ฒ์ด๋ค.
๊ณต์๋ฌธ์์ ์์ ๋ฅผ ํตํด ์ธํฐํ์ด์ค์ ์ญํ ์ ํ์ธํ ์ ์๋ค.
-
SquareConfig์ ์ ์๋์ง ์๋ clor ์์ฑ์ ์ฌ์ฉํ๋ฉด ์๋ฌ๋ฅผ ๋ฐ์์ํจ๋ค.
-
?์ด ๋ถ์๊ฒฝ์ฐ optional properties๋ก ํ์์ ์ผ๋ก ๋๊ฒจ์ฃผ์ง ์์๋ ๋๋ ์์ฑ์ ๋งํ๋ค.
readonly ์์ฑ?
๋ณ์(variables)๊ฐ ๋ณํ์ง ์๋(์ฌํ ๋น ๋ถ๊ฐ๋ฅ) ์์๋ฉด const ์ฌ์ฉํ๋ ๊ฒ์ฒ๋ผ readonly๋ ๋ณํ์ง ์๊ณ ์ค์ง ์ฝ๊ธฐ๋ง ๊ฐ๋ฅํ ์์ฑ(properties)์ด๋ค
Function Types
์ด๋ ๊ฒ ํจ์ ์ธํฐํ์ด์ค ์ง์ ๊ฐ๋ฅ(์ธ์๋ช ์ ๊ฐ์ง ์์๋ ๋จ)
interface SearchFunc {
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function (source: string, subString: string) {
let result = source.search(subString);
return result > -1;
};
Class Type๋ ์ง์ ๊ฐ๋ฅ
interface ClockInterface {
currentTime: Date;
setTime(d: Date): void;
}
class Clock implements ClockInterface {
currentTime: Date = new Date();
setTime(d: Date) {
this.currentTime = d;
}
constructor(h: number, m: number) {}
}
Extends๋ก ์ธํฐํ์ด์ค ํ์ฅ ๊ฐ๋ฅ
interface Shape {
color: string;
}
interface PenStroke {
penWidth: number;
}
interface Square extends Shape, PenStroke {
sideLength: number;
}
let square = {} as Square;
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;
Type alias
alias๋ ๊ฐ๋ช ์ด๋ผ๋ ๋ป, ์ฆ type alias๋ ํ์ ์ ๋ ๋ค๋ฅธ ์ด๋ฆ์ ๋ถ์ฌํ๋ ๊ฒ์ด๋ค.
interface์ ๋น์ทํ์ง๋ง primitives, unions, tuples, ๋ค๋ฅธ ํ์ ๋ค๋ ์ด๋ฆ์ ์ง์ ์ ์๋ค(union: number|string ๊ฐ์๊ฑฐ)
aliasingํ๋ค๋ ๊ฒ์ ์ฌ์ค์ ์๋ก์ด ํ์ ์ ๋ง๋๋ ๊ฒ์ด ์๋๋ผ ์กด์ฌํ๋ ํด๋น ํ์ ์ ์๋ก์ด ์ด๋ฆ์ ์ง๋๊ฒ์ด๋ค.
interface์ฒ๋ผ ์ ๋๋ฆญํ๊ฒ ๋ง๋ค ์ ์๋ค: ๋ค์๊ณผ ๊ฐ์ด T๋ผ๋ type ํ๋ผ๋ฏธํฐ๋ฅผ ์ถ๊ฐํ ์ ์์
type Container<T> = { value: T };
type Tree<T> = {
value: T;
left?: Tree<T>;
right?: Tree<T>;
};
interface vs type?
์๋ ๋๊ฐ ๋๊ฐ์๊ฑฐ ์๋๋ โ ๋ฏธ๋ฌํ ์ฐจ์ด๊ฐ ์์ง๋ง ๋๋ถ๋ถ์ ์ํฉ์์ ๊ฑฐ์ ๋น์ทํ๋ฏ๋ก ๊ทธ๋ฅ ์ฐ๊ณ ์ถ์๊ฑฐ ์ฐ๋ฉด๋๋ค๊ณ ํ๋ค(https://microsoft.github.io/TypeScript-New-Handbook/everything/#interface-vs-alias)
์ ๋ธ๋ก๊ทธ์ ๋ฐ๋ฅด๋ฉด ๋ณดํต interface๋ ๊ณต์ฉ api ์์ฑ์ ์์ฃผ ์ฌ์ฉ๋๋ค๊ณ ํ๋ค. (์ฐ๋ฆฌ ํ์ฌ์์๋ ๋๋น ๋ชจ๋ธ๊ณผ ๊ด๋ จ๋ ๊ณต์ฉ Object ํ์ ์ ์ธํฐํ์ด์ค๋ก ์ง์ ํ๊ณ ์๋ค. (User, Item, Post ๋ฑ))
๐ interface๋ ํ์ฅ ๊ฐ๋ฅ(์์ฑ์ถ๊ฐ ๊ฐ๋ฅ), type์ ์ค๋ณต๋๋ ํ์ ์ ์ธ ๋ถ๊ฐ๋ฅ
Enums
์ด๊ฑฐํ์ ๊ด๋ จ ๊ฐ ๋ชจ์์ ๊ตฌ์ฑํ๋ ๋ฐฉ๋ฒ์ด๋ค. c, java์ ๊ฐ์ ๋ง์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ค์ enum์ ๋ฐ์ดํฐ ํ์ ์ผ๋ก ํฌํจํ๊ณ ์์ง๋ง ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ทธ๋ ์ง ์๋ค. ๋์ , ํ์ ์คํฌ๋ฆฝ์ค๋ฅผ ํตํด ์ด๊ฑฐํ์ ์ ์ธํ ์์๋ค.
enum CardSuit {
Clubs,
Diamonds,
Hearts,
Spades,
}
// Sample usage
var card = CardSuit.Clubs
// Safety
card = 'not a member of card suit' // Error : `CardSuit`์ด ์ด๊ฑฐํ์ด๊ธฐ ๋๋ฌธ์ ๋ฌธ์์ด์ ํ ๋นํ ์ ์์ต๋๋ค
์ด๊ฑฐํ์ด ์กด์ฌํ๋ ์ด์ ๋ ๋ ์ง๊ด์ ์ธ ์ด๋ฆ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ตฌ๋ถํ๊ธฐ ์ํด์์ด๋ค
ํ์ ์คํฌ๋ฆฝํธ ์ด๊ฑฐํ์ ์ซ์๊ฐ ๊ธฐ๋ณธ์ด๊ณ 0๋ถํฐ ์์ํ๋ค
enum Color {
Red, // 0
Green, // 1
Blue, // 2
}
var col = Color.Red
col = 0 // Effectively same as Color.Red
Generics
Generic์ ์ฃผ๋ ๋๊ธฐ: ๋ฉค๋ฒ ๊ฐ์ ์๋ฏธ ์๋ ํ์ ์ ์ฝ์ ๋๊ธฐ ์ํด์
ํ์ ์ ์ฝ์ ๋ ์ ์๋ ๋ฉค๋ฒ:
- Class ์ธ์คํด์ค ๋ฉค๋ฒ
- Class ๋ฉ์๋
- ํจ์ ์ธ์
- ํจ์ ๋ฆฌํด ๊ฐ
์ ๋๋ฆญ ex)
๋ค์์ ๊ทธ๋ฅ ๊ฐ์๊ธฐ ์๊ฐ๋ ํจ์๋ก, ์ ๋ ฅ๋ ๋ฐฐ์ด์ ๊ธธ์ด์ 2๋ฐฐ์ ์๋ฅผ ๋ฐํํ๋ ํจ์์ด๋ค.
์๋์ ๊ฐ์ด ์ ๋๋ฆญ์ ์ฌ์ฉํ์ง ์์ผ๋ฉด ํ์ ์ด ๋ค๋ฅธ ๊ฒฝ์ฐ ์ค๋ณต๋ ๋ก์ง์ ๊ฐ๋ ํจ์๋ฅผ ์ฌ๋ฌ๋ฒ ์ ์ธํด์ผํ๋ค. ํ์ง๋ง ์ ๋๋ฆญ์ ์ฌ์ฉํจ์ผ๋ก์จ ๋ก์ง์ ์ฌ์ฌ์ฉํ ์ ์๋ค. (ํ์ ์ ์ธ์๋ก ๋๊ธฐ๋ ๊ฐ๋ ์ผ๋ก ์ดํดํ ์๋ ์์ ๋ฏ ์ถ๋ค.)
function doubledLengthOfNumberArray(arg: number[]): number {
return arg.length * 2;
}
function doubledLengthOfStringArray(arg: string[]): number {
return arg.length * 2;
}
// --> ์ ๋๋ฆญ ์ฌ์ฉ
function doubledLengthOfArray<T>(arg: T[]): number {
return arg.length * 2;
}
const result1 = doubledLength<string>(["a","b","c"]); // 6
const result2 = doubledLength<string>([1,3,5,7,9]) // 10
Utility Types
ํ์ ์คํฌ๋ฆฝํธ๋ ๊ณต๋์ types๋ฅผ ๋ณํํ ์ ์๊ฒ ํ๋ Utility Types๋ฅผ ์ ๊ณตํ๋ค.
Partial<Type>
Required<Type>
Readonly<Type>
Record<Keys, Type>
Pick<Type, Keys>
Omit<Type, Keys>
โ๏ธ์ฃผ์ํ ์ : ์ค์ ๋ก ๊ฐ์ด ์์ด์ง๋๊ฒ ์๋๋ผ ํ์ ์ด ๊ทธ๋ ๋ค๋๊ฑฐ (์์์ฝ๋..ใฑ)Exclude<Type, ExcludedUnion>
์ด์ธ์๋ Extract, NonNullable, Parameters, ConstructorParameters, ReturnType ๋ฑ์ ๋ค์ํ Utility Type์ด ์กด์ฌํ๋ค.
๊ณต์๋ฌธ์ ์ฐธ๊ณ : https://www.typescriptlang.org/docs/handbook/utility-types.html
์ฐธ๊ณ ์๋ฃ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐คทโโ๏ธ ๊ฐ๋ ๊ณต๋ถ: 3. Typescript๊ฐ ๋ญ๊น? (2) ( interface, type alias, enum, Generic, Utility Types(Pick, Omit, Exclude)...)), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@syoung125/๊ฐ๋ ๊ณต๋ถ-3.-Typescript๊ฐ-๋ญ๊น-2-interface-type-alias-enum-Generic-Utility-TypesPick-Omit-Exclude์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค