타입스크립트 정리

김민지·2020년 9월 21일
0

왜 타입스크립트를 사용하는가?

자바스크립트는 타입 시스템이 없는 동적 프로그래밍 언어로, 자바스크립트 변수는 문자열, 숫자, 불린 등 여러 타입의 값을 가질 수 있다.
이를 약한 타입 언어라고 표현할 수 있으며 비교적 유연하게 개발할 수 있는 환경을 제공하는 한편 런타임 환경에서 쉽게 에러가 발생할 수 있는 단점을 가진다.(런타임 - 컴퓨터가 실행되는 동안 프로세스나 프로그램을 위한 소프트웨어 서비스를 제공하는 가상 머신의 상태이다.)(컴파일 언어 - 어떤 언어 코드를 다른 언어로 바꿔주는 과정)
그리고 타입스크립트는 이러한 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 체크할 수 있다.

타입스크립트의 기능

  • 크로스 플랫폼 지원: 자바스크립트가 실행되는 모든 플랫폼에서 사용 가능
  • 객체 지향 언어 : 클래스, 인터페이스, 모듈 등의 강력한 기능을 제공, 순수한 객체 지향 코드를 작성 할 수 있다.
  • 정적 타입 : 정적 타입을 사용하기 때문에 코드를 입력하는 동안에 오류를 체크할 수 있다.(단 에디터 혹은 플러그인의 도움이 필요)
  • DOM 제어: 자바스크립트와 같이 DOM을 제어해 요소를 추가하거나 삭제할 수 있다.
  • 최신 ECMAScript 기능 지원: ES6 이상의 최신 자바스크립트 문법을 손쉽게 지원할 수 있다.

개발환경

VSCode와 WebStorm

타입 기본(Types)

타입스크립트는 일반 변수, 매개 변수(Parameter), 객체 속성(Property)드으에 :type과 같은 형태로 타입을 지정한다.

function someFunc(a: TYPE_A, b: TYPE_B): TYPE_RETURN {
  return a + b;
}
let some: TYPE_SOME = someFunc(1, 2);

다음 예시를 보면
add함수의 매개 변수 a와 b는 number 타입이어야 한다고 지정했고, 그렇게 실행된 함수의 반환값은 숫자로 추론(Inference)되기 때문에 변수 sum도 number타입이어야 한다고 지정.

function add(a: number, b: number) {
  return a + b;
}
const sum: number = add(1, 2);
console.log(sum); // 3

자바스크립트로 컴파일한 결과

"use strict";
function add(a, b) {
  return a + b;
}
const sum = add(1, 2);
console.log(sum);

타입 에러

만약 다음과 같이 변수 sum을 number가 아닌 string타입이어야 한다고 지정했다면, 컴파일조차 하지 않고 코드를 작성하는 시점에서 에러 발생
ex) TS2323라는 에러 뜬다 이거 그대로 구글 검색하면 에러코드 정보얻을수있음

타입 선언

불린:Boolean

단순한 참(true)/거짓(false) 값을 나타낸다.

let isBoolean: boolean;
let isDone: boolean = false;

숫자: Number

모든 부동 소수점 값을 사용할 수 있다.
ES6에 도입된 2진수 및 8진수 리터럴도 지원함

let num: number;
let integer: number = 6;
let float: number = 3.14;
let hex: number = 0xf00d; // 61453
let binary: number = 0b1010; // 10
let octal: number = 0o744; // 484
let infinity: number = Infinity;
let nan: number = NaN;

문자열: String

문자열을 나타낸다.
작은따옴표('), 큰따옴표(") 뿐만 아니라 ES6의 템플릿 문자열도 지원한다.

let str: string;
let red: string = 'Red';
let green: string = "Green";
let myColor: string = `My color is ${red}.`;
let yourColor: string = 'Your color is' + green;

배열

순차적으로 값을 가지는 일반 배열을 나타낸다.
배열은 다음과 같이 두 가지 방법으로 타입 선언 가능

//문자열만 가지는 배열
let fruits: string[] = ['Apple', 'Banana', 'Mango'];
//Or
let fruits: Array<string> = ['Apple', 'Banana', 'Mango'];

// 숫자만 가지는 배열
let oneToSeven: number[] = [1, 2, 3, 4, 5, 6, 7];
// Or
let oneToSeven: Array<number> = [1, 2, 3, 4, 5, 6, 7];

유니언 타입(다중 타입)의 '문자열과 숫자를 동시에 가지는 배열'도 선언할 수 있다.

let array: (string | number) [] = ['Apple', 1, 2, 'Banana', 'Mango', 3];
//Or
let array: Array<string | number> = ['Apple', 1, 2, 'Banana', 'Mango', 3];

배열이 가지는 항목의 값을 단언할 수 없다면 any를 사용할 수 있다.

let someArr: any[] = [0, 1, {}, [], 'str', false];

인터페이스(Interface)나 커스텀 타입(Type)을 사용할 수 있다.

interface IUser{
  name: string,
  age: number,
  isValide: boolean
}
let userArr: IUser[] = [
  {
    name: 'Neo',
    age: 85,
    isValid: true
  },
  {
    name: 'Lewis',
    age: 52,
    isValid: false
  },
  {
    name: 'Evan',
    age: 36,
    isValid: true
  }
];

유용하진 않지만, 다음과 같이 특정한 값으로 타입을 대신해서 작성할 수도 있다.

let array = 10[];
array = [10];
array.push(10);
array.push(11); // Error - TS2345

읽기 전용 배열을 생성할 수도 있다.

readonly 키워드나 ReadonlyArray 타입을 사용하면 된다.

let arrA: readonly number[] = [1, 2, 3, 4];
let arrB: ReadonlyArray<number> = [0, 9, 8, 7];

arrA[0] = 123; // Error - TS2542: Index signature in type 'readonly number[]' only permits reading.
arrA.push(123); // Error - TS2339: Property 'push' does not exist on type 'readonly number[]'.

arrB[0] = 123; // Error - TS2542: Index signature in type 'readonly number[]' only permits reading.
arrB.push(123); // Error - TS2339: Property 'push' does not exist on type 'readonly number[]'.

튜플: Tuple

Tuple 타입은 배열과 매우 유사하닫.
차이점이라면 정해진 타입의 고정된 길이(length) 배열을 표현한다.

let tuple: [string, number];
tuple = ['a', 1];
tuple = ['a', 1, 2]; // Error - TS2322
tuple = [1, 'a']; // Error - TS2322

다음과 같이 데이터를 개별 변수로 지정하지 않고, 단일 Tuple 타입으로 지정해 사용할 수 있다.

// Variables
let userId: number = 1234;
let userName: string = 'HEROPY';
let isValid: boolean = true;

// Tuple
let user: [number, string, boolean] = [1234, 'HEROPY', true];
console.log(user[0]); // 1234
console.log(user[1]); // 'HEROPY'
console.log(user[2]); // true

나아가서 위 방식을 활용해서 다음과 같은 Tuple 타입의 배열(2차원 배열)을 사용할 수 있다.

let users: [number, string, boolean][];
// Or
// let users: Array<[number, string, boolean]>;

users = [[1, 'Neo', true], [2, 'Evan', false], [3, 'Lewis', true]];
역시 값으로 타입을 대신할 수 있다.
let tuple: [1, number];
tuple = [1, 2];
tuple = [1, 3];
tuple = [2, 3]; // Error - TS2322: Type '2' is not assignable to type '1'.

Tuple은 정해진 타입의 고정된 길이 배열을 표현하지만, 이는 할당(Assign)에 국한된다.
.push()나 .splice()등을 통해 값을 넣는 행위는 막을 수 없다.

let tuple: [string, number];
tuple = ['a', 1];
tuple = ['b', 2];
tuple.push(3);
console.log(tuple); // ['b', 2, 3];
tuple.push(true); // Error - TS2345: Argument of type 'true' is not assignable to parameter of type 'string | number'.

배열에서 사용한 것과 같이 readonly 키워드를 사용해 읽기 전용 튜플을 생성할 수도 있다.

let a: readonly [string, number] = ['Hello', 123];
a[0] = 'World'; // Error - TS2540: Cannot assign to '0' because it is a read-only property.

열거형 Enum

Enum은 숫자 혹은 문자열 값 집합에 이름(Member)을 부여할 수 있는 타입으로, 값의 종류가 일정한 범위로 정해져 있는 경우 유용.
기본적으로 0부터 시작하며 값은 1씩 증가

enum Week {
  Sun,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat
}

수동으로 값 변경 가능하고 값을 변경한 부분부터 다시 1씩 증가.

Enum타입의 재밌는 부분은 역방향 mapping 지원
이것은 열거된 멤버로 값에, 값으로 멤버에 접근할 수 있다는 것을 의미.

enum Week {
  // ...
}
console.log(Week);
console.log(Week.Sun); // 0
console.log(Week['Sun']); // 0
console.log(Week[0]); // 'Sun'

추가로 enum은 숫자 값 열거뿐만 아니라 문자열 값으로 초기화 할 수 있다. 이 방법은 역방향 맵핑 불가능 개별적으로 초기화해야함.

enum Color {
  Red = 'red',
  Green = 'green',
  Blue = 'blue'
}
console.log(Color.Red); // red
console.log(Color['Green']); // green

모든 타입 : Any

Any는 모든 타입 의미.
따라서 일반적인 자바스크립트 변수와 동일하게 어떤 타입의 값도 할당 가능
외부 자원을 활용해 개발할 때 불가피하게 타입을 단언할 수 없는 경우, 유용하다.

let any: any = 123;
any = 'Hello world';
any = {};
any = null;

다양한 값을 포함하는 배열을 나타낼 때 사용할 수도 있다.

const list: any[] = [1, true, 'Anything!'];
profile
김민지
Welcome~!
이전 포스트

Angular_7 : 컴포넌트, 모듈

다음 포스트

promise(메모장)

0개의 댓글