본문 바로가기
Frontend

Typescript | Typescript가 대체 뭐야??

by 구라미 2020. 1. 20.

 

 

하도 여러군데에서 typescript이야기를 많이 해서 늘 궁금해왔는데 또 깃허브에서 내가 팔로하고 있는 개발자들의 리파지토리를 보면 ts확장자로 되어있는 파일들을 많이 본적이 있었음.. 그래서 대체 뭐냐! 하고 찾아보았더니

 

https://www.youtube.com/watch?v=fO5fO-gelfA

 

어제 이 노마드코더의 이 영상을 보고 꼭 한번 해봐야겠다고 마음먹었음! 사실 이 이전에 typescirpt 명세에 대해 간략하게 기술된 gitbook을 즐겨찾기 해두긴 했었는데 역시 직접 쳐보기 전까지 와닿지는 않는 것 같음.

 

 

 

 

Typescript는?

typescript는 Microsoft에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어이다.
대규모 앱프로젝트를 하는데 JavaScript가 어렵고 불편하다는 불만에 대응하기 위해 개발이 되었다.
TypeScript는 스크립트 언어의 표준인 ECMA Script (줄여서 ES) 의 표준을 따르기 때문에 JavaScript영역을 침범하지 않고 최신 ES를 지원한다.

 

자료형이 딱히 없는 js와 다르게 typescript는 자료형(type)을 지정한다. 그렇기 때문에 안정성이 확보되고 낭비가 줄어든다.

 

Typescript의 기본타입

//Bool형
let isDone: boolean = false;

//숫자형
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

//문자형
let color: string = "blue";
color = 'red';

이렇게 변수명 옆에 :자료형 형식으로 어떤 특정 타입의 변수를 선언하고 그 타입에 맞는 자료형을 할당할 수 있다.

 

 

Typescript의 배열

//배열
let list: number[] = [1, 2, 3];
let list: string[] = ['a', 'b', 'c'];
let list: Array<number> = [1, 2, 3]; //제네릭 배열

위와 같이 배열도 특정 자료형 배열을 만들 수 있는데 자료형이 안맞는 배열요소를 삽입하려고 시도하면 오류가 난다.

 

 

Typescript의 튜플

튜플타입은 고정된 개수의 요소 타입을 알고 있지만 반드시 같을 필요는 없는 배열을 표현할 수 있도록 한다.

아래와 같이 쌍으로 값을 나타낼 수 있다.

//튜플 타입 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 좋아요
// 부정확한 초기화
x = [10, "hello"]; // 오류

 

 

Typescript의 Enum

JavaScript의 표준 데이터 타입 집합에 추가할 수 있는 유용하고 부가적인 추가 자료는 enum 이다.
C#와 같은 언어에서처럼 enum은 numeric 값 집합에 더 친숙한 이름을 부여하는 방법이다.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

 

 

 

 

참고: https://typescript-kr.github.io/

 

TypeScript 한글 문서

TypeScript 한글 번역 문서입니다

typescript-kr.github.io

 

'Frontend' 카테고리의 다른 글

VSCode Emmet & Fira Code 설정  (0) 2020.01.26
Javascript 싱글톤 패턴  (0) 2020.01.21
Axios에 대해서  (0) 2020.01.16
Vue | Vue 개발환경 설정  (0) 2019.12.18
꼭 기억하기 JSON  (0) 2019.10.31

댓글