TypeScript

TypeScript 핸드북 1 - 기본 타입

JavaScript, TypeScript

기본 Type

소개

프로그램을 구조적으로 잘 만들기 위해 number, string, structure, boolean 등 가장 간단한 데이터 단위로 작업을 할 수 있어야합니다. TypeScript에서는 이러한 타입들을 JavaScript와 거의 같은 형태로 지원합니다.

Boolean

JavaScript/TypeScript의 가장 기본적인 데이터 타입은 true/false 값을 가지는 boolean 입니다.

1
let isDone: boolean = false;

Number

JavaScript에서와 마찬가지로 TypeScript의 모든 숫자는 부동 소수점 값이고 number 타입을 가집니다. TypeScript는 16 진수 및 10 진수 리터럴 외에도 ECMAScript 2015에 도입된 바이너리 및 8 진수를 지원합니다.

1
2
3
4
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

String

웹 페이지와 서버용 JavaScript에서 프로그램을 생성할 때 흔히 문자열 데이터를 많이 사용합니다. 다른 언어에서와 마찬가지로, TypeScript에서 이러한 문자 데이터 유형을 나타 내기 위해 string 타입 문자열을 사용합니다. JavaScript와 마찬가지로 TypeScript는 문자열 데이터를 표현하기 위해 큰 따옴표(“) 또는 작은 따옴표(‘)를 사용합니다.

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

문자열이 여러 행에 걸쳐 있고 표현식을 포함할 수있는 template string을 사용할 수도 있습니다. 이러한 문자열은 백틱/백 쿼트(` ) 문자로 둘러싸여 있있고, ${expr}를 이용하여 표현식을 포함할 수 있습니다.

1
2
3
4
5
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.
I'll be ${ age + 1 } years old next month.`;

위 코드는 String 변수를 다음과 같이 선언하는 것과 같습니다.

1
2
let sentence: string = "Hello, my name is " + fullName + ".\n\n" +
    "I'll be " + (age + 1) + " years old next month.";

Array

TypeScript는 JavaScript와 마찬가지로 배열을 사용할 수있습니다. 배열 타입은 두 가지 방법 중 하나로 작성할 수 있습니다. 첫 번째로, 각 타입에 []를 붙여 해당 타입의 배열을 나타냅니다

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

두 번째 방법은 일반적인 배열 타입 Array을 사용합니다.

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

Tuple

튜플 타입을 사용하면 고정된 수의 요소 타입은 알고 있지만, 값의 종류가 다른 배열을 표현할 수 있습니다. 예를 들어, 문자열과 숫자의 쌍을 아래와 같이 표현할 수 있습니다.

1
2
3
4
5
6
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

변수 선언에 포함된 인덱스 요소의 타입은 인덱스를 이용하여 정확한 타입으로 액세스가 가능합니다. 하지만, 타입이 서로 다를수 있기 때문에 액세스한 데이터의 처리는 달라질 수 있습니다.

1
2
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

변수 선언에 포함되지 않는 요소에 대한 액세스는 Tuple 선언에 사용된 타입의 Union 타입으로 사용됩니다.

1
2
3
4
5
x[3] = "world"; // OK, 'string' can be assigned to 'string | number'
console.log(x[5].toString()); // OK, 'string' and 'number' both have 'toString'
x[6] = true; // Error, 'boolean' isn't 'string | number'

Union 타입은 이후 장에서 다룰 고급 주제중 하나 입니다.

Enum

JavaScript의 표준 데이터 타입에서 유용한 기능중 하나는 enum입니다. C# 언어와 마찮가지로 enum은 숫자값 데이터 셋에 사람이 더 친숙한 이름을 지정하는 방법입니다.

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

기본적으로 enum은 0부터 시작하여 멤버의 번호 매기기를 시작합니다. 멤버 중 하나의 값을 수동으로 설정하여 변경할 수 있습니다. 예를 들어 이전 예제를 0 대신 1로 시작할 수 있습니다.

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

또는 enum의 모든 값을 수동으로 설정할 수 있습니다.

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

enum의 편리한 기능은 숫자 값에서 enum의 값 이름으로 이동할 수 있다는 것입니다. 예를 들어 값이 2이지만 위의 색상 enum에 매핑된 것이 확실하지 않은 경우 해당 이름을 찾을 수 있습니다.

1
2
3
4
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
alert(colorName);

Any

값을 자신 또는 타사 라이브러리의 동적 콘텐츠에서 가져오는 것과 같이 프로그램을 작성할 때 알지 못하는 변수 유형을 설명해야 할 수도 있습니다. 이 경우 컴파일시 타입 검사를 하지 않고 지나가도록 해야 합니다. 이런 방법을 위해 any 타입을 사용합니다.

1
2
3
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

any 타입은 기존 JavaScript와 같이 작업하는 강력한 방법중 하나 입니다. 컴파일하는 동안 타입 검사를 옵트 인 (opt-in)하거나 옵트 아웃 (opt-out) 할 수 있습니다. 다른 언어도 비슷하지만 JavaScript의 Object 타입이 비슷한 역할을 합니다. 그러나 Object 타입의 변수는 값을 할당할 수만 있습니다. 실제 존재하는 메소드라도 임의의 메소드를 호출할 수는 없습니다 :

1
2
3
4
5
6
let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)
let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

any 타입은 타입의 일부분을 알고 있다면 편리하지만 그렇지 않을 수도 있습니다. 예를 들어 배열이 있고, 배열에 있는 값은 다른 타입이 혼합되어 있을 수 있습니다.

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

Void

void는 타입이 전혀 없다는 것에서 any의 반대 의미와 비슷합니다. 일반적으로 값을 반환하지 않는 함수의 반환 유형으로 이 타입을 사용합니다.

1
2
3
function warnUser(): void {
    alert("This is my warning message");
}

void 타입의 변수 선언은undefined 또는null 만 할당할 수 있기 때문에 그다지 유용하지 않습니다.

1
let unusable: void = undefined;

Null 과 Undefined

TypeScript에서 undefined와 null은 실제로 각각 undefined와 null이라는 이름의 타입을 가지고 있습니다. void와 매우 비슷하게, 이 타입들은 그 자체로 매우 유용하지는 않습니다.

1
2
3
// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

기본적으로 null과 undefined는 다른 모든 유형의 하위 유형입니다. 즉,null과 undefined를 number와 같은 것에 할당할 수 있습니다.

--strictNullChecks 플래그를 사용할 경우 null과 undefined는 void와 각각의 타입 변수에만 할당 가능합니다. 이렇게하면 많은 일반적인 오류를 피할 수 있습니다. string 또는 null 또는 undefined를 전달 하고자하는 경우, union 타입 string|null|undefined을 사용할 수 있습니다. 다시 한번, Union 타입은 후반부에 자세히 설명합니다.

가능하면 --strictNullChecks의 사용을 권장합니다. 그러나이 핸드북의 목적 상 우리는 플래그가 꺼져 있다고 가정 합니다.

Never

never 타입은 절대로 발생하지 않는 값의 타입을 나타냅니다. 예를 들어, never는 함수 표현식의 리턴 타입이거나, 항상 예외를 던지는 화살표 함수 표현식이거나, 리턴하지 않는 표현식입니다. 변수는 결코 true가 될 수없는 어떤 타입의 가드에 의해 좁혀 질 때 타입 never를 획득합니다.(?)

never 타입은 모든 타입의 서브 타입이며, 모든 타입에 assign 가능합니다. 하지만 어떤 타입도 never (never 자체 제외)의 하위 타입이 아니고 assign 할 수 없습니다. 어떤 타입도 ‘never’에 assign되지 않습니다.

‘never’를 반환하는 함수의 몇 가지 예는 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Function returning never must have unreachable end point
function error(message: string): never {
    throw new Error(message);
}
// Inferred return type is never
function fail() {
    return error("Something failed");
}
// Function returning never must have unreachable end point
function infiniteLoop(): never {
    while (true) {
    }
}

Object

object는 non-primitive 타입, 즉 number, string, boolean, symbol, null 또는undefined가 아닌 타입을 나타내는 타입입니다.

object 타입을 사용하면 Object.create와 같은 API를보다 잘 표현할 수 있습니다.

1
2
3
4
5
6
7
8
9
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

Type assertions

어떤 값에 대해 프로그래머는 때때로 TypeScript보다 더 많은 정보를 알수 있습니다. 보통 이런 경우는 어떤 엔티티의 타입이 현재 타입보다 더 구체적인 타입을 알고 있을 때입니다.

타입 어설션은 컴파일러에게 “나를 믿어. 내가 하고 있는 일을 잘 알아.”라고 말하는 방법입니다. 타입 어설션은 다른 언어의 타입 변환과 비슷하지만 특별한 검사 나 데이터 재구성을 수행하지 않습니다. 런타임에 영향을 미치지 않으며 컴파일러에서만 사용됩니다. TypeScript는 프로그래머가 필요한 특수 검사를 수행했다고 가정합니다.

타입 어설션에는 두 가지 형식이 있습니다. 하나는 “angle-bracket(<>)”구문입니다.

1
2
3
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

그리고 다른 하나는 as 구문입니다 :

1
2
3
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

두가지 방법은 동일한 역할을 하기 때문에 어떤것을 사용하는지는 단지 선택의 문제입니다. 그러나 TypeScript를 JSX와 함께 사용할 경우는 as 스타일의 어설션만 허용됩니다.

let에 대해

지금까지 우리는 기존에 알고있는 JavaScript의 var 키워드 대신 let 키워드를 사용했습니다. let 키워드는 실제로 TypeScript에서 사용할 수있는 더 새로운 JavaScript 구문입니다. 나중에 자세한 내용을 다루 겠지만, 자바 스크립트의 많은 일반적인 문제는 let을 사용하여 완화되므로 가능할 때마다 var 대신 사용하십시오.

이 내용은 나중에 참고하기 위해 제가 공부하며 정리한 내용입니다.
의역, 오역, 직역이 있을 수 있음을 알려드립니다.
This post is a translation of this original article [https://www.typescriptlang.org/docs/handbook/basic-types.html]

참고

공유하기