1. Primitive 타입
- 원시(primitive) 데이터 타입
number,string,boolean을 명시적으로 설정한 변수 선언은 아래와 같이 작성한다.
// 명시적으로 number 타입을 설정
let productId : number = 124981;
// 명시적으로 string 타입을 설정
let productName : string = 'VR 글래스';
// 명시적으로 boolean 타입을 설정
let isWaterprofing : boolean = false;2. Array 타입
- 배열 타입은 두 가지 방법으로 쓸 수 있다. 첫 번째 방법은 배열 요소들을 나타내는 타입 뒤에
[]를 쓰는 것이다.
let list: number[] = [1, 2, 3];- 두 번째 방법은 제네릭 배열 타입을 쓰는 것이다.
let list: Array<number> = [1, 2, 3];- 배열(array) 타입 할당 조건을 명시적으로 선언하는 방법은 아래와 같다.
// 오직 숫자 아이템만 허용
let nums : number[] = [100, 101, 102];
// 오직 문자 아이템만 허용
let strs : string[] = ['ㄱ', 'ㄴ', 'ㄷ'];
// 오직 불리언 아이템만 허용
let boos : boolean[] = [true, false, true];
// 모든 데이터 타입을 아이템으로 허용
let anys : any[] = [100, 'ㄴ', true];
// 특정 데이터 타입(숫자 또는 문자)만 아이템으로 허용
let selects : (number|string)[] = [102, 'ㅇ'];3. Tuple 타입
- Tuple은 각 요소의 타입과 개수(길이)가 고정된 배열을 저장하는 타입이다. 또한 정해진 인덱스의 요소와 타입이 일치해야 한다.
let x: [string, number];
x = ['hello', 10]; // 성공
// Type 'number' is not assignable to type 'string'.
// Type 'string' is not assignable to type 'number'.
x = [10, 'hello']; // 오류- 아래 arr의 첫 번째 인덱스 값에 concat 이라는 string 전용 메서드를 사용하게 되면 에러가 발생한다.
let arr : [string, number] = ['Hi', 6];
arr[1].concat('!'); // Error, 'number' does not have 'concat'- 또한 정의하지 않은 인덱스를 호출 시 에러가 발생한다.
let arr : [string, number] = ['Hi', 6];
arr[3] = 'hello'; // Error, Property '3' does not exist on type '[string, number]'4. Enum 타입
-
TypeScript는 열거형(enum) 데이터 타입을 지원한다.
enum은 정해진 값(상수)을 가지는 집합을 표현하고, 이것을 타입으로 사용할 수 있도록 한다. 숫자, 문자를 대신해서 의미가 부여된 레이블처럼 값을 지정할 수 있으므로 코드의 가독성을 높여주는 장점이 있다. -
열거된 각 레이블은 별도의 값이 설정되지 않은 경우 기본적으로 0부터 시작한다.
// 값 미할당
enum Team {
Manager, // 0
Planner, // 1
Developer, // 2
Designer, // 3
}
let sarha : number = Team.Designer;
console.log(sarha) // 3-
enum에 설정된 레이블에 값을 할당할 수도 있으며, 값이 할당되지 않은 레이블은 이전 레이블의 값에 +1 된 값이 설정된다. -
문자 열거형은 각 레이블에 모두 문자값을 지정해야 한다. 문자 열거형은 숫자가 아니어서 자동으로 1씩 증가할 수 없으므로 모든 레이블에 명시적으로 값을 부여해야 한다.
// 값 할당
enum Team {
Manager = 101,
Planner = 208,
Developer = 302,
Designer, // 302 + 1
}
let yamoo9 : number = Team.Manager;
console.log(yamoo9) // 101
let sarha : number = Team.Designer;
console.log(sarha) // 303
let role : string = Team[302];
console.log(role) // 'Developer'5. any 타입
- 어떤 타입을 할당해야 할 지 알지 못하는 경우
any로 타입 지정하게 되면 형식 검사를 수행하지 않아 어떤 타입도 할당 가능하도록 할 수 있다.
// 명시적으로 any 타입 지정
let productId : any = 124981;
// any 유형이 설정되었으므로 어떤 유형도 값으로 할당 가능
productId = 'p9023412';6. void 타입
void타입은 보통 결과값을 리턴하지 않는 함수의 타입을 지정할 때 사용하며, any 타입의 반대 타입이다. 반면 결과 값을 리턴하는 함수의 경우 명시적으로 반환 값의 타입을 지정할 수 있다.
let unknown : void = undefined;
// 리턴 값 타입이 명시적으로 설정되지 않는 함수
function assignClass(name: string) : void {
document.documentElement.classList.add(name);
}
// 리턴 값 타입이 숫자인 함수
const factorial = (n: number) : number => {
if (n < 0) {
return 0;
}
if (n === 1) {
return 1;
}
return n * factorial(n - 1);
}
// 리턴 값 타입이 문자인 경우
function repeat(text: string, count: number = 1) : string {
let result: string = "";
while (count--) {
result += text;
}
return result;
}7. null / undefined 타입
-
JavaScript에서
null,undefined는 데이터 타입 이자 하나의 값이다. TypeScript에서도 하나의 타입으로 처리 되며 아래와 같이 사용할 수 있다. -
null은 '객체가 없음'을 나타내는 값으로, TypeScript에서null은 타입으로도 사용된다.undefined는 '할당한 값이 없음'을 나타내는 값이자 타입이다.
let nullable : null = null;
let undefinedable : undefined = undefined;- 하지만 null로 명시적 타입이 설정된 변수에 null이 아닌 값이 할당되면 다음과 같은 오류를 출력한다.
// [오류]
// [ts] 'undefined' 형식은 'null' 형식에 할당할 수 없습니다.
// let nullable: null
nullable = undefined;- 이와 같이 엄격하게 오류를 출력하는 이유는 tsconfig.json에 다음과 같이 설정되어있기 때문이다. 설정 값을
false로 설정할 경우 위와 같은 오류가 발생하지 않는다.
"strictNullChecks": true, /* 엄격한 null 검사 사용 */- "strictNullChecks": true 설정 시, 모든 데이터 타입은
null,undefined를 할당 받을 수 없다. 그러므로 아래와 같은 코드 구문은 오류를 출력한다.
// [오류]
// [ts] 'null' 형식은 'string' 형식에 할당할 수 없습니다.
// let assign_name: string
let assign_name:string = null;
if (!assign_name) {
assign_name = '미네랄';
}8. never
never는 일반적으로 함수의 리턴 타입으로 사용된다. 함수의 리턴 타입으로never가 사용될 경우, 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미한다. 이는 무한 루프(loop)에 빠지는 것과 같다.
// 항상 오류 발생
function invalid(message : string): never {
throw new Error(message);
}
// never 타입을 결과 추론(Inferred)
function fail() {
return invalid('실패');
}
// 무한 루프
function infiniteAnimate(): never {
while (true) {
infiniteAnimate();
}
}never타입을 지정한 변수에never가 아닌 타입은 할당할 수 없다.
let never_type : never;
// 오류 발생: 숫자 값을 never 타입 변수에 할당할 수 없습니다.
never_type = 99;
// 함수의 반환 값이 never 타입 이기 때문에 오류가 발생하지 않습니다.
never_type = (function (): never {
throw new Error("ERROR");
})();9. 타입 단언(Type assertions)
-
타입 단언(Type assertions)은 개발자가 해당 타입에 대해 확신이 있을 때 사용하는 타입 지정 방식이다. 다른 언어의 타입 캐스팅과 비슷한 개념이며 타입스크립트를 컴파일 할 때 특별히 타입을 체크하지 않고, 데이터의 구조도 신경쓰지 않는다.
-
타입 단언은 기본적으로
as키워드를 이용해서 정의할 수 있다.
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;- 아래의 코드에서 이 객체에 타입 표기 방식으로 타입을 정의하려고 하면 에러가 발생한다.
interface Hero {
name: string;
age: number;
}
const capt: Hero = {}; // X. 오류 발생
capt.name = '캡틴';
capt.age = 100;- 왜냐하면
capt변수가 정의되는 시점에서name,age등의 속성이 정의되지 않았기 때문이다. 이는 아래와 같이 코드를 변경하여 타입 오류를 해결할 수도 있다.
interface Hero {
name: string;
age: number;
}
const capt: Hero = {
name: '캡틴',
age: 100
};- 하지만, 기존 코드의 변경 없이
as키워드로 타입 문제를 해결할 수 있다.
interface Hero {
name: string;
age: number;
}
const capt = {} as Hero; // 오류 없음
capt.name = '캡틴';
capt.age = 100;
FE Developer