Type Script : 개요, 개념, 예제

정적 검사

TypeScript는 정적 검사라는 걸 수행하는데 많은 언어에 있는 기능입니다. 실행하지 않고도 코드 내 오류를 잡는 기능입니다. 코드를 실행하는 건 JavaScript가 할 일입니다.

TypeScript는 정적으로 검사합니다. 실행하기 전에 코드를 보고 문제가 있는지 알려줍니다. 그래서 정적 검사라고 합니다.

TypeScript는 정적 타입 검사기로서, 실행하기 전에 프로그램 데이터의 종류나 타입을 검사합니다. 문자열, 숫자, 배열이나 특정한 프로퍼티를 가진 객체 등을 검사합니다. 그런 걸 모두 실행 전에 합니다.

 

 

 

왜 타입인가

첫 번째로 오류를 찾아줍니다. 가장 중요한 건데 실행 전에 오류를 찾을 수 있습니다. 개발 단계에서 작성과 동시에 분석을 함으로써 문제를 찾아 주고 실행할 필요가 없습니다.

TypeScript를 작성하면서 오류가 나타나면 바로 확인해서 고치고 코드를 일반 JavaScript로 컴파일링하면 됩니다. 그러면 브라우저에서 실행이 가능하고 Node.js로도 작업이 가능합니다. 그러니까 TypeScript는 개발용이고 개발 후엔 JavaScript로 컴파일링합니다.

 

왼쪽에 TypeScript가 있고 오른쪽에 컴파일링된 JavaScript가 있어요. 모든 JavaScript 구문은 TypeScript에 쓸 수 있어요

1 더하기 1 같은 기초 계산도 가능합니다. 하지만 console.log로 출력한다면 아무것도 안 나타납니다.

TypeScript로부터 컴파일링된 JavaScript일 뿐입니다. 그리고 가끔은, 작성한 코드가 JavaScript와 똑같이 생겼습니다.

하지만 TypeScript로 작성하면 코드에 쓸 수 있는 타입이 많습니다. 그 타입은 컴파일링된 JavaScript엔 안 나옵니다.

 

 

Type Script : 개요, 개념, 예제 1

 

추가 구문이 아주 많고 줄도 훨씬 많습니다. TypeScript로 한 50줄 정도 됩니다. 그런데 오른쪽엔 JavaScript 여덟 줄만 있습니다. 이렇게 TypeScript에는 부가적인 게 많습니다.

여기 보시면 interface라든가 type 같은 키워드가 있는데 JavaScript엔 이런 게 없습니다. 이런 건 모두 TypeScript 개발 단계에서만 쓰여집니다.  더 나은 코드 작성을 위함인데 나중에 다 없어집니다.

JavaScript로 컴파일링하면 다 사라집니다. 그리고 아까 말한 작성 중에 검사를 한다는 건 누군가 우리가 작성하는 코드를 보고 '야, 왜 이렇게 써?'와 비슷합니다.

 

 

Type Script : 개요, 개념, 예제 2

 

너비는 10, 높이는 23인 객체입니다. 그리고 일부러 오타를 넣었습니다. height(높이)를 heigth라고 썼습니다. 그래서 height가 존재하지 않으니 area는 NaN이라고 나옵니다.

이걸 복사해서 TypeScript에 집어 넣으면 경고가 뜹니다. 'heigth이라는 프로퍼티는 없습니다. height를 원하나요?'와 같이 나옵니다.  오류가 있는 걸 강제로 막지는 않습니다

컴파일링된 JavaScript를 보면 여전히 오타가 있습니다. 고쳐주진 않지만 TypeScript는 코드에서 오류가 있으면 알려줍니다. 코드를 실행하거나 컴파일링하지 않아도 오류를 알려줍니다.

TypeScript가 알려주는 피드백을 보고 뭐가 문젠지 확인할 수 있습니다. 그리고 철자를 고치면 됩니다.

이렇게 아주 간단한 예시로 TypeScript의 역할을 보여드렸습니다. 실행 전에 오류를 찾는 게 TypeScript의 목적입니다. 앞서 말했듯 JavaScript는 TypeScript 안에 있습니다.

즉, JavaScript에서 유효한 모든 건 TypeScript에서도 유효합니다. 그리고 TypeScript에만 쓰이는 추가 구문은 다 타입과 관련이 됩니다. 

컴파일 하면 왼쪽에 많은 코드가 일반 JavaScript 코드로 줄어듭니다.