[Develog] 타입스크립트 기초

1. 타입스크립트란?

자바스크립트에 타입이 추가된 문법이다.

자바스크립트는 자료형이 동적이기 때문에 프로젝트 실행 전에는 어떤 오류가 있을지

파악하기 어렵기 때문에 유지보수가 어렵지만

타입스크립트는 자료형을 정적으로 할당하기 때문에 IDE에서 컴파일 타임에 에러를 빨간 줄로 미리 알려줄 수 있다.

 

TypeScript : 변수의 타입이 컴파일 타임에 결정됨
JavaScript: 변수의 타입이 런타임에 결정됨

*컴파일 타임: 작성한 소스코드가 (js, binary 등으로) 변환되는 과정
*런타임: 프로그램이 실행되는 과정

 

2. 타입스크립트를 사용하는 이유

	장점	단점
TypeScript	1. Microsoft에서 만들었고 꾸준히 업데이트한다. 2. 생태계가 크다. 3. Microsoft에서 개발한 vscode와 잘 맞는다. 4. 대부분의 lib에서 타입 정의 파일을 제공한다. 5. 유지보수가 JS보다 유리하다.	1. Javascript에 비해 어렵다.
JavaScript	1. 다른 언어에 비해 쉽다. 2. 적은 양의 코딩을 할 때 쉽고 빠르게 가능하다.	1. 런타임 시 오류가 검출된다. 2. 프로젝트 사이즈가 커지면 유지보수가 어렵다.

 

 

3. 유지보수가 유리한 이유

- 타입을 알기 때문에 IDE에서 에러 파악
- 자동 완성 가능

 

4. 타입의 종류

• String : 말 그대로 문자열

let str: string = 'TypeScript';

str = 123; // Error
str = true; // Error
str = undefined; // Error

let fullName: string = `NBC`;
let age: number = 10;
let sentence: string = `my name is ${fullName}. I'm ${age + 1} years old`;

• Number : 숫자형

let num: number = 123;

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

• Boolean : 참/거짓

let isTrue: boolean = true;
let isFalse: boolean = false;

• Array : 배열

let arr: number[] = [1, 2, 3];
let array: Array<number> = [1, 2, 3];

let arr2: string[] = ['1', '2', '3'];
let arr3: boolean[] = [true, false, true];

• Tuple : 요소의 타입과 개수가 고정된 배열을 표현할 때 사용

let x: [string, number];
x = ['hi', 1];
x = [1, 'hi']; // Error -> 타입이 고정되어 있기 때문에
console.log(x[0], x[1]);
console.log(x[2]); // Error -> 개수가 고정되어 있기 때문에

x[2] = 'world'; // Error -> 개수가 고정되어 있기 때문에

let tuple: [string, number, boolean] = ['str', 1, false];

• Any : 자바스크립트처럼 동적인 타입, 뭐든지 올 수 있지만 남발하면 타입스크립트의 의미가 무색해진다.

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

• Void : 함수에서 반환 값이 없을 경우 사용

function c(): void {
  console.log('c');
}

• Null, Undefined :  Union 타입과 함께 사용

// 아래 코드를 제외하고 이 변수들에 할당할 수 있는 값이 없습니다!
let a: null = null;
let b: undefined = undefined;

//따라서 아래와 같은 Union타입과 함께 사용합니다.
let unionType: number | null = null;

• Never: 거의 사용 안함. 비정상적 종료가 되거나 함수가 끝까지 실행되지 않을 경우

function a(): never {
  while (true) {

  }
}

function b(): never {
	throw new Error('Error');
}

그 외 Object, Enum 타입도 있음

 

5.  느낀점

타입스크립트 이름만 들었을 때 너무 어려울 것 같아서 겁을 많이 먹었는데

막상 배워보니 기존에 배웠던 C, C#, 파이썬처럼 자료형을 부여하면 되는 거였다.

브라우저에서는 타입스크립트를 인식하지 못하기 때문에 자바스크립트로 변환화는 과정이 필요한데

이 점이 조금 번거롭지만 그래도 코드가 명확해지는 느낌이 들어 매우 맘에 든다.