typescript 기본타입

1. JavaScript 지원 타입

1-1. Boolean

JavaScript의 boolean에 대응하는 true / false

let isDone: boolean = false;

1-2. Number

JavaScript와 마찬가지로 TypeScript의 모든 숫자는 부동 소수 점 값
이 부동 소수 점 숫자는 number 타입을 받는다.
TypeScript는 10진수 및 16진수와 함께 ECMAScript에 도입된 2진수 및 8진수 문자를 지원한다.

let decimal: number = 6; // 10진수 리터럴
let hex: number = 0xf00d; // 16진수 리터럴
let binary: number = 0b1010; // 2진수 리터럴
let octal: number = 0o744; // 8진수 리터럴

1-3. String

다른 언어에서와 마찬가지로 텍스트 형식을 참조하기 위해 string 타입을 사용한다.
JavaScript와 마찬가지로, 타입 스크립트는 문자열 데이터를 둘러싸기 위해 큰 따옴표(") 또는 작은따옴표(')를 사용한다.

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

여러 줄에 걸쳐 표현식을 포함할 수 있는 템플릿 문자열(Template String)을 사용할 수도 있다.
이 문자열은 백틱 / 백 쿼트 (` ) 문자로 감싸져 있으며 포함된 표현식은 ${ 표현식 } 형식이다.

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 변수를 다음과 같이 선언하는 것과 같다.

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

1-4. Array

TypeScript는 JavaScript와 같이 값의 배열을 사용할 수 있도록 한다.

첫 번째, 요소 타입의 배열을 나타내기 위해 [] 다음에 오는 요소의 타입을 사용한다.
let list: number [] = [1, 2, 3];
두 번째 방법으로는 제네릭 배열 타입을 사용한다. Array <요소의 타입>:
let list: Array<number> = [1, 2, 3];

1-5. undefined & null

TypeScript에서 undefined와 null은 실제로 각기 undefined와 null이라는 자체적인 타입을 가진다.

// 그 외에도 이러한 변수에 할당할 수 있다.
let n: null = null;
let u: undefined = undefined;

기본적으로 null과 undefined는 다른 모든 타입의 서브 타입이다.

즉 number와 같은 것으로 할당 할 수 있다.

하지만, 컴파일 옵션에서 --strictNullChecks사용하면, null과 undefined는 void 나 자기 자신들에게만 할당할 수 있다.

이 경우, null과 undefined를 할당할 수 있게 하려면, union type을 이용해야한다. (union type: 두 개의 타입을 합치는 것)

string 또는 null 또는 undefined를 전달 하고자하는 경우, union 타입 string|null|undefined을 사용할 수 있다.

// 대입 가능
let name: string = null
let age: number = undefined

// strictNullChecks => true
// 보통 위의 옵션을 true로 하진 않는다..
// 위의 옵션이 추가되면 자기 자신이나 void에게만 할당 가능, 다른 타입에는 할당하지 못함.
// let name: null = null; // (O)
// Type 'null' is not assignable to type 'string'.
let name: string = null // (X)

// null => null || void, undefined => undefined || void
// Type 'null' is not assignable to type 'undefined'.
let u: undefined = null // (X)

let v: void = undefined // (O)

let union: string | null | undefined = 'str'

2. TypeScript 추가 타입

2-1. Any

어떤 타입이어도 상관없는 타입
컴파일 타임에 타입 체크가 정상적으로 이뤄지지 않기 때문에 이걸 최대한 쓰지 않는 게 핵심
그래서 컴파일 옵션 중에는 any 를 쓰면 오류를 뱉도록 하는 옵션도 있다.(noImplicitAny)

애플리케이션을 작성할 때 알지 못하는 변수의 타입을 설명해야 할 수도 있다.

이러한 값은 사용자 또는 써드-파티 라이브러리와 같은 동적 콘텐츠에서 비롯될 수 있다.

이러한 경우에는, 타입 검사를 선택하지 않고 그 값이 컴파일-타임 검사를 통과하도록 하고 싶다.

이를 위해 다음과 같은 any 타입으로 지정합니다.

let notSure: any = 4;
notSure = "문자열일수도 있다";
notSure = false; // 좋아요, 확실한 boolean

any 타입은 기존 JavaScript로 작업할 수 있는 강력한 방법으로 컴파일 과정에서 타입 검사를 점진적으로 실행 (opt-in) 및 중지(opt-out) 할 수 있다.

다른 언어와 마찬가지로 객체도 비슷한 역할을 할 것으로 예상할 수 있다.

그러나 객체 타입의 변수를 사용하면 해당 객체에는 값만 할당할 수 있다 - 실제로 존재하는 것도 임의의 메서드를 호출할 수는 없다.

let notSure: any = 4;
notSure.ifItExists(); // 좋아요, 런타임에 ifItExists가 존재할 수 있다.<br>
notSure.toFixed(); // 좋아요, toFixed는 존재한다. (그러나 컴파일러는 체크하지 않는다)

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

any 타입은 타입의 일부분을 알고 있다면 편리하지만 그렇지 않을 수도 있다.

예를 들어 배열이 있고, 배열에 있는 값은 다른 타입이 혼합되어 있을 수 있다.

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

list[1] = 100;

2-2. Void

void는 타입이 전혀 없다는 것에서 any의 정반대이지만 조금 비슷하다.

주로 함수의 리턴이 없을 때 사용한다. 그 외에는 사용할 일이 거의 없다.

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

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

let unusable: void = undefined;

2-3. Never

never 타입은 절대로 발생하지 않는 값의 타입을 나타낸다.

예를 들어, never는 함수 표현식의 리턴 타입이거나, 항상 예외를 던지는 화살표 함수 표현식이거나, 리턴하지 않는 표현식이다.

변수는 또한 never일 때 타입 가드에 의해 좁혀지더라도 결코 사실일 수 없으며 타입을 획득하지 못한다.(?)

never 타입은 모든 타입의 서브 타입이며, 모든 타입에 할당 가능

어떤 타입도 never에 할당 할 수 없다.

never를 반환하는 함수의 몇 가지 예

// 반환되는 함수에는 연결할 수 없는 end-point가 있어서는 안 된다.
function error(message: string): never {
  throw new Error(message);
}

2-4. Tuple

배열인데 타입이 한가지가 아닌 경우 사용

예를 들어, 문자열과 숫자의 쌍을 아래와 같이 표현할 수 있다.

// 튜플 타입 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 좋아요
// 부정확한 초기화
x = [10, "hello"]; // 오류

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

2-5. Enum

JavaScript의 표준 데이터 타입 집합에 추가할 수 있는 유용하고 부가적인 추가 자료는 enum 이다.
C#와 같은 언어에서처럼 enum은 numeric 값 집합에 더 친숙한 이름을 부여하는 방법이다.

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

기본적으로 enums는 0부터 시작하는 자신의 멤버 번호를 매기기를 시작한다.
멤버 중 하나의 값을 수동으로 설정하여 이를 변경할 수 있다.
예를 들어 이전 예제를 0 대신 1로 시작할 수 있다.
enum Color {Red = 1, Green, Blue} let c: Color = Color.Green;
또는 열거 형의 모든 값을 수동으로 설정한다.
enum Color {Red = 1, Green = 2, Blue = 4} let c: Color = Color.Green;
enum의 편리한 기능은 숫자 값에서 enum의 해당 값 이름으로 이동할 수 있다는 것이다.
예를 들어, 값 2를 가지고 있지만 위의 Color enum에서 매핑된 값이 무엇인지 확실하지 않은 경우에 그에 상응하는 이름을 찾을 수 있다.
enum Color {Red = 1, Green, Blue} let colorName: string = Color [2];
alert(colorName); // 위의 값이 2 이므로 'Green'을 표시한다.

3. 타입 단언 (Type assertions)

형 변환(타입 캐스팅)이 아니라 컴파일러에게 타입을 알려준다.
다른 언어의 형 변환(타입 캐스팅)과 비슷하지만 특별한 검사나 데이터를 재구성하지는 않는다.
런타임에 영향을 미치지 않으며 컴파일러에서만 사용된다.
TypeScript는 개발자가 필요한 특별한 검사를 수행했다고 가정한다.

Type assertions은 두 가지 형태를 가진다.
- 하나는 "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 as string).length;

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

저작자표시 비영리 변경금지

직장인투자자