[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 을 사용하지 않을 때만 해당하며, undefined만 할당할 수 있습니다.

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