타입스크립트 스터디 - Learning TypeScript 2장

 

2.1 타입의 종류

- '타입'은 자바스크립트에서 다루는 값의 형태에 대한 설명

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

- 타입스크립트의 가장 기본적인 타입 : 

➡ 일곱 가지 원시 타입 null, undefined, boolean, string, number, bigint, symbl

변수의 원시 타입을 잊어버렸다면 타입스크립트 플레이그라운드 혹은 IDE에서 원싯값을 갖는 let 변수를 입력하고 변수 이름 위에 마우스 가져가면 확인 가능

 

2.1.1 타입 시스템

- 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집함

➡ 기본적인 작동

1. 코드를 읽고 존재하는 모든 타입과 값을 이해

2. 각 값이 초기 선언에서 가질 수 있는 타입을 확인

3. 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인

4. 겂의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시

 

2.1.2 오류 종류

- 구문 오류 : 타입스크립트가 자바스크립트로 변환되는 것을 차단한 경우

tip : 타입스크립트는 구문 오류와는 상관없이 원하는 결과값이 아닐 수 있으므로 실행하기 전에 구문 오류를 수정

- 타입 오류 : 타입 검사기에 따라 일치하지 않는 것이 감지된 경우

타입스크립트는 타입 오류가 있음에도 불구하고 자바스크립트 코드를 출력할 수 있지만, 출력된 자밧크립트 코드가 원하는 대로 실행되지 않을 가능성이 있다는 신호를 타입 오류로 알려줌. 자바스크립트로 실행하기 전에 타입 오류를 확인하고 발견된 문제를 먼저 해결하는 것이 가장 좋음

 

2.2 할당 가능성

- 타입스크립트는 변수의 초깃값을 읽고 해당 변수가 허용되는 타입을 결정

- 변수에 동일한 타입의 다른 값이 할당될 때는 문제❌ 

- 타입스크립트 변수에 다른 타입의 값이 할당되면 타입 오류

- 타입스크립트에서 호출이나 변수에 값을 제공할 수 있는지 여부를 확인하는 것 : 할당 가능성(assignability)

➡ 즉, 전달된 값이 예상되 ㄴ타입으로 할당 가능한지 여부를 확인

 

2.2.1 할당 가능성 오류 이해하기

- 'Type ... is not assignable to type ...' 형태의 오류는 타입스크립트 코드를 작성할 때 만나게 되는 가장 일반적인 오류

- 첫 번째 type은 코드에서 변수에 할당하려고 시도하는 값

- 두 번째 type은 첫 번째 타입이 할당되는 변수

 

2.3 타입 애너테이션

- 떄로는 변수에 타입스크립트가 읽어야할 초깃값이 없는 경우도 있는데, 기본적으로 변수를 암묵적인 any 타입으로 간주

(세상의 모든 것이 될 수 있음)!

- 초기 타입을 유추할 수 없는 변수는 진화하는 any라고 부름

- 타입스크립트는 초깃값을 할당하지 않고도 변수 타입을 선언할 수 있는 구문인 타입 에너테이션을 제공

- 변수 이름 뒤에 배치되며 콜론과 타입 이름을 차례대로 기재

let rocker: string;
rocker = "Joan Jett";

- 런타임 코드에 영향을 주지 않고, 유효한 자바스크립트 구문도 아님, tsc 명령어를 실행해 타입스크립트 소스 코드를 자바스크립트로 컴파일하면 해당 코드가 삭제

 

2.3.1 불필요한 타입 애너테이션

- 타입 애너테이션은 타입스크립가 자체적으로 수집할 수 없는 정보를 타입스크립트에 제공할 수 있음

- 하지만 타입스크립트가 아직 알지 못하는 것은 알려주지 못함!

- 타입 애너테이션을 수동으로 작성하는 일은 번거로움

- 코드를 명확하게 문서화하거나 실수로 변수 탕비이 변경되지 않도록 타입스크립트를 보호하기 위해 변수에 명시적으로 타입 애너테이션을 포함하는 것이 경우에 따라서는 유용할 수 있음

 

2.4 타입 형태

- 타입스크립트는 변수에 할당된 값이 원래 타입과 일치하는지 확인하는 것 이상을 수행

let rapper - "Queen Latufah";
rapper.length; // OK

 

나중에 rapper 변수를 사용할 때 타입스크립트가 string 타입에서 사용 가능한 작업만을 허용 (알 수 없는 작업은 허용❌)

 

2.4.1 모듈

- ECMA 스크립트 2015에는 파일 간에 가져오고 내보내는 구문을 표준화하기 위해 ECMA스크립트 모듈(ESM)이 추가

- 사양과 일치시키기 위해 다음 명명법을 사용

모듈 : export 또는 import가 있는 파일

스크립트 : 모듈이 아닌 모든 파일

- 타입스크립트는 최신 모든 파일을 기존 파일과 함께 실행할 수 있음

- 모듈 파일에 선언된 모든 것은 해당 파일에서 명시한 export 문에서 내보내지 않는 한 모듈 파일에서만 사용가능

- 파일이 스크립트면 타입스크립트는 해당 파일을 전역 스코프(변수에 접근할 수 있는 범위)로 간주하므로 모든 스크립트가 파일의 내용에 접근할 수 있음

➡ 즉, 스크립트 파일에 선언된 변수는 다른 스크립트 파일에 선언된 변수와 동일한 이름을 가질 수 없음!!

 

파일에 Cannot redeclare...라는 오류가 표시되면 파일에 아직 export 또는 import문을 추가하지 않았기 때문

 

2.5 마치며

- 끝!