[우아한 타입스크립트] 2장 타입

Jean Young Park·2024년 6월 13일
typesciprt우아한 타입스크립트타입
0

javascript

목록 보기
19/23

2.1 타입이란

💡 컴파일 타임과 런타임
컴파일 타임 : 기계(컴퓨터, 엔진)가 소스코드를 이해할 수 있도록 기계어로 변환되는 시점
런타임 : 변환된 파일이 메모리에 적재되어 실행되는 시점

변수와 메모리의 관계

변수 : 값을 저장할 수 있는 공간(컴퓨터 메모리)이나 값을 가리키는 상징적인 이름, 이름이 붙은 저장소

  1. 변수 선언: 변수를 선언하면, 메모리의 특정 위치가 변수에 할당
  2. 메모리 할당: 변수에 값을 저장하기 위해 메모리 공간이 할당
  3. 값 저장: 변수에 값을 할당하면, 해당 값이 변수에 연결된 메모리 위치에 저장
  4. 값 참조: 변수를 통해 값을 참조할 때, 변수는 메모리에서 저장된 값을 읽음

자바스크립트의 7가지 자료형 || 데이터 타입

  • Object
  • Numeric
  • Symbol
  • String
  • Boolean
  • null
  • undefined

타입시스템

코드에서 사용되는 유효한 값의 범위를 제한해서 런타임에서 발생할 수 있는 유효하지 않은 값에 대한 에러를 방지해준다.

  • 정적 타입 시스템 : 모든 변수의 타입이 컴파일타임에 결정된다.
    ex ) C, 자바, 타입스크립트
  • 동적 타입 시스템 : 변수 타입이 런타임에서 결정된다.
    ex ) 파이썬, 자바스크립트

암묵적 타입 변환

개발자가 의도적으로 타입을 명시하지 않았지만 컴파일러 또는 엔진 들레 의해서 런타임에 타입이 자동으로 변경되는 것

  • 강타입
    print('2' - 1)

"""
Traveback (most recent call last): File
"main.py"m line 1, in <module>
print('2' - 1)
TypeError: unsupported operand type(s) for -: 'str' and 'int'
"""
  • 약타입
    console.log("2" - 1);
// 1

컴파일 방식

사람이 이해할 수 있는 방식으로 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 바꿔주는 과정이다. 하지만 타입스크립트의 컴파일 결과물은 여전히 사람이 이해할 수 있는 방식인 자바스크립트 파일이다.

타입스크립트가 탄생한 이유는 사람이 이해하기 쉬운 방식으로 코드를 작성하지 위해서가 아니라 자바스크립트의 컴파일 타임에 런타임 에러를 사전에 잡아내기 위한 것이다.

2.2 타입스크립트의 타입 시스템

타입 애너테이션

변수나 상수 혹시 함수의 인자와 반환 값에 타입을 명시적으로 선언해서 어떤 타입 값이 저장될 것인지를 컴파일러에 직접 알려주는 문법

int woowajanNum = 2010;
float woowahanFloatNum = 2.01f;
char woowahanLetter = 'B'
let isDone: boolean = false;
let decimal: number = 6;
let color: string = 'blue';

타입스크립트에서 타입을 구분하는 방식

  • 구조적 타이핑
    이름으로 타입을 구분하는 명목적인 타입 언어의 특징과 달리 타입스크립트는 구조로 타입을 구분한다. 타입스크립트의 타입은 값의 집합으로 생각할 수 있다.
    type stringOrNumber = string | number;
  • 서브 타이핑
    집합으로 나타낼 수 있는 타입스크립트의 타입 시스템을 지탱하고 있는 개념 객체가 가지고 있는 속성을 바탕으로 타입을 구분. 이름이 다른 객체여도 속성이 동일하다면 호환 가능
    interface Pet {
	name: string
}

interface Cat {
	name: string;
	age: number;
}

let pet: Pet;
let cat: Cat = { name: "Zag", age: 2};

pet = cat; // WORK
    예기치 못한 결과
    interface Cube {
	width: number;
	height: number;
	depth: number;
}

function addLines(c: Cube) {
	let total = 0;
	
	for(const axis of Object.keys(c)){
		const length = c[axis];
		total += length;
	}
}
    const namedCube = {
	width: 6,
	height: 5,
	depth: 4,
	name: 'SweetCube'
}

addLines(namedCube); // Work

타입스크립트와 자바스크립트

명목적 타이핑은 타입의 동일성을 확인하는 과정에서 구조적 타이핑에 비해 조금 더 안전하다. 그런데도 타입스크립트가 구조적 타이핑을 채택한 이유는 타입스크립트가 자바스크립트를 모델링한 언이기 때문이다. 자바스크립트가 본질적으로 채용한 덕 타이핑을 그대로 모델링한다. 쉬운 사용성과 안전성 모두를 충족시켰다.
하지만 덕 타이핑의 차이는 타입을 검사하는 시점에 있다. 덕 타이핑은 런타임에 타입을 검사하고 구조적 타이핑은 컴파일타임에 타입을 검사한다.

💡 덕 타이핑
어떤 타입에 부합하는 변수와 메서드를 가질 경우 해당 타입에 속하는 것으로 간주하는 방식
”만약 어떤 새가 오리처럼 걷고, 헤엄치며 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다.”

타입스크립트의 점진적 타입 확인

  • 점진적 타입 검사 : 컴파일 타임에 타입 검사하면서 필요에 따라 타입 선언 생략을 허용하는 방식

값 vs 타입

값은 프로그램이 처리하기 위해 메모리에 저장하는 모든 데이터이다.
객체 역시 값이며 자바스크립트에서는 함수도 값이다.
타입스크립트에서 타입과 값은 구분하는 것은 어렵지 않다. 타입은 주로 타입 선언( : ) 또는 단언 문( as )으로 작성하고 값은 할당 연산자인 =으로 작성한다.

interface Developer {
	name: string;
	isWorking: boolean;
}

const developer: Developer = { name: "Zig", isWorking: true };

값 공간과 타입 공간의 혼동

💡 구조 분해 할당
ES6부터 도입된 자바스크립트의 기능으로 자바스크립트 또는 타입스크립트에서 배열이나 객체의 속성을 개별 변수로 분해하여 그 값을 변수에 할당하는 것

function email(options: { person: Person; subject: string; body: string }){
	//...
}
function email({ person: Person, string, string }){
	//잘못된 방법
}
function email({person, subject, body}: {person: Person; subject: string; body: string;}){
	//알맞은 방법
}

값과 타입 공간에 동시에 존재하는 심볼

  • 클래스
    타입 애너테이션으로 사용할 수 있지만 런타임에서 객체로 변환되어 자바스크립트의 값으로 사용되는 특징이 있다.
    class Developer {
    	name: string;
    	domain: string;

    	constructor(name: string, domain: string){
    		this.name = name;
    		this.domain = domain;
    	}
    }

    const me: Developer = new Developer("zig", "frontend");
  • enum
    클래스와 동일하게 런타임에 객체로 변환되는 값
    // 타입으로 사용되는 예
    enum Direction {
        Up,
        Down,
        Left,
        Right,
    }
   
    function move(direction: Direction): void {
        switch (direction) {
            case Direction.Up:
                break;
            case Direction.Down:
                break;
            case Direction.Left:
                break;
            case Direction.Right:
                break;
            default:
                break;
        }
    }
    // 값으로 사용되는 예
    enum MyColors {
    	BLUE = "#000FF",
    	YELLO = "#FFFF00",
    	MINT = "#2AC1BC"
    }
    
    function whatMintColor(pallette: {MINT: string}) {
    	return pallette.MINT;
    }

타입을 확인하는 방법

타입스크립트에서 typeof, instanceof 그리고 타입 단언을 사용해서 타입을 확인할 수 있다.

  • typeof
    interface Person {
	first: string;
	last: string;
}

const person: Person = { first: "zig", last: "song"};
function email(options: { person: Person; subject: string; body: string; }){}
    값에서 사용되는 경우 : 런타임의 typeof 연산자도 동작
    const v1 = typeof person; // object
const v2 = typeof email; // function
    타입에서 사용된 경우 : 값을 읽고 타입스크립트 타입을 반환
    type T1 = typeof person; // Person
type T2 = typeof email; // options: { person: Person; subject: string; body: string; }

2.3 원시 타입

자바스크립트에서 값은 타입을 가지지만 변수는 별도의 타입을 가지지 않는다. 따라서 자바스크립트의 변수에는 어떤 타입의 값이라도 자유롭게 할당할 수 있다. 타입스크립트는 이 변수에 타입을 지정할 수 있는 타입 시스템 체계를 구축한다.

자바스크립트의 7가지 원시 값은 타입스크립트에서 원시 타입으로 존재한다.

  • boolean
    오직 true와 false 값만 할당할 수 있는 타입

  • undefined
    정의되지 않았다는 의미의 타입

  • null
    보통 빈 값을 할당해야 할 때 사용

  • number
    숫자에 해당하는 모든 원시 값
    자바 같은 언어에서는 byte,short,int,long,double,float 등 다양한 숫자 타입이 구분되어있지만 자바스크립트는 정수, 부동소수점수를 구분하지 않기 때문에 모두 number 타입에 할당할 수 있다. (NaN이나 Infinity도 포함)

  • bigInt
    ES2020에서 새롭게 도입된 데이터 타입으로 타입스크립트 3.2 버전부터 사용 가능
    Number.MAX_SAFE_INTEGER(2^53-1)를 넘어가는 값

  • string
    문자열을 할당할 수 있는 타입

  • symbol
    ES2015에서 도입된 데이터 타입
    어떤 값과도 중복되지 않는 유일한 값을 생성할 수 있다.

2.4 객체타입

앞서 언급한 7가지 원시 타입에 속하지 않는 값은 모두 객체 타입으로 분류할 수 있다.

  • object
    타입스크립트 타입 시스템은 object 타입
    object 타입은 가급적 사용하지 말도록 권장되는데 any 타입과 유사하게 객체에 해당하는 모든 타입 값을 유동적으로 할당할 수 있기 때문이다.

  • {}
    객체 리터럴 방식으로 객체를 생성할 때 사용한다. 

    const noticePopup: { title: stinrg; description: string } = {
    	title: "IE 지원 종료 안내",
    	description: "2022.07.15일부로 배민상회 IE. 브라우저 지원을 종료합니다."
    }
  • array
    하나의 타입 값만 가질 수 있다는 점에서 자바스크립트 배열보다 조금 더 엄격하다.
    선언 방식은 Array 키워드로 선언하거나 대괄호([])를 사용해서 선언하는 방법이 있다.
    const getCartList = async(cartId: number[]) => {
    	const res = await CartApi.GET_CART_LIST(cartId;
    	return res.getData();
    }
    
    getCartList([]);
    getCartList([1001]);
    getCartList([1001, 1002, 1003]);
    getCartList([1001, "1002"]); // "1002"는 string 타입이므로 불가

  • type과 interface 키워드
    앞서 언급한 object 타입은 실무에서는 잘 사용하지 않는다.
    중괄호를 사용한 객체 리터럴 방식으로 타입을 매번 일일이 지정하기에는 중복적인 요소가 많다.
    type 또는 interface 키워드를 사용해 중복을 최소화 하여 타입을 사용

  • function
    function이라는 키워드 체를 타입으로 사용하지는 않는다
    매개변수도 별도 타입으로 지정해야 한다.

    function add(a: number, b: number): number {
      return a + b;
    }

    type add = (a: number, b: number) => number;
profile
Jean Young Park
이전 포스트

player도 움직일 수 있다!

다음 포스트

[우아한 타입스크립트] 3장 고급 타입

0개의 댓글

관련 채용 정보