[TS] 타입 스크립트의 타입

타입 선언

 

타입 스크립트는 일반 변수, 매개 변수, 객체 속성 등에 :TYPE과 같은 형태로 타입을 지정한다.

 

let variable: string = "Hello World!"

 

타입 종류

 

타입스크립트는 자바스크립트와 거의 동일한 타입을 가지나 타입스크립트 고유의 타입 역시 포함한다.

 

타입	JS	TS
boolean	O	O
Number	O	O
String	O	O
Array		O
Tuple		O
Enum		O
Any		O
Void		O
Null and Undefined	O	O
Never		O
object	O	O

 

1. boolean

 

let TFVariable: boolean = true;

 

2. number

 

자바크립트와 마찬가지로 타입스크립투도 부동 소수값,

let decimal: number = 6;     // 십진법 : 6
let hex: number = 0xf00d;    // 16진법 : 61453
let binary: number = 0b1010; // 2진법 : 10
let octal: number = 0o744    // 8진법 : 484

 

3. string

 

문자열 변수. 작은 따옴표나 큰 따옴표로 선언

 

let sen: string = "hello";
sen = 'world!'

 

백틱(`)을 이용해서 여러 줄에 걸쳐 작성할 수 있고, 변수를 포함할 수도 있다.

 

let city: string = `Jeju`
let age: number = 26
let country: string = `My Hometown is ${city}
and I'm ${number} years old.`

 

4. 배열

 

배열을 사용하는 방법은 2가지가 있다.

 

평소에 배열 선언하는 것처럼 타입 뒤에 []를 쓰는 방법

 

let list: number[] = [1, 2, 3];

 

제너릭 배열 타입을 쓰는 방법 : Array

 

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

 

5. tuple

 

요소의 타입과 개수가 고정된 배열

 

let x: [string, number]

 

위와 같이 튜플을 선언할 수 있다.

위의 예시는 string와 number 자료형으로 이루어진 2개의 성분을 가지는 튜플을 선언한 것이다.

 

x = ["text", 127] // 성공
x = [127, "test"] // 실패

 

6. enum

 

C언어의 열거 자료형과 같은 자료형을 사용할 수 있다.

 

enum Color {Red, Green, Blue}
let c: Color = Color.Green

 

enum은 기본적으로 0부터 시작해서 1씩 더해간다. 위의 경우는 Red = 0, Green = 1, Blue = 2

이를 수동으로 지정하여 바꿔줄 수 있다.

 

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green

enum Color {Red = 1, Green = 3, Blue}
let c: Color = Color.Green

 

첫 번째 예시는 Red를 1로 지정하여 Red = 1, Green = 2, Blue = 3으로 지정한 경우,

두 번째 예시는 Green을 3으로 지정하여 Red = 1, Green = 3, Blue = 4로 지정한 경우이다.

 

enum Color {Red = 1, Green = 3, Blue}
let c: Color = Color.Green

let colorName: string = Color[3];

console.log(colorName); //값이 3인 Green 출력

 

enum에서는 멤버에 매겨진 값을 통해 멤버의 이름을 알 수 있다.

 

7. any

 

타입을 알지 못하는 데이터를 표현하는데 쓰는 자료형.

타입 검사를 하지 않고 컴파일을 통과한다.

(기존 자바스크립트의 자료형이랑 비슷한 듯)

 

let anythiing: any = 4;
anything = "Hello";
anything = true;

 

any로 여러 타입이 섞인 배열을 다룰 때도 사용할 수 있다.

 

let list: any[] = [2, false, "string"];

 

8. void

 

어떤 타입도 존재할 수 없음을 나타내는 자료형. 보통 함수에서 return 값이 없을 때 사용한다.

return값이 void로 선언된 함수는 undefined를 반환한다.

void 자료형에는 null이나 undefined만 할당할 수 있기 때문에 잘 생각하고 선언해야한다.

 

function myFunction(): void {
    console.log("Function");
}

let myVar: void = null;
myVar = undefined;

 

9. null and undefined

 

let un: undefined = undefined;
let nu: null = null;

 

null과 undefined는 모든 타입의 하위 타입으로 어떤 타입에도 들어갈 수 있다.

그러나 --strictNullChecks를 사용한다면 any타입에만 할당할 수 있게 된다. (예외적으로, void에는 undefined 할당 가능)

 

10. never

 

never 타입은 절대 발생할 수 없는 타입을 나타내는 자료형.

함수를 선언할 때 항상 오류를 발생시키거나 무한 루프에 걸리는 등 절대로 반환하지 않는 반환 타입으로 사용된다.

무슨 말이냐면, 

 

function infiniteLoop(): never {
    while(true){
    }
}

 

위 함수는 무한 루프를 발생시키는 함수로 절대로 반환값이 생성될 수 없다.

이 경우에 never를 사용한다.

 

function error(message: string): never {
    throw new Error(message);
}

 

위 함수의 경우에는 error를 던지는 함수이다.

이 경우에도 함수가 마지막에 도달하지 않고 프로그램이 종료되기 때문에 반환값이 생성될 수 없다.

역시 never를 사용한다.

 

function fail(){
    return error("Something Failed");
}

 

이와 같은 경우에도 반환값이 never로 추론할 수 있다.

never 타입은 모든 타입의 하위 타입이지만 자른 자료형을 never에 할당할 수 없다.

 

11. object

 

object는 number, string, boolean, bigint, symbol, null, undefined가 아닌 타입을 나타낸다.

(열거한 타입을 원시타입이라 칭함)

 

function create(o: object | null): void; // | 연산자를 이용하여 2개 이상의 타입 표기 가능

create({hello: 0}) //성공
create(null)       //성공
create(0)          //실패 : Object는 원시타입이 아님.

 

타입 단언

TypeScript보다 개발자가 값에 대해 더 정확히 알고 있는 경우가 존재하는데,

개발자가 직접 타입을 단언(정해)줌으로써 컴파일러에게 개발자가 먼저 검토했음을 알려주는 방법이다.

타입 단언에는 2가지 문법이 있는데 하나는 angle-bracket(=꺽쇠 괄호 <>), 하나는 as- 문법이다.

 

let something: any = "string";

let strLength: number = (<string>somgthing).length;

or

let strLength: number = (somgthing as string).length;

 

두 예제는 같으나 JSX와 사용시 as- 문법만 사용할 수 있다.

 

 

참고

TypeScript-Handbook 한글 문서

타입스크립트 타입선언 - 기록맨님 벨로그