Typescript

목차

• Typescript 정의
• 변수선언
• 기본타입
• 객체타입
• 내장객체
• 함수(Functional)타입
• any / unknown / never
• 타입정의하기
• 타입구성하기
• Union 타입
• Generic 타입

---

 

 

Typescript 정의

타입스크립트는 마이크로소프트에서 개발한 언어다.

자바스크립트 코드에 타입 시스템을 도입하여 런타임에 에러가 발생할 가능성이 있는 코드를 찾아준다.

즉, 자바스크립트에 구문을 추가하여 만든 언어다.

 

tsc 명령으로 컴파일하여 자바스크립트로도 바로 변환 가능하다.

해당 컴파일로 생성된 자바스크립트는 타입이 없다.

왜냐..? 원래 없기 때문이다.

 

변수선언

- 타입스크립트의 변수 선언 방식은 아래와 같다.

[선언키워드] [변수명]:[타입]

 

- 선언키워드 종류

- const : 선언 후 값 수정이 불가능하다.

- let : 선언 후 값 수정 가능, 사용 전에 값을 할당 해야한다.

- var : 선언 후 값 수정 가능, 사용 후에 값 선언이 가능하다.

//const 틀린 예제
const yunji = 1;
yunji = 2;


//let 틀린 예제
yunji2 = 'test';
let yunji2 : string;

//let 맞는 예제
let yunji3 : string;
yunji3 = 'test';

// var 예제
var yunji4 = 'var test';
var yunji4 : string;

var yunji5 : string;
yunji5 = 'var test';

 

기본타입

typeof	설명	할당가능 값
boolean	참, 거짓	true, false
null	유효하지 않음	null
undefined	변수 선언만 하고 값을 할당하지 않을 때 발생. 값이 존재하지 않음	undefined
number	64비트 형식의 숫자값	-2^52-1 ~ 2^53-1 의 값 NaN(Not a Number)
bigint	number의 범위를 넘어서는 정수표현	정수 끝에 n을 추가한다. ex) const x = 2n ** 53n;
string	문자열. 변경불가능	홑따옴표 또는 쌍따옴표로 둘러싸인 문자열 ex) 'hello', "hello"
symbol	유일하고 변경 불가능한 기본값 객체 속성의 키로 사용할 수 있다.

 

객체타입

객체 타입은 속성(property)를 가지고 있는 데이터 컬렉션을 의미한다.

C언어의 구조체와 유사하다고 하는데 나는 C언어를 하지 않았으므로....넘어간다..

속성 값은 키와 값으로 표현되는데, 해당 값들은 자바스크립트의 타입을 가지고 있다.

예를보자.

const yunji = {
	name : 'yunji',
    age : 20,
    hobby : ['movie','dance']
}

내장객체

자바스크립트에도 개발시 유용한 내장객체들이 있다.

대표적으로 아래와 같은 것들이 있으며, 더 많은 정보는  MDN 문서에서 확인 가능하다.

Date : UTC 자정과의 시간차이를 밀리초 단위로 나타낸 값으로 시간을 다룰 때 사용한다.

Array(배열) : 1가지 이상의 값을 표현할 때 사용한다. 위처럼 [ ] 대괄호로 감싸서 표현한다.

Collection : Map,WeakMap = 키와 값을 가진 컬렉션 객체, Set,WeakSet = 유일한 값으로 이루어진 컬렉션 객체

JSON : 자바스크립트에서 파생된 경량 데이터 교환 형식이지만 현재 많은 프로그래밍 언어에서 다뤄진다.

 

함수(Function) 타입

자바스크립트는 함수를 변수에 할당하거나 다른 함수의 인자로 전달가능하다.

함수의 결과로 반환할 수도 있다.

함수의 타입을 검사하면 function이 된다.

typeof func === "function"

 

any / unknown / never

타입스크립트에는 특수한 타입이 있다.

any	unkown	never
자바스크립트와 같이 어떠한 타입의 값도 받을 수 있는 타입이다. any 타입의 객체 또한 어떤 타입의 변수에도 할당 가능하다. 이런 특성 때문에 런타임에 오류가 발생할 수 있다.	any와 같이 어떤 타입도 할당 가능하지만 다른 변수에 할당 또는 사용할 때 타입을 강제하도록 하여 any가 일으키는 오류를 줄여준다.	never 타입의 변수에는 어떠한 값도 할당할 수 없다. 함수의 리턴타입으로 지정할 경우 함수가 어떤 값도 반환하지 않는 다는 것을 뜻한다. 특정 타입의 값을 할당하지 못하도록 사용하는 데 유용하다.

 

타입정의하기

타입스크립트는 타입을 정의하여 사용할 수 있다.

기본타입과 같은 타입을 정의한다는 뜻은 아니며, 위에서 설명했던 타입을 조압하여 타입에 이름을 붙여 사용한다.

Java에서 객체라고 생각하면 이해가 빠를 듯하다.

아래 코드를 VScode에 작성하고 User에 가져다대면 추론된 타입이 나온다.

const user = {
    name: 'yunji',
    age: 21,
}

//추론된 타입
const user: {
    name: string;
    age: number;
}

위처럼 변수에 객체를 바로 할당하지 않고 interface로 정의할 수 있다.

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

const user: User = {
    name: 'yunji',
    age: 21,
}

interface는 class로 선언할 수도 있다.

class User {
  constructor(name: string, age: number) { }
}

const user: User = new User('yunji', 21);

이때 생성자에 선언된 변수는 클래스의 멤버변수가 된다. 접근제한자가 없으면 public 변수이며 멤버변수를 사용할 때는 this.name 처럼 this와 함께 사용한다.

 

타입은 type 키워드로 새로운 타입을 만들 수 있다.

type Yunji = User;

위 코드는 User를 그대로 사용하지만, 내가 사용하는 도메인에 맞게 이름을 바꾼 것이다.

 

타입구성하기

자바스크립트는 변수에 어떠한 값도 할당할 수 있다.

이를 덕 타이핑이라하는데 타입스크립트로 여러 타입의 값을 할당할 수 있다.

여러 타입을 조합한 새로운 타입을 가지는 것을 의미한다.

 

유니언(Union) 타입

유니언 타입이 위에서 설명한 여러타입을 조합한 타입을 의미한다.

아래 코드에서 getLength의 인자인 obj는 string 타입 일수도 string 배열 타입일 수도 있다.

function getLength(obj: string | string[]){
	return obj.length
}

이런 유니언 타입을 활용하면, 변수가 가질 수 있는 값을 제한할 수도 있다.

type Status = "ready" | "waiting";

위 코드는 열거형인 enum 으로도 표현가능하다.

enum Status{
	READY = "ready",
    WAITING = "waiting"
}

 

제네릭(Generic) 타입

자바의 제네릭과 유사한 기능을 한다.

어떠한 타입이든 정의될 수 있지만 호출되는 시점에 타입이 결정된다.

만약 다음과 같이 인자를 그지로 리턴하는 함수가 있다고 하자.

function identity(arg: any) : any{
	return arg;
}

이함 수의 반환값은 any로 되어있기 때문에 arg에 'test'를 인자로 전달할 경우 인자가 반환될 때 any가 되어버린다.

반면 다음과 같이 제네릭 타입을 사용하면 리턴되는 값의 타입은 호출하는 시점의 인자로 넣은 타입으로 결정되도록 할 수 있다.

function identity<T> (arg: T): T{
	return arg;
}