TypeScript 시작

hb-developer·2021년 4월 22일
0

TypeScript

목록 보기
1/6

JavaScript 는 약타입 언어입니다. 형 변환이 자유롭기때문에 의도하지않은 오류가 발생하고

또 컴파일 이후에 오류를 체크할수 있습니다.

하지만 TypeScript 는 미리 타입을 지정해줌으로써 코딩중에도 쉽게 오류를 발견할수 있습니다.

타입

타입스크립트 에는 총 13가지의 타입이 있습니다.

  • 불린: Boolean
  • 숫자: Number
  • 문자열: String
  • 배열: Array
  • 튜플: Tuple
  • 열거형: Enum
  • 모든 타입: Any
  • 알 수 없는 타입: Unknown
  • 객체: Object
  • Null과 Undefined
  • Void
  • Never

타입선언

자바스크립트와 다르게 타입스크립트에서는 타입 명시를 해줘야 합니다.

let str: string = 'hi';

변수에 : type 타입을 표기 해주는것을 영어로 타입명시(Type Annotation) 라고합니다.

명시를 하지 않았을땐 어떻게 될까요 ?

let str= 'hi';

사실 명시를 하지 않는다고 해서 오류가 발생하진 않습니다.

타입스크립트 는 자체적으로 타입추론 기능을 제공하기때문에 str 에는 string 타입이 명시됩니다.

배열

잡탕과 같았던 JS배열과 달리 TS 에서 배열은 좀더 세밀한 명시가 가능합니다.

예를들어 아래와 같이 타입을 명시한뒤 배열을 만들수 있습니다.

let fruits: string[] = ['딸기','바나나','참외'] 
let fruits: Array<string> = ['딸기','바나나','참외'] 
let num: Array<number> = [1,2,3,4,5] 
let num:number[]=[1,2,3,4,5]; 

2가지 이상의 다중타입도 선언할수 있습니다.

let num : Array<string|number> =['딸기',1,'참외',2]
let num : (string | number)[] = ['딸기',1,'참외',2]

만약 자바스크립트와 같은 배열을 만드려면 any 타입을 명시합니다.

let arr: any = ['a', 2, true,{},[],(function(){})];

튜플

TS에서 배열은 같은 종류만 담는 배열 이였다면 튜플은 길이가 정해져 있는 배열입니다

let arr :[string,number,string]= ['A',1,'B'];

튜플은 타입에 명시되있는 종류의 수만큼 배열의 길이가 정해집니다.
또한 인덱스에 명시되있는 타입만 담을수 있죠

만약 임의로 무언가를 추가하고 싶으면 push 나 splice를 사용할수 있습니다.

let arr :[string,number,string]= ['A',1,'B'];
arr.push('hello');
console.log(arr);          //[ 'A', 1, 'B', 3 ]
let arr :[string,number,string]= ['A',1,'B'];
arr.splice(3,0,'hello');
console.log(arr);        //[ 'A', 1, 'B', 'hello' ]

다만 고정 인덱스가 변경된것이 아니기 때문에 3번인덱스를 출력할땐 오류가 발생합니다.

let arr :[string,number,string]= ['A',1,'B'];
arr.push('hello');
console.log(arr);
console.log(arr[3]); // 컴파일 오류 

열거

이넘(Enum)은 숫자 값을 가지는 문자열의 집합입니다.
week 이라는 enum 을 선언하고 요일을 넣으면 순서에 따라 1씩 증가하는 값을 가집니다.

enum week {
  sun, //0
  mon, //1
  tue, //2
  whe, //3
  thu, //4
  fri, //5
  sat, //6
 }

만약 임의로 숫자를 바꾸면 그 뒤의 숫자부터 다시 1씩 증가합니다.

enum week {
  mon,   //0
  tue,   //1
  whe=10,//10
  thu,   //11
  fri,   //12
  sat=50,//50
  sun    //51
}

unknown

unknown에는 어떠한 값도 넣을수 있지만 그값을 any를 제외한 나머지 타입에는 재할당 할수 없습니다.

let a:unknown = 'hello';
let b:any;
let c:number;
b = a ;        // 성공
c = a ;       // 오류

unknown 을 다시 대입하려는 타입과 동일타입으로 지정하면 대입할수 있는데 as를 사용하면 됩니다.

let a:unknown = 'hello';
let b:any;
let c:number;

c = a as number;    // 할당성공 하지만 a 자체는 여전히 unknown이다

void

void 는 어떠한 타입도 없는 빈 타입 입니다.

let warn = function () :void {
  console.log("Error");        // 보통 함수에 쓰임
}

void 를 선언 하는 이유는 반환된 값을 어떠한 곳에도 사용 하지 않겠다는 일종의 선언입니다.

let a:null ;
let b:undefined ;
let c:void;
c =a;            // 오류 발생   void 에 null 할당불가
c =b;           // void 에 undefined 는 할당 가능

void 는 대부분 리턴값이 없는 함수에 명시합니다.

never

never 에는 어떠한 값도 존재 할수 없습니다 보통 끝나지 않는 함수에 명시합니다.

function hi(): never { 
  console.log("hello"); // 끝나는 함수 이기 때문에 오류
}
function neverEnd(): never {
  while(true){
  
  } 				// 성공
}
profile
배우면 바뀐다

0개의 댓글