TypeScript - Type

TypeScript type VS JavaScript type

• JavaScript : dynamic type

  • runtime에서 결정

• TypeScript : static type

  • development에서 결정
  • complie할 때 error가 있으면 compile되지 않음
  • runtime에 실행되지 않음 (TypeScript는 browser에서 실행될 수 없음)
  • TypeScript의 주요 primitive type은 소문자임
    • primitive type: number, string, boolean
  • 타입 추론
    • 명시적 타입 추론 (예: const num1: number = 1)
    • 암시적 타입 추론 (예: const phrase = 'Result is ...')

Object Type

• object type : { property: type }

const person: {
  name: string;
  age: number;
} = {
  name: "Max",
  age: 30,
};

console.log(person.name);

• nested object type : { property : { property : type } }

const product : {
  id: string;
  price: number;
  details: {
    title: string;
    description: string;
  }
} = {
  id: 'abc1',
  price: 12.99,
  details: {
    title: 'Red Carpet',
    description: 'A great carpet - almost brand-new!'
  }
}

Array Type

• array type : type[]

const myFavoriteHobbies : string[] = ['sport', 'movie'];

• array 안에 명시되지 않은 타입이 들어간 경우, error가 발생함

const myFavoriteHobbies : string[] = ['sport', 5]; 
// Error : 'number' 형식은 'string' 형식에 할당될 수 없음

• array 안에 여러 타입을 넣고 싶은 경우, any[]를 사용

const myFavoriteHobbies : any[] = ['sport', 5]; 

Tuple Type

• Tuple : fixed length array
• 정해진 타입, 정해진 갯수가 아닐 경우, Error가 발생함

let role : [number, string] = [1, 'author'];
role = [0, 'admin'];
role = [0, 1];
// Error : 'number' 형식은 'string' 형식에 할당될 수 없음

const role : [number, string] = [1, 'author'];
role[1] = 'admin'; // role = [1, 'admin']
role[1] = 0;
// Error : 'number' 형식은 'string' 형식에 할당될 수 없음

• push()를 사용해도 Error가 발생하지 않음
  (tuple의 값에 push(), pop(), shift(), unshift(), splice()를 사용할 수 있다고 함)

const role : [number, string] = [1, 'author'];
role.push('admin') // role = [1, 'autho', 'admin']

Enum Type

• eum type : custum type enum name { member1, member2, ... };
  • member 이름은 대부분 대문자로 씀
  • 이름 있는 상수들의 집합을 정의할 때 쓰임
  • 각 member는 상수 또는 계산된 값을 가짐

Numeric Enum

• member가 number type의 초기값을 갖고 있는 enum
• 모든 member에 초기값이 없을 경우, 첫번째 member는 0을 가짐
• 뒤따르는 member들은 초기화된 숫자를 기준으로 자동으로 증가된 값을 가짐

enum Role { ADMIN = 1, AUTHOR, READ_ONLY };

const person: {
  name: string;
  age: number;
  hobbies: string[];
  role: number;
} = {
  name: 'Max',
  age: 30,
  hobbies: ['sports', 'cooking'],
  role: Role.ADMIN,
};

console.log(Role[2]) // AUTHOR

String Enum

• 각 member가 string literal 또는 다른 string enum의 member를 초기값으로 갖고 있는 enum

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

Heterogeneous Enum

• member가 서로 다른 type의 초기값을 갖고 있는 enum

enum BooleanLikeHeterogeneousEnum {
  No = 0,
  Yes = "YES",
}

Any Type

• any type : 모든 type의 property에 접근 가능함
• 데이터의 type을 모를 때 제외한 대부분의 경우 사용을 권장하지 않음
• type을 명시하지 않으면, complier가 any type으로 가정함

let obj: any = { x: 0 };

obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;
// 모든 코드에서 error가 발생하지 않음

Union Type

• 2가지 이상의 Type이 결합된 Type (예: string | number )

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}
printId(101);
printId("202");
printId({ myID: 22342 }); // Error 발생

• union의 모든 member가 유효할 때만 실행됨

function printId(id: number | string) {
  console.log(id.toUpperCase()); 
  // Error 발생, id가 number일 때는 toUpperCase 메소드 사용 X
}

• union은 추가적인 runtime type 검사가 필요할 수 있음

function combine(input1, input2) {
    var result;
    if (typeof input1 === 'number' && typeof input2 === 'number') {
        result = input1 + input1;
    }
    else {
        result = input1.toString() + input2.toString();
    }
    return result;
}
var combineAge = combine(20, 35);
console.log(combineAge); // 55
var combineName = combine('Max', 'Anna');
console.log(combineName); //MaxAnna

• nuion의 모든 member가 공통 속성을 가지고 있을 때는 추가적인 runtime type 검사 없이 속성을 사용할 수 있음

function getFirstThree(x: number[] | string) {
  return x.slice(0, 3);
  // array와 string 둘 다 slice 메소드를 갖고 있으므로 괜찮음
}

Literal Type

• literal type : string이나 number type을 기반으로 한 type
• const로 선언한 string 변수는 1개의 string 값만 가질 수 있으므로 literal type을 가지고 있음

const constantString = "Hello World";

constantString; // const constantString: "Hello World"

• union type에 결합해서 사용할 때 유용함
• literal type은 member의 값으로 특정 문자열만 허용함 (예: stringA | stringB )

function combine(
  input1: number | string,
  input2: number | string,
  resultConversion: 'as-number' | 'as-text',
) {
  let result;
  if (
    (typeof input1 === 'number' && typeof input2 === 'number') ||
    resultConversion === 'as-number'
  ) {
    result = +input1 + +input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

const combineAge = combine(20, 35, 'as-number');
console.log(combineAge); // 55

const combineStringAge = combine('20', '35', 'as-number');
console.log(combineStringAge); // 55

const combineName = combine('Max', 'Anna', 'as-text');
console.log(combineName); // MaxAnna

Type Aliases

• 똑같은 type을 한 번 이상 재사용하거나 또 다른 이름으로 부르고 싶을 때 사용함 type CustomAlias
• 모든 type에 alias를 부여할 수 있음

type Point = {
  x: number;
  y: number;
};

function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

• union type에도 type alias를 부여할 수 있음

type Combinable = number | string;
type ConversionDescriptor = 'as-number' | 'as-text';

function combine(
  input1: Combinable,
  input2: Combinable,
  resultConversion: ConversionDescriptor,
) {
  let result;
  if (
    (typeof input1 === 'number' && typeof input2 === 'number') ||
    resultConversion === 'as-number'
  ) {
    result = +input1 + +input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

• type alias는 별칭을 사용하는 것임
  • 같은 type의 다른 버전을 만드는 것이 아님

Function Type

• return type : 함수의 반환값 타입 (예: function foo(): number)

  • void type : 아무것도 반환하지 않는 타입 (예: function foo(): void)

• function type : 함수의 매개변수와 반환값을 나타내는 타입 (예: const add : (n1:number, n2:number) => number;)

• callback func type: 콜백함수의 타입을 선언함

function addAndHandle(n1: number, n2: nnumber, cb: (num: number) => void) {
  const result = n1 + n2;
  cb(result)
}
// cb의 반환값 타입 void = ddAndHandle 함수에서 cb 함수의 반환값을 사용하지 않는 다는 것을 의미

addAndHandle(1, 2, (result) => { console.log(result)});

Unknown Type

• unknown type: 사용자가 어떤 입력값을 넣을지 모를 때 사용함
• 추가적인 타입 검사 이후 변수에 할당 가능함
• any 타입보다는 제한적임

Never Type

• never type: 일반적으로 함수의 반환값 타입으로 사용됨
• never를 사용하는 경우, 항상 오류를 출력하거나 리턴값을 절대 보내지 않음을 의미함