{Typescript} 1.데이터 타입 / 2.함수 / 3.인터페이스 / 4.type aliases / 5.union, intersection type / 6. enum

1. 데이터 타입

String : 문자열

let str: string = 'hello';

number : 숫자

let num: number = 10;

boolean : 부울값

let show:boolean = true;

Array / T[] : 배열

let arr: Array<number> = [1, 2, 3];
let heroes: Array<string> = ['Capt', 'Thor', 'Hulk', 10];
let items: number[] = [1, 2, 3];

[T1, T2] : 튜플

배열과 달리 각 인덱스별 타입을 다르게 설정할 수 있음

let address: [string, number] = ['gangnam', 10];

object : 객체

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

let person2: { name: string, age: number } = {
    name: 'jerry',
    age: 10
};

2.function : 함수

• input 파라미터와 return 값의 타입을 모두 정의

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

• return 값의 타입이 명확한 경우, return 타입 생략 가능

function sum(a: number, b: number){
    return a + b;
}

• 옵셔널 파라미터 : ? 를 이용하여 옵셔널 파라미터임을 표현

function log(a: string, b?: string,c?:string) {
    console.log(a);
    if (b) {
        console.log(b);
    }
    if (c) {
        console.log(c);
    }
}

• any

function logMessage(value: any) {
    console.log(value);
}

logMessage('heello');
logMessage(100);

3. interface : 인터페이스

1) 변수 타입으로 적용

interface User{
    age: number;
    name: string;
}

let jerry: User = {
    age: 30,
    name: 'jerry'
}
  
let jerry2 = {
    name: 'jerry',
  	age: 30
}

function getUser(user: User) {
    console.log(user);
}

getUser(jerry);
getUser(jerry2);
  

2)함수 스펙(구조)로 활용

interface SumFunction{
    (a: number, b: number): number;
}

let sum: SumFunction;
sum = function (a: number, b:number): number {
    return a + b;
}

3) number로 인덱싱

interface StringArray{ 
    [index: number]: string;

}

let arr2: StringArray = ['a', 'b', 'c'];

4) 딕셔너리 패턴

interface StringRegexDictionary{
    [key: string]: RegExp;
}

let obj2: StringRegexDictionary = {
    cssFile: /\.css$/,
    jsFile: /\.js$/,
}

obj2['cssFile'] = /a.css/;

5) 인터페이스 확장(상속)

interface Person{
    name: string;
    age: number;
}

interface Developer extends Person{
    language: string;
}

let jerry: Developer = {
    language: 'ts',
    age: 100,
    name: 'jerry'
}

4. type aliases

type Mystring = string;
let str2: Mystring = 'heelo';

5. union, intersection type

union

• union 변수 선언

let jerry5: string | number | boolean;  

• 함수 input parameter union 타입

function logMessage2(value: string | number) {
    if (typeof value === 'number') {
        value.toLocaleString();
    }
    else if (typeof value === 'string') {
        value.toString();
    }
    throw new TypeError('value must be string or number');
    
}
logMessage2('helelo');
logMessage2(1000);

• interface union 타입

interface Developer2 {
    name: string;
    skill: string;
}

interface Person{
    name: string;
    age: number;
}

function askSomeone(someone: Developer2 | Person) {
    // 공통 요소만 사용가능
     console.log(someone.name);
    
    // 검증없이 바로 사용 불가
    // someone.skill
    // someone.age
}

intersection

  
// intersection을 사용하는 경우, Developer2와 Person 두가지 타입을 모두 충족시킬수있는 새로운 Type이 적용
  
function askSomeone2(someone: Developer2 & Person) {
    console.log(someone.name);
    console.log(someone.skill);
    console.log(someone.age);
}

//union과 다르게 argument를 모두 넘겨줘야함
askSomeone2({ name: '디벨로퍼', skill: 'nodejs', age:30 });

6. enum

• 숫자형

// 초기화 없을 경우 0부터,
// 초기화 할 경우, 초기화 한 값부터 +1증가
enum Shoes {
    Nike = 10,
    Adidas,
    Prospects,
}

let myShoes = Shoes.Nike;
console.log(myShoes); 

• 문자형

enum StrShoes{
    Nike = '나이키',
    Adidas = '아디다스',
}

let strShoes = StrShoes.Adidas;
console.log(strShoes);

• 함수 파라미터에 적용

enum Answer{
    YES = 'Y',
    NO = 'N'
}

function askQuestion(answer: Answer) {
    if (answer === Answer.YES) {
        console.log('정답입니다.');
    }
    else if (answer === Answer.NO) {
        console.log('오답입니다.');
    }
}

askQuestion(Answer.YES);
askQuestion(Answer.NO);

참고 자료

[인프런] 타입스크립트 입문 - 기초부터 실전까지
[공식문서] https://www.typescriptlang.org/docs/
[타입스크립트핸드북] https://joshua1988.github.io/ts/intro.html