JavaScript/TypeScript

TypeScript | 개요 & 변수 타입

pathas 2020. 5. 6. 14:51

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는 일반적인 타입처럼 사용 가능

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

저작자표시 (새창열림)