타입스크립트(TypeScript) 타입 정리

타입스크립트 공식 문서 > https://www.typescriptlang.org/docs/handbook/basic-types.html

1. 원시타입

• javaScript는 정수를 위한 런타임 값을 별도로 가지지 않으므로, int 또는 float과 같은 것은 존재하지 않습니다. 모든 수는 단순히 number입니다

// 문자열 선언
const name: string = '홍길동';
// 숫자 선언
const age: number = 30;
// 진위값 (true, false)
const flag: boolean = true;

2. 배열

// 문자 배열 선언
const names: Array<string> = ['홍길동', '이순신', '율곡이이'];
// 숫자 배열 선언
const ages: Array<number> = [30, 40, 50];
// 선언 축약
const arrs: string[] = ['문자', '배열', '선언', '동일'];

3. 객체 (Object)

// 객체 형식 타입 지정
const tmp: object = {};
const obj: object = {
	name : '홍길동',
  	age : 30
};

// 객체의 속성 및 타입을 직접 지정
const obj: {name: string, age: number} = {
	name : '홍길동',
  	age : 30
};

4. Tuple(튜플) => 배열의 길이와 타입이 고정됨, 배열의 위치(인덱스) 타입 지정

// 2차원 다중 배열
const arrs: string[string, number] = ['홍길동', 30];

// 주의 할 점 push 에 대한 값의 할당은 타입스크립트에서 거를 수 없음 - 오류 안남 주의
arrs.push("test"); 

// 아래 처럼 직접 할당할 경우는 오류남, 길이가 고정 되기 때문
arrs = ['test', 1, '33'];
// 타입이 맞지 않기 때문에 오류남
arrs[1] = "test";

5. Enum(열거형) => 전역상수로 관리되는 값을 대체 할 수 있음, 지정된 라벨 위치 부터 0 ~ N 의 숫자가 할당됨

// Role AA = 0, BB = 1, CC = 2 의 숫자가 자동으로 할당
enum Role {AA, BB, CC};

// 예시
const test = Role.AA;
if (test === Role.AA ) { ... } ;

// 컴파일된 js 파일 내용
var Role;
(function (Role) {
	Role[Role["AA"] = 0] = "AA";
  	Role[Role["BB"] = 1] = "BB";
  	Role[Role["CC"] = 2] = "CC";
})(Role || (Role={}));

// enum 시작 값을 변경 하고 싶은경우 ( 결과 적으로 5, 6, 7 의 값이 할당됨)
enum Role {AA = 5, BB, CC};

// 텍스트 및 숫자 지정 혼합도 가능함
enum Role {AA = 5, BB = 100, CC = 300};     
enum Role {AA = "aa", BB = 100, CC = "cc"};

JS 에는 없고 TS 에서만 존재함 => Tuple(튜플), Enum(열거형)

6. any ( * ) => 가장 유연한 타입, 모든 종류의 값을 처리 할 수 있음
-> 타입스크립트가 주는 장점을 상쇄 시키기 때문에 자주 쓰지않는게 좋음

// any 타입만 지정
const a:any;

// any 배열 타입
let a:any[];
// 배열이 아닌 일반 문자열로 선언한다면 오류 남, 배열로 할당할 경우 오류 나지 않음
a = "hi"; -> a = ["hi"];

7. 함수 매개변수 타입 지정 + 리턴 타입 지정
-> 리턴 타입은 굳이 설정할 이유가 없다면 타입 추론을 하기 때문에 생략 해도 됨.

// 함수 파라미터(a, b) 타입 지정      / 리턴 값 타입 지정 
const func(a: number, b: number): number {
	return a+b;
};
func(10, 20);

// 옵셔널 (?) 파라미터 지정
const func2(a: number, b?: number): number {
	return a || b;
};
func2(10)

// 함수의 반환 값이 없을 경우 - void 
const func3(a: number): void {
  console.log(a);
}
func3(10)

// 함수의 반환 값을 실제로 명시 하지않은 경우 - undefined 
const func4(a: number): undefined {
  ...
  return;
}
func4(10)

8. UNION 타입 => 두가지 이상의 다른 타입을 동시에 사용 가능 하도록 할 수 있음, 파이프라인 기호( | )로 사용

// 다른 타입을 받을 수 있음을 명시 ( 원하는 만큼 명시 가능 )
const func(a: number | string, b: number | string | boolean) {
	 ... 
};
func(10, 20);
func("test", true);

9. literal(리터럴) 타입 => 지정된 특정 문자들만 값을 허용함.

// 리터럴 타입과 유니언 타입을 설정 가능
const func(a: 'AA' | 'BB') {
	 ... 
};
func('AA');
// 지정된 값과 다를 경우 오류 ( 오타 또는 유효 하지 않는 값을 거를 수 있음 )
func('AAA');

10. TYPE ALIAS 타입 생성 => 반복적인 타입의 관리를 위해 사용자 정의 타입 생성

// 타입 생성
type TestValue = string | number;
let test:TestValue;

// 오브젝트 타입 사용
type ArrTest = {name: string , age:number}
const func(info:ArrTest) {
	console.log(info.name); 
};

11. 함수형 타입 설정

const func(a: number, b: number): number {
	return a+b;
};

// 일반 적인 함수형 , 넘어온 함수의 매개변수 인자를 체크 할 수 없음. (any 타입의 함수로 생성됨)
const funcCopy: Function = func;

// 선언된 함수와 동일한 타입의 매개변수 및 리턴 값 설정
let funcCopy2: (a: number, b: number) => number;
funcCopy2 = func;

12. unkown 타입 => 사용자가 무엇을 입력할지 모르는 상태
-> any 보다 나은 이유 : 할 수 없는 작업을 알 수 있도록 타입 검사 수행 가능

// 할당 값은 모든 타입이 허용됨 any 타입 보다는 제한적
let unkownValue: unkown;
unkownValue = 1;
unkownValue = "TEST";
unkownValue = false;

// any 와 unkown 차이
let testValue: string;
let anyValue: any;

unkownValue = "TEST";
anyValue = "TEST2";

// 해당 코드 오류남
testValue = unkownValue; 
// 오류 안남
testValue = anyValue;    

// unkown 오류 없애기 위해서는 typeof 로 타입 비교 필요
if (typeof unkownValue == "string") testValue = unkownValue;

12. never 타입
-> 함수가 아무것도 반환하지 않고 스크립트를 충돌시키거나 취소될 경우 사용함.

// void는 단순히 아무것도 리턴하지 않는다 라고 명시하기 때문에 리턴값이 없어도 void 보단 never를 사용하는게 좋음
const func(message: string, code: number): never {
  throw {message: message, errorCode: code} ;
}
func3('error !', 500);