타입스크립트(Typescript)의 기본타입
타입스크립트는 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있다.
타입스크립트의 기본 타입에는 크게 12가지가 있다.
- String
- Number
- Boolean
- null
- Object
- Array
- Tuple
- undefined
- Enum
- any
- void
- never
사용법은 변수나 함수 옆에 :타입이름 를 선언해서 사용하면 되고,
: 를 사용하여 코드에 타입을 정의하는 방식을 타입 표기 (Type Annotation)라고 한다.
String
// 자바스크립트 변수의 타입이 문자열인 경우
const str: string = 'hello';
Number
// 자바스크립트 변수의 타입이 숫자인 경우
const num: number = 123;
Boolean
// 자바스크립트 변수의 타입이 진위 값인 경우
// true, false 외에는 타입에러가 난다.
const isTrue: boolean = true;
Object
object는 interface, class의 상위 타입으로
Java에서 최상위 클래스가 Object클래스인 것처럼 Javascript에서 최상위 객체는 object이다.
// 객체의 타입을 정의 할 경우
const obj: object = { name:'NAME', age: 28};
obj = {A: 'A', b: 'B'};
타입을 object로 정의하면 any타입처럼 모든 타입의 값을 할당할 수 있어,
타입 검사한 Typescript를 사용한 목적이 애매해진다.
interface로 구현
객체의 타입을 명확하게 정의하기 위해 interface로 구현할 수 있다.
interface IUser {
name: string,
age: number
};
let obj: IUser = { name: 'NAME', age: 28 };
// name은 문자열, age는 숫자만 할당할 수 있는 타입을 만들 수 있다.
type으로 구현
객체의 타입은 interface와 유사한 type으로도 구현할 수 있다.
type UserType = {
name: string,
age: number
};
let obj: UserType = { name: 'NAME', age: 28 };
// interface와 마찬가지의 객체의 타입을 만들 수 있다.
Interface와 Type의 가장 큰 차이점은 확장 가능/불가능 이다.
인터페이스는 확장이 가능한데, 타입은 확장이 불가능하다.
때문에 가급적 확장 가능한 인터페이스로 선언하면 좋다.
Array
// 타입이 배열인 경우 타입선언
const arr: number[] = [1,2,3];
const arr2: string[] = ['일','이','삼'];
// 타입이 배열인 경우 제네릭 사용하여 타입선언
const arr: Array<number> = [1,2,3];
const arr2: Array<string> = ['일','이','삼'];
Tuple
튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식
const arr: [string, number] = ['hello', 10];
만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류발생
arr[1].concat('!'); // Error
arr[5] = 'hi'; // Error
Enum
이넘은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정값(상수)들의 집합을 의미함
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;
이넘은 인덱스 번호로도 접근할수 있다.
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers[0];
만약 원한다면 이넘의 인덱스를 사용자 편의로 변경하여 사용할 수도 있다.
enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor
any
기존 자바스크립트로 구현되어 있는 웹 서비스코드에 타입스크립트를 접진적으로 적용할 때
활용하면 좋은 타입이다.
단어 의미 그대로 모든 타입에 대해 허용한다는 의미이다.
const str: any = 'hello';
const num: any = 10;
const arr: any = ['a', 2, true];
void
반환값이 없는 함수의 반환타입으로
return이 없거나, return이 있더라도 반환하는 값이 없으면 함수의 반환타입을 void로 지정한다.
function printSomething(): void {
console.log('sth');
}
function returnNothing(): void {
return;
}
Never
// 함수 끝에 절대 도달하지 않는다는 의미를 가진 타입
function neverEnd(): never {
while(true) {
}
}
참고 - 타입스크립트 핸드북
'프로그래밍 언어 > TypeScript' 카테고리의 다른 글
[TypeScript] 클래스 (0) | 2024.04.09 |
---|---|
[TypeScript] Union Type (0) | 2024.04.09 |
[TypeScript] 인터페이스 (0) | 2024.04.09 |
[TypeScript] 함수 (0) | 2024.04.09 |
[TypeScript] 타입스크립트 개념과 사용이유 (0) | 2024.04.01 |