TypeScipt 타입스크립트 기본 문법

I. 타입스크립트 문법

 

1. 타입스크립트는 변수, 매개변수, 리턴값에 타입을 붙인 언어

 

let a: boolean = true;	// 원시자료형
const b: { hello:string } = { hello: 'world' };	// 객체
function add(x: number, y: number): number { return x + y };	// 함수
const minus = (x: number, y: number): number => x - y;	// 화살표함수

- 명시적으로 타입을 적을 때, 대문자로 적으면 안됨 (ex) Boolean, BOOLEAN - X)

- 타입스크립트를 처음 접하는 사람들의 경우 가독성이 조금 떨어지는 코드가 될 수 있으니, 헷갈린다면 :type 을 빼고 보기

 

✨ 타입 에일리어스(type alias)

- 조금 더 복잡한 함수를 예로 들어보자.

const func: (x: number) => string = (x) => x.toString();

위와 같은 코드는 (x: number) => string 이 부분 자체가 타입이다.

하지만 이런 경우엔 가독성이 안좋아질 수 있기 때문에 이 부분을 밖으로 빼내어 정의한 다음에 사용한다.

이 때, 타입을 정의한 부분을 타입 에일리어스라고 한다.

type Func = (x: number) => string;	// 타입 에일리어스
const func: Func = (x) => x.toString();

 

 

2. 타입으로 사용 가능한 값

- 타입스크립트는 자바스크립트보다 자유도가 제한되어 있다.

- 타입스크립트는 자바스크립트보다 안정성이 높다.

 

✨ 튜플

- 배열의 예시에서 타입을 [number, string] 으로 명시해놓은 부분을 살펴보자.

이렇게 명시를 해놓는다면, 해당 배열은 항상 [number, string] 에 맞는 타입과 갯수, 순서를 가져야 하고, push 또는 pop과 같은 명령어를 사용할 수 없다. 이렇게 자료형(type), 순서, 갯수를 고정해놓은 배열이 튜플이다.

 

✨ 파이프( | )

- 또는 이라는 의미를 가짐

- string | number  =>  string 또는 number 타입을 사용 가능

 

✨ 인터페이스

- 객체, 함수, 클래스에 대한 타입, 인스턴스를 선언하는 방식 중 하나

 

 

2. any

- 타입스크립트에서 타입에 대한 정보를 명시하지 않으면 타입이 any 가 된다.

- 자바스크립트와 같이 모든 자료형으로 정의가 가능하다는 뜻

- any 를 사용하면 타입스크립트를 사용하는 의미가 없으므로 사용하지 말 것

function add(x: any, y: any) { return x + y };

 

 

3. as const

- as const를 사용하여 변수를 고정값으로 설정할 수 있다.

- as const 를 사용한 변수에 마우스를 올려보면, readonly 라고 되어있는 것을 확인할 수 있다.

 

✨ 아래 코드를 봤을 때, 변수 c 의 타입은 boolean 으로 나올 것 같지만 마우스를 올려보면  false로 나오는 것을 확인할 수 있다.

- const(변하지 않는 값 : 상수) 로 선언했기 때문이다.

const c = false;