[스나이퍼팩토리] 2일차(1)_타입 오퍼레이터, Enum, 제네릭
1. 타입 오퍼레이터
- 유니언 타입 (|) -> OR
- 인터섹션 타입 (&) -> AND
유니언 타입
유니언 타입은 연결된 타입 중 1개만 만족하면 된다.
const returnValue=(value:string|number|boolean)=> value;
console.log(returnValue("A"));
console.log(returnValue(10));
console.log(returnValue(true));
함수 오버로드.
유니언 타입 사용 시, 함수 내부에서 유니온 타입의 매개 변수를 사용하면 타입을 좁혀주는 과정이 필요하다. 많은 경우의 수가 발생하여 오류가 발생할 수 있기 때문이다. 이때, typeof, instanceof 를 사용해서 좁혀준다.
const add=(n1:number|string, n2:number|string):number|string =>{
if(typeof n1==="number"&&typeof n2==="number") return n1+n2;
else if(typeof n1==="string"&&typeof n2==="string") return n1+n2;
throw new Error("Parameter Not Valid");
}
const res1=add(10,20);
const res2=add("A","B");
console.log(res1,res2);
이때, 함수 오버로드란 유니온 타입으로 묶여진 함수의 타입을 정확하게 구분하고 싶을 때 사용한다.
// 오버로드 시그니처
function add1(n1: number, n2: number): number;
function add1(n1: string, n2: string): string;
// 실제 구현
function add1(n1: number | string, n2: number | string): number | string {
if (typeof n1 === "number" && typeof n2 === "number") {
return n1 + n2;
} else if (typeof n1 === "string" && typeof n2 === "string") {
return n1 + n2;
}
throw new Error("Parameters are not valid.");
}
인터섹션 타입
인터섹션 타입은 2개 이상의 타입을 결합하며, 연결된 타입을 모두 만족해야 한다.
let user1:{name:string}&{age:number}&{gender?:string}={
name:"Lynn",
age:22,
};
타입 추론
타입 추론이란 명시적인 타입 표기가 없을 때, 타입 정보를 자동으로 결정해준다.
변수를 선언하거나 초기화할 때, 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 발생한다.
let person = {
name: "Alice",
age: 30,
}; // person은 { name: string; age: number }로 추론됨
console.log(person.name);
2. 타입 별칭, 인터페이스
타입 별칭(type alias)
타입 별칭은 type 키워드를 사용해서 타입을 지정하는 방식이다.
//타입에 별칭을 지어주는 것
//별칭-> 어떤 특정한 사물이나 물건에 대체할만한 이름을 붙여주는 것
//예시1
type Point ={
x:number;
y:number;
[key:string]:number;
}
const point:Point={
x:10,
y:20,
};
//예시2
type Add={
(n1:number, n2:number):number;
};
const add: Add=(n1,n2)=>n1+n2;
인터페이스
인터페이스는 개체 타입을 지정할 때 사용한다.
- 기본형
interface 타입명{
속성:타입,
...
}
- 활용
interface User{
name:string;
age:number;
}
const user1:User={
name:"Lynn",
age:22
};
- 병합
병합은 타입 별칭에서는 사용할 수 없다.
but, 협업 시, 인터페이스 이름이 중복되어 자동으로 병합되는 경우가 있으면 오류가 발생할 수 있으므로 주의해야 한다.
interface User{
name:string;
age:number;
};
interface User{
address:string;
};
interface User{
gender?:string;
};
const person:User={
name:"Lynn",
age:22,
address: "fdsfa"
};
- 상속
상속은 타입 별칭에서는 사용할 수 없다.
interface User{
name:string;
age:number;
}
interface Developer extends User{
//개발자 -> 사람
skill:string;
}
let dev1:Developer={
name:"Lynn",
age:22,
skill:"React",
};
3. Enum
타입스크립트의 enum(이넘)은 열거형을 정의하는 데 사용되는 데이터 타입이다.
자신이 자주 사용하는 값을 타입으로 만들어 놓으면, 자동 완성 기능을 지원한다.
숫자형 열거
열거형의 각 멤버는 자동으로 0부터 시작하는 숫자 값을 갖는다.
만약 처음 값을 직접 지정하면, 그 다음 값들은 자동으로 값이 증가된다.
enum Direction{
Up=20, //0
Down, //+1
Left, //+1
Right, //+1
}
console.log(Direction.Up); //20
console.log(Direction.Down); //21
console.log(Direction.Left); //22
console.log(Direction.Right); //23
문자형 열거
문자열 열거형은 각 열거형 멤버가 문자열 값을 가지도록 정의한다.
enum BenzColor{
Red= "red",
White="white",
Black="black"
}
type Benz={
name:string;
color:BenzColor;
};
const car1:Benz={
name:"dfd",
color:BenzColor.Red
}
console.log(car1.color);
4. 제네릭
제네릭은 타입을 미리 지정하지 않고 사용하는 시점에 타입을 정의해서 쓸 수 있는 문법이다.
//함수+제네릭<T> -> 관례상 Type의 약자인 T 사용, but 다른 문자도 가능
function returnValue<T>(arr:T[]):T{
return arr[0];
};
const res1=returnValue<number>([1,2,3]); //T->number
const res2=returnValue<string>(["a","b","c"]); //<string>을 안 써도 타입 추론이 자동으로 됨
//다른 형태
const returnValue1=<T>(arr:T[]):T=>{
return arr[0];
};
returnValue<number>([1,2,3]);
returnValue<string>(["a","b","c"]);
- 인터페이스 활용
인터페이스와 타입 별칭에도 사용 가능하다.
interface Mobile<T,U>{
name:string;
color:string;
option:T;
etc?:U;
};
let mobile1:Mobile<string,number>={
name:"Galaxy",
color:"white",
option:"없음",
etc:0
};
type Option={bell:string};
let mobile2:Mobile<Option,string>={
name:"Galaxy",
color:"white",
option:{
bell:"3개월",
}
}
※ 연습 문제
Q. 배열을 입력받아 배열의 요소들을 역순으로 반환하는 제네릭 함수 작성하기
// reverse 함수 구현
// 사용 예제
const numArray = [1, 2, 3];
const reversedNumArray = reverse(numArray); // [3, 2, 1]
const strArray = ["a", "b", "c"];
const reversedStrArray = reverse(strArray); // ["c", "b", "a"]
A.
// reverse 함수 구현
function reverse<T>(arr: T[]): T[] {
return arr.slice().reverse();
}
// 사용 예제
const numArray = [1, 2, 3];
const reversedNumArray = reverse<number>(numArray); // [3, 2, 1]
const strArray = ["a", "b", "c"];
const reversedStrArray = reverse<string>(strArray); // ["c", "b", "a"]
출처 : [수코딩(https://www.sucoding.kr)]