[Typescript] 2강 기본적인 타입 소개

1. 불리언 타입(Boolean)

타입스크립트의 가장 기본적인 데이터 타입은 Javscript와 Typescript에서 사용하는 boolean 값이며 참과 거짓을 정의하는 값입니다. 

let isTrue: boolean = true;

console.log(isTrue); // true

 

2. 숫자 (Number)

타입스크립트는 자바스크립트와 같이 모든 숫자는 부동 소수 값으로, 부동 소수에는 number라는 타입이 붙혀집니다. Typescript는 16진수 ,10진수 리터럴에 더불어, ECMAScript 2015에 소개된 2진수, 8진수 리터럴도 지원합니다.

let sixten: number = 6;
let hexresult: number = 0x0042;
let binary: number = 0b1010;
let octal: number = 0o774;

console.log(sixten, hexresult, binary, octal); // 6 66 10 508

 

3. 문자열(String)

웹 페이지, 서버 같은 프로그램을 Javscript로 작업할 때 기본적으로 텍스트 데이터를 다루는 작업이 필요합니다. 다른 언어들처럼, TypeScript에서는 텍스트 데이터 타입을 string으로 표현합니다. JavaScript처럼 TypeScript도 큰 따옴표 ( " )나 작은 따옴표 ( ' )를 문자열 데이터를 깜사는데 사용합니다.

let color: string = 'yellow';
color = 'red';

console.log(color); // red

 

또한 템플릿 문자열을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있고, 표현식을 포함시킬 수 있습니다. 이 문자열은 백티/백쿼드 문자로 감싸지며 ${ expr }과 같은 형태로 표현식을 포함할 수 있습니다.

let color: string = 'yellow';
color = 'red';

console.log(color); // red

let fullName: string = `Back Jackson`;
let age: number = 45;
let sentence: string = `Hello, my name is ${fullName}. I'll be ${ age + 2 } years old next match`

 

위는 아래 sentence선언과 동일 합니다.

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

 

4. 배열 (Array)

TypeScript는 Javascript처럼 값들을 배열로 다룰 수 있게 합니다. 배열 타입은 두 가지 방법이 있으며, 첫번째는 배열 요소들을 나타내는 타입 뒤에 빈 배열( [ ] ) 를 쓰는 것 입니다.

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

 

두 번째 방법은 제네릭 배열 타입입니다.

let pizza: Array<string> = ['cheeze', 'tomato', 'chicken'];

 

5. 튜플 (Tuple)

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

// 튜플 타입 선언
let x: [string, boolean];

// 초기화
x = ['hello', true]; // true
console.log(x);

// false
x = [124, 'flals']; // false 에러 발생
console.log(x);

 

정해진 인덱스에 위치한 요소에 접근 시 해당 타입이 나타납니다.

console.log(x[0].substring(1)); // ture
console.log(x[1].substring(1)); // false, "boolean" 에는 "substring" X

 

정해진 인덱스 외 다른 인덱스에 있는 요소에 접근시 오류가 발생합니다.

x[3] = 'world'; // 'string', boolean 타입에는 프로퍼티 '3' X
console.log(x[5].toString()); // 오류 타입에 '5'가 없음

 

6. 열거 (Enum)

JavaScript의 표준 자료형 집합과 사용하면 도움이 될만한 데이터 형은 enum입니다. C# 같은 언어처럼 enum은 값의 집합에 더 나은 이름을 붙여줄 수 있습니다.

enum Color {
  Red,
  Green,
  Blue,
}

let c: Color = Color.Red;

console.log(c); // 0

 

기본적으로 enum은 0부터 시작해 멤버들의 번호를 매깁니다. 맴버 중 하나의 값을 수동을 설정해 번호를 바꿀 수 있습니다. 

enum Color {
  Red,
  Green = 3,
  Blue,
}

let c: Color = Color.Green;

console.log(c); // 3

 

enum의 유용한 기능 중 하나는 매겨진 값을 사용해 enum 맴버의 이름을 알아낼 수 있습니다.

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

let ColorName: string = Color[3]; // 3
console.log(ColorName); // 문자열 'Blue' 출력

 

7. Any

애플리케이션을 만들 때, 알지 못하는 타입을 표현해야 할 수도 있습니다. 이 값들은 사용자로부터 받은 데이터나 서드 파티 라이브러리 같은 동적인 컨텐츠에 올 수도 있습니다. 이 경우 타입 검사는 하지 않으며, 그 값들이 컴파일 시간에 검사를 통과하기 원합니다. 이를 위해 any 타입을 사용할 수 있습니다.

let notSure: any = 4;
notSure = 'string instance';
notSure = false; // true boolean 값

 

any 타입은 기초에 JavaScript로 작업할 수 있는 강력한 방법으로, 컴파일 중에 점진적으로 타입 검사를 하거나 하지 않을 수 있습니다. 혹 다른 언어에서 그럿듯, Object가 비슷한 역할을 할 수 있다고 생각할 수도 있습니다. Object로 선언된 변수들은 오직 어떤 값이든 그 변수에 할당할 수 있게 해주나 실제로 메서드가 존재하더라도 임의 호출이 불가합니다.

let notSure: any = 4;
notSure.iFitExists(); //true 런타임에 존재할 확률 있음
notSure.toFixed(); // true 존재하지만 컴파일러는 검사X

let prettySure: Object = 4;
prettySure.toFixed(); // 오류: 'toFixed'는 'Object' 에 존재 X

 

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

let sos: any[] = [1, true, 'free'];

sos[1] = 100;

console.log(sos[1]); // 100

 

8. Void

void는 어떤 타입도 존재할 수 없음을 나타내기 때문에,  any의 반대 타입입니다. void는 보통 함수에 반환 값이 없을 경우 반환 타입을 표현하기 위해 쓰입니다.

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

warnUser(); // This is My message

 

void를 타입 변수를 선언하는 것은 유용하지 않은데, 이유는 그 변수에 null ( --strictNullChecks 을 사용하지 않을 때만 해당하며, undefineda만 할당할 수 있습니다.

let unusable: void = undefined;

unusable = null; // 성공 `--strictNullChecks` 사용 않할시

 

9. Null and Undefined

TypeScript은 undefined과 null 둘 다 각각 자신의 타입 이름으로 undefined, null로 사용합니다. void 처럼 그 자체로 유용한 경우는 거의 없습니다.

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

 

기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입입니다. 이건 null과 undefined를 number같은 타입에 할당할 수 있다는 의미입니다. 하지만 --strictNullChecks 시, null과 undefined는 오직 any 와 각자 자신들 타입에만 할당이 가능합니다( undefined는 void에 할당 가능) 일반적으로 에러를 방지하는 데 도움을 줍니다.

 

이 경우, string 또는 null또는 undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefined를 사용할 수 있습니다.  

 

10. Never 

never 타입은 절대 발생할 수 없는 타입이며, never는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰입니다. 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 될 수 있습니다.

 

never 타입은 모든 타입에 할당 가능한 하위 타입입니다. 그러나 어떤 타입도 never에 할당할 수 있거나, 하위 타입은 아닙니다( never 자신 제외) 심지어  any도 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'); // Error
create(false); // Error 
create(undefined) // Error

 

12. 타입 단언 (Type assertions)

가끔 Typescript보다 개발자가 값에 대해 더 잘아고 있을 때가 많습니다. 대개 이런 경우 어떤 엔티티의 실제 타입이 현재 타입 보다 더 구체적 일 때 발생합니다. 타입 단언(Type assertions)은 컴파일러에게 "날 믿어야해, 난 내가 뭘 하고 있는 지 알고 있어" 라고 말하는 것과 같습니다.

 

 

타입 단언은 다른 언어의 타입 변환(형 변환) 과 유사하나, 다른 특별한 검사를 하거나 데이터를 재구성하지는 않습니다. 이는 런타임에 영향을 미치지 않고, 온전히 컴파일러만 이를 사용합니다. 타입 스크립트는 개발자가 필요한 어떤 특정 검사를 수행했다고 인지합니다. 타입 단어에는 두 가지 형태가 있습니다.

let someValue: any = 'this is string';

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

 

다른 하나는 as 문법입니다. 

let someValue: any = 'this is string';

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

 

위 두 예제는 동일하고 어떤 것을 사용할지는 개발자의 선호에 따라 다릅니다, 그러나 타입스크립트를 JSX와 함께 사용하려면 as - 스타일의 단언만 허용합니다.

 

let 에 관해

지금까지 자바스크립트에 익숙해지면서 var 키워드 대신 let 키워드를 이용했다는 것을 알 수 있습니다. let 키워드는 JavaScript ES2015에서 소개되었으며, var보더 더욱 안전하다는 이유로 지금까지 표준으로 여겨지고 있습니다.

 

참고 자료

TypeScript 한글 문서

 

GitHub - Koras02/typescript-bloging