타입스크립트 문법 정리
1) 넓은타입 & 좁은타입
좁 -> 넓 타입 대입은 되지만
넓 -> 좁 타입 대입은 안된다.
type A = {a:string}
type B = {b:number}
type AB = A | B
type C = A & B
const c:C = {a:"a", b:2}
const ab:AB = {a:"a"}
const ab:AB = c 가능(O) 좁은타입 -> 넓은타입
const c:C = ab 불가능(X) 넓은타입 -> 좁은타입
const c2:C = {a:"a", b:2, //c:"c"} 좁은 타입(C) -> 넓은 타입 대입(C & {c:"c"})
c:"c" 부분에서 에러가 뜸 잉여 속성검사라는것이 발동.
이런 경우는 객체 리터럴을 다른 변수에 할당하고 그 변수를 c2에 할당하면
해결된다.
const c3 = {a:"a", b:2,c:"c"}
const c2 = c31) A와 AB를 비교했을때 AB가 or이므로 범위가 더 넓어지므로
A -> AB 타입 대입이 가능하다.
2) A와 C를 비교했을때 C는 A와B타입이 모두 존재해야하는 타입이므로
A -> C 타입 대입이 불가능하다.
3) AB와 C를 비교했을때 AB가 C보다 넓은 타입이므로
C -> AB 타입 대입이 가능하다.
4) 다만 좁은 타입 -> 넓은 타입에 대입했을시 객체 리터럴일 경우, 객체 리터럴을 변수에 직접 할당하면 잉여 속성검사라는것이 발동된다.
- 알아두면 좋은 팁
객체 리터럴에서 객체가 상세할수록 좁은 타입이다.
2) void의 여러가지 사용법
fucntion a ():void {}
interface Magician {fire: () => void}
const magician:Magician = {fire(){return "불꽃마법"}}
function c (arr:number[],callback: (num:number)=>void){}- 1) 함수의 리턴타입이 void인 경우는?
return값이 undefined인 경우에 해당.
- 2) 객체의 메서드의 리턴타입이 void인 경우는?
여기서는 일반 함수와는 다르게 리턴값을 사용 안한다는 의미로 리턴 타입을
void로 표기해둔다고 한다.
- 3) 매개변수안에 들어오는 콜백함수의 리턴타입이 void인 경우는?
여기서도 마찬가지로 일반 함수와는 다르게 리턴값을 사용 안한다는 의미로 리턴 타입을
void로 표기해둔다고 한다.
정리하면 1번의 경우를 제외하곤 리턴타입이 void인 경우 해당 타입과 타입이 달라도 (number,string...등) 오류로 취급하지 않는다. 해당 리턴값을 사용하지 않겠다 or 리턴값을 상관하지 않겠다는 의미로 취급되기 때문, 결국 정리하면 void로 타입표기는 해둔 경우 리턴값이 필요없는 경우에 사용하면 되겠다.
그리고 undifined와 void는 다르다.
3) declare
declare란 TypeScript로 작성하지 않은 코드의 타입 정보를 컴파일러에게 알려주는 선언이다.
컴파일 단계에서 사라짐. === declare가 붙은 코드들은 JS로 컴파일 되지 않는다.
외부에서 만들어진 코드에 타입을 선언할때 유용하다.
declare function a (타입...):타입
declare 변수:타입