[Typescript] 복습 - (2)

Typescript 복습 - (2) 타입스크립트 문법 복습

Interface

: 사실 여태까지 Interface 보다는 Type을 주로 써와서

type SomeType = {
	name : string;
}

즉, 위와 같이 써도 interface와 같은 역할을 type이 해주기 때문에 주로 type을 썼었다. 하지만, 인터페이스도 사실 같은 기능을 하는 것이기에 알아두면 분명 쓸데가 있을..까(이건 팀마다 혹은 개인마다 취향의 문제일정도로 유사하기에). 어쨌든, Interface는 type 중에 object 타입이 있는데, 이 타입은 사실상 모든 객체 형태를 용인한다. 즉,

const yongkisInform:object = {
	name:'yongki',
    age:30
}

const developerYongkinisInform:object = {
	name:'yongkini',
    lang : ['js', 'ts']
}

위와 같은 정보들이 있을 때 두 정보의 타입은 동일하지만, 안의 내용물은(key) 다르다. 이 때, 위에를 예시로 생각해보면 개발자 정보를 담는 객체와 그냥 인간(?) yongkini의 정보를 담는 틀은, 달리 말해 타입을 다르게 하려면 어떻게할까?. 그 때 타입을 지정해주기 위해서 나온게 interface라고 생각하면 된다.

interface HumanInform{
	name : string
    age : number
}

interface DeveloperInform{
	name : string
    lang : string[]
}

위와 같이 interface를 써서 타입을 분리시키면 좀더 좋을 것 같지 않은가?!. 이 때, 선택 속성을 줘서 일종의 여지를 줄 수 있다. 예를 들어,

interface DeveloperInform{
	name : string
    lang : string[]
    companies?: string[]
}

위에 처럼 일했던 회사 목록을 받는 key 값으로 companies를 뒀지만, 선택속성 연산자인 ?를 써서 써도되고 안써도 되도록 할 수 있다. 마지막으로 익명 인터페이스도 있는데, 말그대로 타입명을 따로 생성하지 않은, 함수에 비유해보면, 즉시 실행함수와 같다. 주로 함수에서 한번 쓰는 변수 등에 쓴다(재활용 가능성이 없는 부분의 타입 정의).

타입 단언

: 보통 타입 단언을 쓸 때는 특정 변수 as 특정 타입 형태로 자주 썼는데 다음과 같은 형태로도 쓸 수 있음을 알게 됐다.

type INameable = {
	name : string;
}

const obj:object = {name: 'Jack'};

const name1 = (<INameable>obj).name;
const name2 = (obj as INameable).name;

함수 시그니처

: 함수에도 타입이 있는데 이를 함수 시그니처라고 한다.

const func: (name:string) => void = (name) => {
    console.log(`Hi, I'm ${name}!`);
}

func('yongki');

위에서 func의 타입 주석으로 달아놓은

(name:string) => void

이 부분이 함수 시그니처 이다. 이 때, 함수 시그니처의 매개변수에서도 선택 속성을 써줄 수 있다는걸 알아두자(물론 함수 시그니처를 안써주는 경우 함수를 정의할 때도 선택 속성을 쓸 수 있다).

const func: (name? :string) => void = (name) => {
    console.log(`Hi, I'm ${name}!`);
}

Type 키워드(타입 별칭 = type alias)

type 새로운 타입 = 기존 타입

위와 같이 쓸 수 있다. 그래서 type alias라고도 불리는 Type 키워드는 일종의 타입을 변수에 선언해서 쓰는 것과 같다. 예를 들어, 위에서 보여줬던 함수 시그니처를 쓸 때마다 저렇게 써줘야한다면 불편할 것인데, 타입 별칭을 쓰면 아래처럼 쓸 수 있다.

type FunctionSignature = (name:string) => void;
const funcA: FunctionSignature = (name) => {
    console.log(`Hi, I'm ${name}!`);
}

const funcM: FunctionSignature = (name) => {
    console.log(`${name} took my phone!`);
}