[TypeScript] 기본타입

이번 포스팅에서는 문자열, 숫자 등 기본적인 타입변형에 대해서 정리하도록 하겠습니다.

Type Annotation

타입스크립트는 어노테이션을 통해서 타입을 지정합니다. 변수에 할당되는 타입과 함수의 매개변수, 리턴되는 값의 타입 등을 지정할 수 있습니다.

타입을 표시할 때는 소문자로 표시합니다. 첫 글자를 대문자로 작성하는 경우는 래퍼 객체를 생성할 때 이므로 주의해야 합니다.

원시타입

문자열(string)

let fullName: string = `lmh`;
let sentence: string = `Hello, my name is ${fullName}`; 
console.log(sentence); // "Hello, my name is lmh"

숫자(nubmer)

자바스크립트와 마찬가지로 숫자는 부동소수점 값을 가지며. 16진수, 10진수, 8진수, 2진수 사용 가능

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let notANumber: number = NaN;
let underscoreNum: number = 1_000_000;

불리언(boolean)

let isDone: boolean = false;
isDone = true;
console.log(typeof isDone);
let isOk: boolean = true; 
console.log(typeof isOk); 

심볼(symbol)

심볼은 원시타입 값을 담아서 사용하며 고유하고 수정불가능한 값으로 만들어 줍니다. 주로 접근을 제하하는데 사용하는 경우가 많습니다.

console.log(Symbol("foo") === Symbol("foo"));
const sym = Symbol();
const obj = {
  [sym]: "value", // [] 대괄호 안에 sym 을 넣으면 sym 속성에 접근이 불가합니다.
};
// 객체의 프로퍼티로 symbol 타입을 넣어야 value 값에 접근이 가능합니다.
obj[sym]; // value

undefined, null

별도의 설정이 없으면 undefined, null은 모든 다른 타입의 서브타입입니다. 컴파일 옵션에서 "--strictNullCheck"를 사용하면 null, undefined는 void나 자기 자신들에게 할당할 수 있습니다.

strictNullCheck 옵션을 사용하면 number, string 타입에 null이나 undefined를 할당할 수 없게 됩니다. null이나 undefined도 할당해야하는 상황이라면 union type을 사용할 수 있습니다.

유니온 타입은 "|"을 사용하여 여러가지 타입이 들어갈 수 있도록 합니다.

// void 타입에는 undefined만 할당 가능
let v: void = undefined;
let union: string | null = null; // nunion type => 합집합 개념

union = "mark"; // 문자열 할당
union = null; // null 할당

let n: null = null;

// null의 타입은 object
console.log(n); // null
console.log(typeof n); // object

// undefined의 타입은 undefined
let u: undefined = undefined;
console.log(u); // undefined
console.log(typeof u); // undefined

원시타입 이외의 타입

객체(object)

자바스트립트에서 원시타입 이 외의 타입을 Object라고 하며 배열, 객체, 함수 모두 객체입니다.

객체를 생성하다보면 신기한 점을 발견할 수 있는데,Object 객체의 create 메소드로 객채르 생성하고 console.log로 확인할 경우 내부에 있는 데이터들은 확인할 수 없습니다.

const person1 = { name: "Mark", age: 39 };
const person2 = Object.create({ name: "Mark", age: 39 });
const person3 = Object.create([1, 2, 3]);


console.log(person1); // { name: "Mark", age: 39 };
console.log(person2); // {};
console.log(person3); // Array {};

배열(array)

자바스크립트에서는 하나의 배열에 여러가지 타입의 데이터를 저장할 수 있지만 타입스크립트에서 배열 내부에 들어가는 데이터의 타입을 지정할 수 있습니다.

배열을 생성하는 두 가지 방법이 있습니다. 타입[], Array<타입> 두 가지 모두 사용하지만 리액트를 사용할 경우 Array<타입>으로 선언한 배열은 충돌이 발생 할 수 있다고 합니다.

배열에 여러가지 타입의 데이터를 넣기 위해서는 유니온 타입을 사용합니다.

let list: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3]; // jsx에서 충돌이 생길 수 있습니다,.
let list3: (number | string)[] = [1, 2, 3, "4"]; // union 타입으로도 배열을 생성할 수 있습니다.,

튜플(tuple)

튜플 배열과 비슷하지만 타입이 들어오는 순서와 길이가 맞아야 합니다. 배열보다 더 업격하게 내부의 데이터 타입을 지정할 수 있습니다.

let x: [string, number];
let y: [number, undefined];

x = ["a", 3]; 
y = [3, undefined];

const person: [number, string] = [39, "teacher"];
const [age, job] = person;
console.log(age);
console.log(job);

any

any는 어떤 타입이어도 상관 없을 때 사용하는 타입으로 타입스크립트에서는 any를 최대한 사용하지 않는 것이 중요하며, 타입 안정성을 유지하기 위해서는 정말 필요한 경우에만 사용해야 합니다.

any를 사용할 경우 컴파일되는 과정에서 타입 체크가 정상적으로 이루어지지 않으며, 컴파일 옵션 중 nolmplicitAny을 사용하면 any를 써야하는 경우 쓰지 않을 때 오류를 발생시킵니다.

function returnAny(message: any): any {
  console.log(message);
  message.toString();
}

const any1 = returnAny("리턴은 아무거나");

let looselyTpyed: any = {};

const d = looselyTpyed.a.b.c; // 오류가 나지 않습니다.
// 컴파일된 js 파일 실행 시 오류 발생

function leakingAny(obj: any) {
  const a: number = obj.num; // number 타입의 변수를 통해 누수를 막아 줄 수 있습니다,.
  const b = a + 1;
  return b;
}

unknown

Typescript 3.0 버전부터 지원하고 있으며 any와는 다르게 타입 안정성을 유지하기 위한 타입니다.

컴파일러가 타입을 추론할 수 있게끔 타입의 유형을 좁히거나 타입을 확정해 주지 않으면 다른 변수에 할당 및 사용할 수 없습니다.

unknown 타입을 사용하면 runtime error를 줄일 수 있으며, 모르는 변수의 타입을 명시할 수 있습니다.

예전에는 any를 사용했지만 any로 인해 연산된 다음 코드들이 any의 영향을 받기 때문에 unknown 타입을 사용해서 모르는 변수 타입을 다룰 수 있습니다.

declare const maybe: unknown;// unknown은 바로 변수에 할당 불가 -> 타입 가드를 통해 할당

if (maybe === true) { // if문을 사용한 타입 가드  
  const aBoolean: boolean = maybe; // 할당 가능
  const aString: string = maybe; // maybe가 true 이므로 할당 불가
}

if (typeof maybe === "string") { // 타입 가드
  const aString: string = maybe; // 할당 가능
}

never

아무것도 리턴하지 않을 때 사용하며 never 타입은 모든 타입의 subtype 입니다. 모든 타입에 할당 할 수 있습니다. 하지만 never에는 any를 포함한 어떤 것도 할당할 수 없습니다.

잘못된 타입을 넣는 실수를 막을 때에도 사용가능 합니다.

function error(message: string): never {
  throw new Error(message);
}

function fail() {
  return error("failed");
}

function infiniteLoop(): never {
  while (true) {}
}

declare const a: string | number;  
if (typeof a !== "string") { // 타입 가드
  a;
}

void

타입은 있지만 값이 없는 것을 의마하며 함수의 리턴 타입으로 사용합니다. 즉, 아무것도 리턴하지 않으면 void 타입 입니다.

// function returnVoid(message: string):void
function returnVoid(message: string): void {
  console.log(message);

  return;
}

function returnVoid2(message: string): void {
  console.log(message);

  return undefined; // 유일하게 undefined만 리턴 가능
}

const r = returnVoid("리턴이 없다.");