기존 블로그에 작성했던 스터디 포스트를 이전한 글입니다.
해당 포스트는
TypeScript를 학습하며 정리한 내용에 대한 포스트입니다.
📖 타입
💻 2.1 타입의 종류
타입이란 Javascript에서 다루는 값의 형태에 대한 설명이다.
🍳 형태란?
값에 존재하는 속성과 메서드 그래고 내장되어 있는 typeOf 연산자가 설명하는 것을 의미
일곱 가지 기본 원시 타입
nullundefinedbooleanstringnumberBingIntsymbol
🍳 2.1.1 타입 시스템
타입 시스템(type system)은 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집합.
기본적인 타입스크립트의 타입 시스템 동작
코드를 읽고 존재하는 모든 타입을 이해
각 값이 초기 선언에서 가질 수 있는 타입을 확인
각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법 확인
값의 사용법이 타입과 일치하지 않으면 사용자에게 오류 표시
🍳 2.1.2 오류 종류
자주 접하게 되는 두 가지 오류
- 구문 오류 :
- 타입스크립트가 자바스크립트로 변환되는 것을 차단한 경우
- 타입 오류 :
- 타입 검사기에 따라 일치하지 않는 것이 감지된 경우
구문 오류
Typescript가 코드로 이해할 수 없는 잘못된 구문을 감지할때 발생고문 오류가 발생하는 경우 컴파일을 차단 (
javascript파일을 얻지 못하거나 얻더라도 예상과 다를 수 있음)
1
2
let let someting;
// Error : ',' expected
타입스크립트는 구문 오류와는 상관없이 자바스크립트 코드를 출력하기 위해서 최선을 다함.
하지만 원하는 출력 결과가 아닐 수 있음.
따라서 컴파일 된
Javascript를 실행하기 전에 구문 오류를 수정한는 것이 좋음
타입 오류
Typescript의 inference로 오류를 감지했을 때 발생
오류가 발생했다고 컴파일을 차단하지 않음
Javascript코드가 원하는 대로 실행되지 않을 가능성이 있다는 신호를 타입 오류로 알려준다.
Javascript를 실행하기 전에 타입 오류를 확인하고 발견된 문제를 먼저 해결하는 것이 가장 좋다.
💻 2.2 할당 가능성
Typescript는 변수의 초깃값을 읽고 해당 변수가 허용되는 타입을 결정
Typescript에서 함수 호출이나 변수에 값을 제공할 수 있는지 확인하는 것을 할당 가능성(assignability)이라고 한다.
즉, 전달된 값이 예상된 타입으로 할당 가능한지 확인
💻 2.3 annotation
초기 타입을 유추할 수 없는 변수는 진화하는 any라고 부른다.
1
2
3
4
5
6
7
8
9
10
let rocker; // type : any
rocker="Joan Jett" // type : string
rocker.toUpperCase(); //OK
rocker = 19.58; // type : number
rocker.toPrecision(1); //OK
rocker.toUpperCase();
//Property 'toUpperCase' does not exist on type 'number'.
typescript는 초깃값을 할당하지 않고 변수의 타입을 선언할 수 있는 구문인 type annotation 이 존재한다.
type annotation은 변수 이름 뒤에 배치되며 콜론(:)과 타입이름을 차례대로 기재한다.
1
2
let rocker:string;
rocker="Joan Jett"
이러한 Type annotation은 Typescript에만 존재하며 런타임 코드에 영향을 주지도 않고, 컴파일 시 제거된다.
초기 할당으로
TypeChecker에 의해서inference가 가능할 경우anntation까지 중복해서 사용하지 않는 것이 좋다. (경우에 따라 다름)
💻 2.4 타입 형태
타입의 형태가 정해졌다면 Typescript는 객체에서 어떤 멤버 속성이 존재하는지 알고 있기 때문에 해당 타입에서 사용가능한 속성을 자동완성할 수 있고, 잘 못된 부분이 있는지도 확인 가능하다.
1
2
3
4
5
6
7
8
// Type Annotation으로 구체적으로 명시가능
// 하지만 Inference가 가능한 경우 오히려 효율과 가독성이 떨어질 수 있음
const user: { firstName: string; age: number; } = {
firstName: "hoseung",
age: 33,
};
//Property 'middleName' does not exist on type '{ firstName: string; age: number; }'.
user.middleName;
Typescript는 객체의 형태에 대한 이해를 바탕으로 할당 가능성뿐만 아니라 객체 사용과 관련된 문제도 알려준다.
💻 2.5 Module
한 모듈에서 다른 파일에 선언된 변수와 동일한 이름으로 선언된 변수는 다른 파일의 변수를 가져오지 않는 이상 이름 충돌이 발생하지 않는다. (export로 내보내지 않으면 다른 파일에서 사용할 수 없다)
1
2
3
4
5
6
7
8
9
10
11
12
13
// a.ts
export const shared = "koby";
// b.ts
export const shared = "koby";
// index.ts
import { shared } from "./a";
// Error: Import declaration confilcts with local declaration of 'shared'
export const shared = 'koby'
//Error : Individual declarations in merged declaration
//'shared' must be all exported or all local.
그러나 파일이 script일 경우 Typescript는 해당 파일을 global scope로 간주하므로 모든 script가 파일의 내용에 접근할 수 있다.
📚 레퍼런스
Goldberg, et al. 러닝 타입스크립트 / 조시 골드버그 지음 ; 고승원 옮김, 2023.