Typescript 기본타입

타입스크립트 = 타입이 입혀진 자바스크립트 의미

 

왜 사용하는가?

1. 에러방지

2. 코드의 자동완성과 가이드 

 

타입스크립트 라이브러리 설치

npm i typescript

자바스크립트 파일로 컴파일

tsc app.ts

 

기본타입

// js 문자열 선언
var str = 'hello';

// TS 문자열 선언
var str: string = 'hello';

// TS 숫자
let num: number = 10;

// TS 배열
let arr: Array<number> = [1,2,3];
let heroes: Array<string> = ['Capt','Thor','Hulk',10]; // Type 'number' is not assignable to type 'string'.
let items: number[] = [1,2,3];

/** TS 튜플 
 * 배열의 각각 인덱스에 타입이 정해져있다.
 **/
let address: [string, number] = ['gangnam','pangyo']; // Type 'string' is not assignable to type 'number'

// TS 객체
let obj: object = {};

let person: object = {
  name:'capt',
  age: 100
}

let person2 : {name: string, age: number} = {
  name: 'thor',
  age: 1000
}

// TS 진위값
let show: boolean = true;

// 함수의 스펙에 인터페이스를 활용
interface SumFunction {
  (a: number, b: number): number;
}
var sum: SumFunction;
sum = function(a: number, b: number): number {
  return a + b;
}

// 인덱싱
interface StringArray {
  [index: number]: string;
}
var arr: StringArray = ['a','b','c'];
// arr[0] = 10; Type 'number' is not assignable to type 'string'

// 딕셔너리 패턴
interface StringRegexDictionary {
  [key: string]: RegExp;
}
var obj: StringRegexDictionary = {
  css: /\.css$/,
  // 'css2': 'abc', Type 'string' is not assignable to type 'RegExp'.ts(2322)

}

// Union Type (혹시 두개이상의 인터페이스 타입을 섞어쓰면 공통된 타입밖에 쓸 수 없다.)
function logMessage(value: string | number) {
  if (typeof value === 'number') {
    value.toLocaleString(); // value가 number에 대한 API나 속성들을 사용할 수 있다.
    console.log('value는 숫자입니다.');
  }
}

/**
 * Intersection Type 유니온이 교집합이면 인터섹션은 합집합 
 * 하지만 유니온 타입이 더 많이 쓰임
 * 모두 만족하는 속성들을 다 넘겨야 되게때문에 유연성이 떨어짐*/
 
 // Enum  
 enum Answer {
  Yes = 'Y',
  No = 'N'
}

function askQuestion(answer: Answer) {
  if (answer === Answer.Yes) {
    console.log('정답입니다.');
  }
  if (answer === Answer.No) {
    console.log('오답입니다.');
  }
}
// askQuestion('예스'); Error
// askQuestion('yes!'); Error
// askQuestion('ㅇㅇ'); Error
askQuestion(Answer.Yes);