TypeScript | 개요 & 변수 타입

TypeScript

자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원하는 언어

---

동적 타입 언어 VS 정적 타입 언어

동적 타입 언어	정적 타입 언어
타입에 대한 고민을 하지 않아도 되므로 배우기 쉬움	변수를 선언할 때마다 타입을 고민해야 하므로 진입 장벽이 높을
코드의 양이 적을 때 생산성이 높음	코드의 양이 많을 때 동적 타입 언어에 비해 생산성이 높음
타입 오류가 런타임 시 발견	타입 오류가 컴파일 시 발견

※ 작은 규모의 프로젝트에서는 동적 타입 언어, 큰 큐모의 프로텍트에서는 정적 타입 언어 추천

---

정적 타입 언어가 생산성이 높은 이유

1. 코드가 타입으로 서로 연결됨
2. 연관된 코드 간의 이동이 쉽고, 변수명이나 함수명을 변경하는 등의 리팩터링도 쉬움
3. 동적 타입 언어에 비해 IDE가 제공하는 기능이 더 많음

---

타입스크립트 장점

1. 마이크로소프트에서 개발하고 있으며 꾸준히 업데이트 됨
   자바스크립트의 새로운 표준이 빠르게 추가됨
2. JSX 문법과 리액트 컴포넌트 타입 정의에 어려움이 없음
3. 다른 경쟁 언어에 비해 큰 생태계를 가짐
4. 마이크로소프트의 IDE인 vscode와 궁합이 좋음
5. vscode에서 타입스크립트를 이용해서
   자바스크립트 파일도 타입 검사를 하기 때문에 레거시(legacy) 프로젝트에 유용

---

온라인 실습

타입스크립트 홈페이지: [https://www.typescriptlang.org/play/]

---

타입 에러 발생

let v1 = 123;
v1 = 'abc'; // 타입 에러

• 변수 v1에 마우스를 올려 놓으면 let v1: number라는 문구 확인 가능
• 타입이 숫자인 변수에 문자열을 입력하면 컴파일 타임에 에러 발생
  → 코드를 실행해보기 전에도 타입 에러 확인 가능
• 위와 같이 변수 v1의 타입을 명시적으로 입력하지 않아도 타입스크립트가 자동으로 타입을 인식하는 기능을 타입 추론(type inference)이라고 함

---

변수 타입 선언

타입스크립트에서는 변수의 타입을 명시적으로 작성해야 함

let v1: number | string = 123;
v1 = 'abc';

• 변수 v1을 숫자나 문자열인 타입으로 정의
• 변수 이름 오른쪽에 :(콜론)과 함께 타입 선언
• 변수 v1은 문자열도 포함하는 타입이므로 에러가 발생하지 않음

---

타입스크립트의 여러 가지 타입

const size: number = 123;
const isBig: boolean = size >= 100;
const msg: string = isBig ? '크다' : '작다';

// 배열 타입은 두 가지 방법으로 정의 가능
const values: number[] = [1, 2, 3];
const values2: Array<number> = [1, 2, 3];
values.push('a'); // 타입 에러 발생

// 튜플(tuple) 정의
const data: [string, number] = [msg, size]; 
data[0].substr(1);
data[1].substr(1); // 타입 에러

---

튜플(tuple)

원소의 수와 타입이 정확히 지정된 배열의 타입

const data: [string, number] = ['Hi', 123];

// 타입 에러 발생
const data2: [string, number] = ['Hi', 123, 123];

// 에러 발생 X
data.push(123);
console.log(data); // ['H1', 123, 123];

• 튜플 타입 변수는 정확히 명시된 개수 만큼의 원소만 가질 수 있음
• 정의한 개수보다 더 많거나 적은 원소를 갖는 배열을 할당하면 에러 발생
• Array 프로토타입의 메소드를 통한 조작이 금지되지 않는다는 점에 유의

---

null & undefined 타입

자바스크립트에서는 값으로 존재하는 null과 undefined는 타입스크립트에서 각각 타입으로도 존재

let v1: undefined = undefined;
let v2: null = null;
v1 = 123; // 타입 에러

let v3: number | undefined = undefined;
v3 = 123;

• undefined와 null은 타입스크립트에서 타입으로 사용 가능
• undefined 타입에 숫자 입력 시 에러 발생
• undefined와 null은 다른 타입과 함께 유니온 타입으로 정의할 때 많이 사용됨

---

문자열 리터럴과 숫자 리터럴 타입

타입스크립트에서는 문자열 리터럴과 숫자 리터럴을 타입으로 정의 가능

let v1: 10 | 20 | 30;
v1 = 10;
v1 = 15; // 타입 에러

let v2: '경찰관' | '소방관';
v2 = '의사'; // 타입 에러

• 변수 v1은 숫자 10, 20, 30만 가질 수 있는 타입으로 정의
• 변수 v2는 문자 '경찰관', '소방관'만 가질 수 있는 타입으로 정의

---

any 타입

any 타입은 모든 종류의 값을 허용하는 타입

let value: any;
value = 123;
value = '456';
value = () => {};

• any 타입에는 숫자, 문자뿐만 아니라 함수도 입력 가능
• 기존에 자바스크립트 코드로 작성된 프로젝트를 타입스크립트로 포팅하는 경우 유용하게 사용 가능
• 실제로 타입을 알 수 없는 경우나 타입 정의가 안 된 외부패키지 사용 시 유용
• 단, any 타입을 남발하면 타입스크립트를 사용하는 의미가 퇴색되기 때문에 되도록 피하는 것을 권장

---

void & never 타입

void 타입은 아무 값도 반환하지 않고 종료되는 함수의 반환 타입

never 타입은 항상 예외가 발생해서 비정상적으로 종료되거나 무한 루프 때문에 종료되지 않는 함수의 반환 타입

function f1(): void {
    console.log('hello');
}

function f2(): never {
    throw new Error('some error');
}

function f3(): never {
    while(true){
        //... 실행하지 마세요ㅠㅠ
    }
}

---

object 타입

object 타입은 자바스크립트에서 일반적으로 사용되는 객체 타입

let v: object;
v = { name: 'abc' };
console.log(v.prop1); // 타입 에러

• 객체의 속성에 대한 정보가 없기 때문에 타입 에러 발생
• 속성 정보를 포함해서 타입을 정의하기 위해서는 인터페이스(interface)를 사용해야 함

---

교차 타입 & 유니온 타입

교차(intersection) 타입은 여러 타입의 교집합을 표현하며 & 기호로 정의

유니온(union) 타입은 여러 타입의 합집합을 표현하며 | 기호로 정의

let v1: ( 1 | 3 | 5 ) & ( 3 | 5 | 7 );
v1 = 3;
v1 = 1; // 타입 에러 발생

• 변수 v1의 타입은 3 | 5와 같음
• 따라서 변수 v1에는 3 또는 5가 아닌 값을 할당할 수 없음

---

type 키워드

type 키워드를 사용해서 타입에 별칭 부여 가능
타입 별칭은 타입 선언 시 편리하게 사용

type Width = number | string;
let width: Width;
width = 100;
width = '100px';

• number | string 타입에 Width 별칭 부여
• Width는 일반적인 타입처럼 사용 가능

---

참고도서: [실전 리액트 프로그래밍 / 저자_ 이재승 / 출판사_ 프로그래밍 인사이트]