[Typescript] 타입시스템 (2)

그래서 타입이 뭔데?

'타입'은 자바스크립트에서 다루는 값의 형태이다. 

→ 그럼 형태의 정의는 뭐지? - 형태는 값에 존재하는 속성과 메서드 그리고 내장되어있는 typeof 연산자가 설명하는 것을 의미 -

 

예를 들어 아래의 간단한 선언문을 보면

let language = "typescript";

typescript는 langauage 변수가 문자열 타입임을 유추한다!

 

7가지 원시타입 (Primitive Type)

• null → null
• undefined → undefined
• boolean → true or false
• string → "Hello"
• number → 12345
• bigint → 12345n
• symbol → Symbol("Indigochi1d"

오류 종류

1. 구문 오류 : Typescript가 Javascript로 변환되는 것을 차단
2. 타입 오류 : Type 검사기에 따라 일치하지 않는 것이 감지된 경우

구문 오류 

코드로 이해할 수 없는 잘못된 구문을 감지할때 발생한다.

 

타입 오류

Type검사기가 프로그램의 타입에서 오류를 감지했을 때 발생한다.

할당가능성

타입스크립트는 변수의 초기값을 읽고 해당 변수가 허용되는 타입을 결정한다. ( 암묵적 타입정의 )

그 다음 나중에 해당변수에 새로운 값이 할당되면, 새롭게 할당된 값의 타입이 변수의 타입과 동일한지 확인한다.

let say = "hi";
say = "hello";

는 아무 문제가 없다. 

let say = "hi";
say = true 

//Error: Type 'boolean' is not assignable to type 'string'.

오류가 일어난 모습..

‘Type…is not assignable to type…’ 형태의 오류는 두번째 type(값이 할당되는 변수)와 할당하려고 시도하는 첫번째 type의 타입이 다르기 때문에 발생하는 오류이다.

 

타입 에너테이션

선언한 변수에 초기값이 없는 경우에 typescript는 자체적으로 진화하는any로 두고 새로운 값이 할당될 때마다 업데이트 시킨다.

let rocker; /*타입 any*/
rocker = "Joan Jett"; /*타입: string*/
rocker.toUpperCase(); /* OK */

rocker = 19.58; /*타입: number*/
rocker.toPrecision(1); /*OK*/
rocker.toUpperCase();
// Error: 'toUpperCase' does not exist on type 'number'

위의 코드를 보면 rocker에 할당된 값이 초기엔 문자열이지만 나중에 숫자로 진화하는 것을 볼 수 있다.

근데 이럴거면 JS랑 다를게 없잖아?



맞다!!

그래서 Tyepscript는 초기값을 할당하지 않고도 변수의 타입을 선언할 수 있는 구문인 타입 에너테이션을 제공한다.

아래는 타입에너테이션의 사용예시다.

let rocker : string;
rocker = "freddie mercury";

 

불필요한 타입 에너테이션

타입 에너테이션은 Typescript가 자체적으로 타입을 수집할 수 없을 때 사용하는 것이 좋다.

아래의 코드는 타입 에너테이션이 중복되어있다.

let hi : string  = "hi";

 관습적(?) 또는 당연하게도 타입 에너테이션을 수동으로 작성하는 일은 번거롭기 때문에 변하지 않는 변수에는 타입에너테이션을 추가하지 않는다.

타입형태 

타입스크립트는 해당 변수의 타입에 사용하려는 속성이 존재하는지도 확인한다.

아래의 예시로 보면 string타입에 push함수를 쓸  수 없다는 것을 Typescript는 확인해서 에러를 반환한다.

let rapper = "Queen";
rapper.length; /*OK*/

rapper.push('!');
/* Error: Property 'push' does not exist on type 'string' */

 

모듈

• 모듈 : export 또는 import가 있는 파일 → React에서 매우 익숙한...
• 스크립트 : 모듈이 아닌 모든 파일