번역 왜...없지.... 내가 하면서 봐야지..... 영어공부 👍

padLeft 라는 함수를 호출한다고 가정해보자.

function padLeft(padding: number | string, input: string) : string {
	throw new Error('Not implemented yet!');
} 

만약 padding 이 숫자 타입이라면, 이 숫자가 input 앞에 숫자의 수량만큼 공백을 만들어 앞에 붙어서 사용되도록 할 것이다. 만약 padding 이 글자 타입이라면, 단순히 input 앞에 글자를 붙이도록 할 것이라고 가정해보자. 이러한 경우의 padLeft 로직은 number 에 대한 padding 을 구현해야 할 것이다.

function padLeft (padding: number | string, input: string) {
	return " ".repeat(padding) + input;
}
//=> 이런 경우, number 타입에는 string 타입을 할당 할 수 없다는 에러가 등장한다.
//Argument of type 'string | number' is not assignable to parameter of type 'number'.
//  Type 'string' is not assignable to type 'number'.

타입스크립트는 number | string 같은 유니온 타입을 number타입만 사용하는 함수에 사용하는 경우 경고를 표기한다. 다른 말로 이야기하면, 우리는 암시적으로 padding이 숫자라는 것을 추론하여 확인 할 수 있으며, 동시에 string 을 핸들링할 수 있다는 것이다.

하위 예제를 확인해보자.

function padLeft(padding: number | string , input: string) {
	// number type 일 경우의 구현
	if(typeof padding === 'number') { 
		return " ".repeat(padding) + input; 
	}
	// string type 일 경우의 구현
	return padding + input;
}

만약 이 대부분이 흥미롭지 않은 자바스크립트 코드라고 생각된다면, 정확한 포인트가 맞다. 타입 어노테이션을 제거해서 보게되면 타입스크립트는 자바스크립트처럼 보인다. 전형적인 자바스크립트 코드로부터 의존성 없이 최대한 쉽게 Type safety하게 작성할 수 있도록 한 타입스크립트의 시스템의 목적 이기도 하다.

별 것 아닌 것 처럼 보일 수 있으나, 실제로는 여기에 많은 것들이 숨겨져 실행됩니다.

어떻게 타입스크립트가 static types(정적유형)을 런타임에 분석하는지 방식과 같이, 만약 타입이 자바스크립트 런타임에서 control flow를 통해 if/else 문, 조건문, 루프 등등에 어떤 영향을 주는지 등이 숨겨져있습니다.

if 문 체크를 통해서 타입스크립트는 typeof padding === ‘number’ 과 특별한 type guard 라고 불리는 특별한 form을 통해서 이해 할 수 있습니다. 타입스크립트는 우리의 프로그램을 실행하는 방식에 대해서 특정 형식을 취합니다.

Typeof type guards

도움받은 comment

• Dom, Event 타입과 같은 경우에는 런타임의 영향을 받는다.
• 이런 경우, 타입가드를 사용하여 타입을 지정할 수 있다