[TypeScript] 기본 타입

muz·2021년 4월 8일
1
post-thumbnail

TS는 JS와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 사용해 더 편리하게 쓸 수 있다.

1. Boolean(불리언)

boolean은 true/false 값을 나타낸다.

let isDone: boolean = false;

2. Number(숫자)

TS의 모든 숫자는 부동 소수 값이기에 number라는 타입을 붙인다. 16진수, 10진수, 2진수, 8진수도 지원한다.

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

3. String(문자열)

텍스트 데이터 타입을 string으로 표현하며, JS처럼 (")나 (')로 문자열 데이터를 감싸는 데에 사용한다. 템플릿 문자열이나 백틱을 사용하면 여러 줄의 문자열을 작성할 수 있고, ${expr} 같은 형태로 표현식을 포함할 수도 있다.

let color: string = "blue";
color = 'red';

let name: string = `TypeScript`;
let age: `8`;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${age} years old next month.`;
let sentence2: string = "Hello, my name is " + fullName + ".\n\n" +
    "I'll be " + (age + 1) + " years old next month.";

4. Array(배열)

배열 타입은 2가지 방법으로 쓸 수 있다.

// 1. 배열 요소들을 나타내는 타입 뒤에 `[]` 쓰기
let list: number[] = [1,2,3];

// 2. 제네릭 배열 타입 쓰기 - `Array<elemType> 
let list: Array<number> = [1,2,3];

5. Tuple(튜플)

튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있다. (단, 요소들의 타입이 모두 같을 필요는 없다.)

let x: [string, number]; // 튜플 타입으로 선언
x = ["hello", 10]; // 초기화 - 성공
x = [10, "hello"]; // 잘못된 초기화 - 오류

// 정해진 인덱스에 위치한 요소에 접근하면 해당 타입이 나타난다. 
console.log(x[0].substring(1)); // 성공
console.log(x[1].substring(1)); // 오류 (number에는 substring이 없기 때문)

// 정해진 인덱스 외에 다른 인덱스에 있는 요소에 접근 시, 오류가 발생한다.
x[3] = "world"; // 오류, '[string,number]' 타입에 프로퍼티 3이 없음
console.log(x[5].toString()); // '[string, number]' 타입에는 프로퍼티 5가 없음

6. Enum(열거)

enum은 값의 집합에 더 나은 이름을 붙여줄 수 있다. enum0부터 시작하여 멤버들의 번호를 매기며, 멤버 중 하나의 값을 수동으로 설정함으로써 번호를 바꿀 수 있다.

// 0부터 번호를 매김
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// 0이 아닌 1로 시작하게끔 할 수 있음
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

// 모든 값을 수동으로도 설정 가능함
enum Color {Red = 1, Green = 3, Blue = 6}
let c: Color = Color.Green;

특정 값이 어떤 Color enum멤버와 매칭되는지를 알고 싶을 때, 이 값을 이용하면 일치하는 enum 멤버의 이름을 알아낼 수 있다.

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName); // 값이 2인 'Green'이 출력됨

7. Any

알지 못하는 타입(사용자로부터 받은 데이터나 서드 파티 라이브러리 같은 동적인 컨텐츠로 부터 온 값들)을 표현해야 할 때, 타입 검사를 하지 않는 any를 사용할 수 있다.

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 성공

any 타입은 컴파일 중 타입 검사를 할 수도 있고 안할 수도 있다. Object로 선언된 변수들은 어떤 값이든 그 변수에 할당할 수 있게 해주는 점에서 any와 비슷한 역할을 할 수 있을 것 같지만, 실제로는 메서드가 존재하더라도 임의로 호출할 수는 없다.

let notSure: any = 4;
notSure.ifItExists(); // 성공, ifItExists는 런타임엔 존재할 것
notSure.toFixed(); // 성공, toFixed는 존재함(하지만 컴파일러는 검사하지 X)

let prettySure: Object = 4;
prettySure.toFixed(); // 오류: 프로퍼티 'toFixed'는'Object'에 존재하지 않음

Do's and Don'ts에 있듯 Object를 no-primitive object 대신 사용하지 말 것 !

또한 any 타입은 타입의 일부만 알고 전체는 알지 못할 때 유용하다. 예를 들어 여러 개의 타입들이 섞인 배열을 다룰 수 있다.

let list: any[] = [1, true, "free"];
list[1] = 100;

8. Void

void는 어떤 타입도 존재할 수 없음을 나타내므로 any와 반대 타입이다. void는 보통 함수에서 반환 값이 없음을 표현할 때 쓴다.

function warnUser: void {
	console.log("This is my warning message");
}

void를 타입 변수로 선언하는 것은 유용하지 않다. 그 변수에 null(--strictNillChecks를 사용하지 않을 때에만 해당) 또는 undefined만 할당할 수 있기 때문이다.

let unusable: void = undefiend;
unusable = null; // 성공 `--strictNullChecks`를 사용하지 않을 때만

9. Null and Undefined

기본적으로 undefinednull은 다른 모든 타입의 하위 타입이어서 number 같은 타입에 할당할 수 있다. 하지만 --strictNullChecks를 사용하면 nullundefined는 오직 any와 각자 자신들 타입에만 할당 가능하다. (예외로 undefinedvoid에 할당 가능하다.)
이러한 특성은 일반적인 에러 방지에도 도움을 준다. 이 경우 string 또는 null또는 undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefined를 사용할 수 있다.

10. Never

never 타입은 절대 발생할 수 없는 타입을 나타낸다. 예를 들어, 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키기거나 절대 반환하지 않는 반환 타입으로 쓰인다. 변수도 never 타입을 얻게 될 수 있다.
never는 모든 타입에게 할당 가능한 하위 타입이지만, 어떤 타입도 never에 할당할 수 있거나 하위 타입도 아니다.(단, never자신은 제외함) 심지어 anynever에 할당할 수 없다.

  • never를 반환하는 예제들
// never를 반환하는 함수는 함수의 마지막에 도달할 수 없음
function error(message: string): never {
	throw new Error(message);
}

// 반환 타입이 never로 추론됨
function fail() {
	return error("Something failed");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없음
function infiniteLoop(): never {
	while(true) {  }
}

11. Object(객체)

object는 원시타입(number, string, boolean, bigint, symbol, null, undefined)이 아닌 타입을 나타낸다. object를 쓰면 Object.create같은 API가 더 잘 나타난다.

declare function create(o: object | null): void;

create({ prop: 0}); // 성공
create(null); // 성공
create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류

12. Type assertions(타입 단언)

타입 단언은 개발자가 컴파일러에게 자신이 하고 있는 것에 대해 잘 안다고 말해주는 방법과 같다. angle-bracket문법과 as문법이 있다.

// angle-bracket 문법
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

// as 문법
let someValue: any = "this is a string";
let strLength: number = (someValue a string).lenght;

위의 두 예제는 같다. 선호에 맞게 선택하면 되지만 TS를 JSX와 함께 사용할 때에는 as스타일을 사용해야 한다.

profile
Life is what i make up it 💨

0개의 댓글