TypeScript 번역 후 정리 (Basic Types)

Basic Types (기본 유형)

소개

프로그램을 유용하게 사용하려면 number, string, structure, boolean 등 가장 간단한 데이터 단위로 작업을 할 수 있어야합니다. TypeScript에서는 JavaScript와 같은 타입들을 지원합니다. 편리한 열거 형을 사용하여 상황을 돕습니다.

Boolean

가장 기본적인 데이터 타입은 boolean 값이며, true / false 값입니다.

// Type: boolean

const isBoolean: boolean = false;

 

Number

JavaScript와 마찬가지로 TypeScript의 모든 숫자는 부동 소수점 값입니다. TypeScript는 부동 소수점 숫자의 형식을 16 진수 및 10 진수, ES5에 도입 된 2 진수 및 8 진수를 지원합니다.

// Type: number

const decimal: number = 6;

const hex: number = 0xf00d;

const binary: number = 0b1010;

const octal: number = 0o744;

 

String

JavaScript로 웹 페이지, 서버와 같은 새로운 프로그램을 만들 때 또 하나의 기본적인 부분은 텍스트 데이터와 함께 작업하는 것이다. 다른 언어와 같이 이러한 텍스트 데이터 타입을 참조하기 위해 string 타입을 사용합니다. JavaScript와 마찬가지로 TypeScript 또한 문자열 데이터를 감싸기 위해 큰 따옴표( " ) 또는 작은 따옴표 ( ' )를 사용합니다.

// Type: string

let feeling: string = 'sad';

feeling = 'happy';=

값이 여러 줄에 걸쳐 있고 표현식이 포함될 수 있는 텍스트에서 ES6 문법인 템플릿 문자열을 사용할 수도 있습니다. 템플릿 문자열은 backtic / backquote ( ` ) 문자로 둘러싸여 있고 표현 형태는 ${ expr } 입니다.

const myName: string = `James`;

const greeting: string = `Hello, my name is ${myName}. I'm so ${feeling}`;

아래는 sentence는 템플릿 문자열을 풀어 쓴 것입니다.

const sentence: string = "Hello, my name is " + myName + ".\n\n" + "I'm so " + feeling + "."

 

Array

TypeScript는 JavaScript와 마찬가지로 값 배열을 사용할 수 있게 합니다. 배열 유형은 두 가지 방법을 사용할 수 있다.

첫 번째 유형인 [] 을 사용하여 나타내보자.

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

두 번째 유형인 일반 유형(Array<elemType>)을 사용하여 나타내보자.

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

 

Tuple

Tuple 타입을 사용하면 고정 된 개수와 요소 타입을 알고 있지만 필요 없는 배열을 표현할 수 있습니다. 

예를 들어 string과 number를 한쌍의 값으로 표현해보자.

// Type: tuple

let StringNumber: [string, number];

StringNumber = ["hello", 10]; // 초기화 OK

StringNumber = [10, "hello"]; // 초기화 Error

 

위의 초기화한 인덱스 요소에 접근 할 때 올바른 타입이 검색됩니다.

// OK

console.log(StringNumber[0].substr(1));

// Error, 'number' does not have 'substr'

console.log(StringNumber[1].substr(1));

 

인덱스 요소를 외부에서 엑세스 할 때  다음과 같이 Union 타입을 사용합니다.

// OK, 'string' can be assigned to 'string | number'

StringNumber[3] = "world";

// OK, 'string' and 'number' both have 'toString'

console.log(StringNumber[5].toString());

// Error, 'boolean' isn't 'string | number'

StringNumber[6] = true;

Union 타입은 고급 주제이기 때문에 다음 장에서 다시 자세히 다뤄보자.

 

Enum

Javascript의 표준 데이터 타입에 유형한 enum 입니다. C# 과 같은 언어에서 처럼 enum은 숫자 값 집합에 더 친숙한 이름을 지정하는 방법입니다.

enum Color { Red, Green, Blue }

let c: Color = Color.Green;

console.log(c); // 1

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

enum Color { Red = 1, Green, Blue }

let c: Color = Color.Green;

console.log(c); // 2

또는 emum의 모든 값을 설정할 수 있습니다.

enum Color { Red = 1, Green = 2, Blue = 4 }

let c: Color = Color.Green;

console.log(c); // 4

enum을 사용하면 좋을 점은 해당 값을 이용하여 이동할 수 있다는 점입니다. 예를 들어 값 2를 가지고 있고 Color enum에서 매핑된 값이 무엇인지 확실하지 않은 경우에 그에 상응하는 이름을 찾을 수 있습니다.

enum Color { Red = 1, Green, Blue }

let colorName: string = Color[2];

// Displays 'Green' as its value is 2 above

console.log(colorName);

 

Any

우리는 응용프로그램을 작성할 때 알지 못하는 변수 타입을 설명해야 할 수도 있습니다. Any 타입을 사용하면 동적 콘텐츠 (라이브러리 또는 사용자) 같은 것들에 대한 타입 검사를 선택하지 않고 값을 컴파일 타임 검사에서 통과하도록 합니다. Any는 다음 같이 지정합니다.

let notSure: any = 4;

notSure = "maybe a string instead";

// OK, definitely a boolean

notSure = false;

Any 타입은 기존 JavaScript로 작업 할 수 있는 강력한 방법이며 컴파일 하는 동안 opt-in, opt-out 할 수 있습니다. Object가 다른 언어에서와 마찬가지로 비슷한 역할을 할 것으로 기대할 수 있습니다. 그러나 Object 타입의 변수는 값을 할당 할 수만 있습니다. 실제로 존재하는 값이라도 임의의 메소드 호출은 불가합니다.

let notSure: any = 4;

// OK, ifItExists might exist at runtime

notSure.ifItExists();

// OK, toFixed exists (but the compiler doesn't check)

notSure.toFixed();

let prettySure: Object = 4;

// Error: Property 'toFixed' doesn't exist on type 'Object'.

prettySure.toFixed();

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

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

list[1] = 100;

 

Void

void는 any 타입과 반대이지만 어떤 타입의 부재도 전혀 없습니다. 일반적으로 return 값을 반환하지 않는 함수의 retrun 유형을 볼 수 있습니다.

function warnUser(): void {

console.log("This is my warning message");

}

void 타입의 변수 선언은 undefined 또는 null 만 할당 할 수 있으므로 유용하지 않습니다.

let unusable: void = undefined;

 

Null and Undefiend

TypeScript에서 undefiend와 null은 각각의 고유한 타입을 가집니다. void 타입과 비슷하지만 유용하지 않습니다.

// Not much else we can assign to these variables!

let u: undefined = undefined;

let n: null = null;

기본적으로 undefiend는 다른 모든 타입의 부속 타입입니다. 즉 null과 undefiend를 number와 같은 것으로 할당 할 수 있습니다.

그러나 --stricNullChecks 플래그를 사용할 때 null과 undefiend는 void와 그 각각의 타입에만 할당할 수 있습니다. 이렇게 하면 일반적인 오류를 피할 수 있습니다.

string 또는 null 또는 undefiend 중 하나를 전달하고자 하는 경우 string | null | undifiend (union 타입)을 사용할 수 있습니다.

참고 : 가능한 경우  --stricNullChecks를 사용하는 것이 좋지만 documentation 목적 상 해제되어 있다고 가정합니다.

 

Never

never 타입은 발생하지 않는 값의 타입을 나타냅니다. 예를 들어 함수 식 또는 항상 예외를 던지는 화살표 함수 식의 반환 형식이나 절대 반환하지 않는 식은 없습니다. 변수들 또한 never 유형일 때 어떤 타입 가드에 의해 좁혀지더라도 확실하게 단정 지을 수 없으며 타입을 획득하지 못합니다.

never 타입은 모든 유형의 부속 유형이며, 모든 유형에 지정할 수 있습니다. 그러나 never 타입은 서브 타입이거나 할당 가능한 타입이 아닙니다. any 타입 조차도 할당 불가능 합니다.

// 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 타입은 number, string, boolean, symbol, null, undefiend로 정의되지 않은 모든 것, 곧 non-primitive 타입을 나타낸다.

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

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 보다 더 많은 value를 알게 되는 상황에 처하게 될 것입니다. 이 문제는 entity의 타입이 현재 어떤 타입보다 더 구체적일 수 있음을 알 때 발생합니다.

Type assertions은 컴파일러에게 "나를 믿어라, 내가 하고 있는 일을 안다"라고 말하는 방법이다. Type assertions은 다른 언어의 형 변환과 비슷하지만 특별한 검사나 데이터 재구성을 수행하지 않습니다.

런타임에 영향을 미치지 않으며 컴파일러에서만 사용됩니다. TypeScript는 프로그래머가 필요한 특수 검사를 수행했다고 가정합니다.

Type assertions은 두 가지 형태를 가지며 첫 번째 angle-bracket 구문입니다.

const someValue: any = "this is a string";

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

두 번째 as 구문입니다.

const someValue: any = "this is a string";

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

위의 두 구문은 똑같이 작동합니다. 

JTX와 함께 사용될 시 as 구문만 허용되며 이외 나머지는 자유롭게 선택해서 사용하면 됩니다.

 

A note about let, const

지금까지 우리가 알고 있는 JavaScript의 var 키워드 대신 let, const 키워드를 사용했음을 할 수 있습니다. let, const 키워드는 실제로 TypeScript에서 사용할 수 있는 더 새로운 JavaScript 구문입니다. 나중에 자세한 내용을 설명 하겠지만 let, const의 사용으로 인해 JavaScript의 많은 일반적인 문제가 완화되므로 가능할 때마다 var 대신 사용해야합니다.

자세한 내용은 아래에 설명을 했습니다.

2019/02/19 - [넌 누구야 JavaScript 공부/JavaScript] - let, const 란? 그리고 왜 써야만 하는가? (ES6)