1. 타입스크립트 시작하기

1. 처음뵙겠습니다. 타입스크립트입니다.

TypeScript is Javascript with ayntax for types
: 타입스크립트는 타입을 위한 구문이 있는 자바스크립트

타입스크립트와 자바스크립트는 완전 다른 언어가 아닙니다! 타입스크립트는 자바스크립트로 transcompile 되기 때문인데 Transcompile이란, 타입스크립트가 컴파일 과정에서 javascript로 변화하고 브라우저 혹은 컴파일러는 이 자바스크립트를 컴파일 합니다.

이런 관계를 superset이라고 합니다. 즉 타입스크립트는 자바스크립트의 superset입니다.

그럼 예시를 볼까요?

const hello : string = 'world';
function add(x: number, y: number): number {
	return x + y;
}

interface Person{
	name : string, 
    age : number
}

const person : Person = {
	name : 'zero',
  	age : 28
}

const hello = 'world'

function add(x, y){
	return x + y
};

const person = {
	name: 'zero',
  	age : 28,
};

위 코드를 보면 자바스크립트와 다른점은 타입을 명시해준다는 특징을 가지고 있습니다. 결국 타입스크립트는 데이터 타입을 명시적으로 표시할 수 있게 된 자바스크립트인 것이죠.

1.2 타입이 왜 필요한가요?

그렇다면 왜 타입이 필요할까요? 자바스크립트로 만드는 프로그램의 규모가 점점 커지고 방대해지다보니, 타입 관련 오류가 많이 발생한다는 점에서 타입스크립트가 만들어졌습니다.

타입 관련 오류는 자바스크립트에서 주로 TypeError(타입에러)로 표시됩니다. 자바스크립트는 주로 문법에러, 타입에러, 기타에러 가 발생하는데, 타입스크립트는 타입을 명시해 자바스크립트에 비해 타입에러를 사전에 방지하는데 탁월합니다.

TypeScript is designed for development of large applications and transcompiles to JavaScript.

자바스크립트는 loosely coupled한 언어입니다. 다른 말로 하자면, 컴파일이 매우 관대하기때문에, 인터프레팅과정에서 매우 관대하다.

이 기능이 large applications에서는 룰을 만듦으로써 개발자들에게 훨씬 더 안정적이고 효율적인 개발을 할 수 있게하는것이다. 예를 들어, js에서 난 에러를 버깅 할려면 꽤 많은 시간을 할애하며 로직을 전부다시 따라가야 하지만, ts는 이를 미리 방지하고 컴파일 타임에 에러를 내뱉기때문에, 훨씬 더 효율적인 개발을 가능하게 하고 이는 큰 서비스를 만들때 더욱더 효과적이다.

🫥 타입스크립트가 타입에러를 잡는 예시!

(1) 오타 명시

const human = {
	sayHello(){
    	
    }
}
human.syaHello();

타입스크립트는 오타 부분에 밑줄을 그어 정확하게 오타를 지적합니다. human이라는 객체에 sayHello 속성이 들어있음을 파악하고 있기에 자동완성 기능을 제공할 수 있는 것입니다. 코딩할 때 타자를 적게 입력해도 되므로 생산성이 올라갑니다.

(2) 타입 오류

const human = {
	mouth : null, 
  	sayHello : function (mouth) {
    	console.log(` Hello ${mouth}!`)
    }
}

human.mouth.sayHello();