TS 타입

 

TS와 JS 타입 차이점

 

- TS는 Static Types, 개발 중간에 타입을 체크

- JS는 Dynamic Types, 런타임에 진입해야만 타입을 체크 (실제로 실행을 해봐야 오류를 잡을 수가 있다)

 

// JavaScript

function add(a, b) {
  if (typeof a !== 'number') || typeof b !== 'number') {
    throw new Error('Incorrect input!');
  }
  return a + b;
}

const result = add(50, 25);

// TypeScript
function add(a: number, b: number) {
  return a + b;
}

const result = add(50,25);

 

Primitive Type

 

- 오브젝트와 레퍼런스 형태가 아닌 실제 값을 저장하는 자료형

- ES6 (ES2015) 기준 6가지

• boolean
• number
• string
• symbol
• null
• undefined

 

Boolean

 

let isDone: boolean = false;

isDone = true;

// 출력 결과 'boolean'
console.log(typeof isDone)

let isOk: Boolean = true;

// 아래는 오류 발생
//let isNotOk: boolean = new Boolean(true);

 

Number

 

// JS와 같이 TS의 모든 숫자는 부동 소수점 값

// 10진수 리터널
let decimal: number = 6;

// 16진수 리터널
let hex: number = 0xf00d;

// 2진수 리터널
let binary: number = 0b1010;

// 8진수 리터널
let octal: number = 0o744;

let NotANumber: number = NaN;

let underscoreNum: number = 1_000_000;

 

String

 

let myName: string = 'Yoo';

myName = "LEE";

// Template String
// 행에 걸쳐있거나, 표현식을 넣을 수 있는 문자열
// backtick 기호 (``) 에 둘러쌓임
// 포함된 표현식은 `${ expr }` 

let Name: string = 'IT Blue';
let age: number = 55;

let setence: string = `Hello, My Name is ${ Name }.
I'll be ${ age + 1 } years old next month.`;

// 출력 결과
// Hello, My Name is IT Blue.
// I'll be 56 years old next month.
console.log(setence)

 

Symbol

 

// Symbol() 함수로 symbol 타입을 생성
// Symbol은 프리미티브 타입의 값을 담아서 사용
// 고유하고 수정이 불가능한 값으로 생성
// 주로 접근을 제어하는데 사용

// 출력 결과: false
console.log(Symbol('food') === Symbol('food'));
// 출력 결과: symbol
console.log(typeof Symbol('Yoo'));

const sym = Symbol();

const obj = {
  [sym]: "value",
};

// 출력 결과: value
console.log(obj[sym]);

 

Null & Undefined

 

// null 이라는 값으로 할당된 것을 null 이라고 함
// 무언가가 있는데, 사용할 준비가 덜 된 상태
// null 타입은 null 값만 가질 수 있다
// 런타임에서 typeof 사용 시에 값은 object

// 값을 할당하지 않은 변수는 undefined 라는 값을 가짐
// 무언가가 아예 준비가 안된 상태
// object 의 property 가 없는 경우에도 undefined
// 런타임에서 typeof 사용 시에 값은 undefined

// let MyNmae: string = null; (오류)
// let u: undefined = null; (오류)

let v: void = undefined;

let union: string | null = null;
union = "Yoo";

let n: null = null;
// object
console.log(typeof n);

let u: undefined = undefined;
// undefined
console.log(typeof u);

 

---

 

Object

 

-  non-primitive (primitive type 이 아닌 것) 을 나타냄

 

// create by object literal
const person1 = {name: 'Yoo', age: 27};

// person1 is not "object" type
// person1 is "{name: string, age: number}" type.

// create by Object.create
const person2 = Object.create({name: 'Kim', age: 30});

let obj1: object = {};
obj1 = {name: 'TS'};
obj1 = [{name: 'TS'}];

// 아래는 에러 발생
// obj = 25; 
// obj = "LEE";
// obj = true;
// obj = Symbol();
// obj = null;
// obj = undefined;

 

declare function create(o: object | null): void;

create({ prop: 0 }); // 성공
create(null); // 성공

create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류

 

Array

 

// 배열 선언 (2가지 방법)
// let list: number[] = [1, 2, 3]; 
// let list: Array<number> = [1, 2, 3] ; (제네릭 배열 타입)

// let list: number[] = [1, 2, 3, "4"]; (오류 발생)
let list: (number | string)[] = [1, 2, 3, "4"]; 

 

Tuple

 

// tuple
// 요소의 타입과 개수가 고정된 배열을 표현

let x: [string, number];

x = ["Hello", 39];

// x = [10, 'Yoo']; (오류 발생)

const person: [string, number] = ["Yoo", 25];

const [first, second] = person;
// const [first, second, third] = person; (오류 발생)

 

Any

 

- 어떤 타입이어도 상관없는 타입

- 컴파일 타임에 타입 체크가 정상적으로 이뤄지지 않기 때문에 최대한 쓰지 않는 것을 권장

 

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; //

 

Unknown

 

- TS 3.0 부터 지원

- unKnown 타입도 any와 마찬가지로 모든 타입의 값이 할당될 수 있다

- unKnown 타입으로 선언된 변수는 any를 제외한 다른 타입으로 선언된 변수에 할당될 수 없다

 

declare const maybe: unknown;

// const aNumber: number = maybe; (오류)

if (maybe === true) {
  const aBoolean: boolean = maybe;

  // const aString: string = maybe; (오류)
}

if (typeof maybe === 'string') {
  const aString: string = maybe;

  // const aBoolean: boolean = 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) {}
}

 

Void

 

- 어떤 타입도 존재할 수 없음을 의미 (any의 반대)

- 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰임

 

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

  return;
}

returnVoid('리턴X');