[TS] 타입스크립트 기초 (1) - 타입

타입

옵셔널 파라미터

functoin log(a: string. b?: string) {
}

log('hello');
log('hello', 'world');

 

---

인터페이스

인터페이스 인덱싱 정의

interface StringArray {
//인덱스에 들어오는건 number, 그 값은 string
    [index: number] : string;
}

var arr : StringArray = ['a', 'b', 'c']
arr[1] = 'd';

 

인터페이스 딕셔너리 패턴

interface StringRegexDictionary {
//왼쪽에 들어오는 객체의 이름을 key로 정하고, string형식으로 제한 / 오른쪽에 있는건 정규식 형식으로
    [key: string] : RegExp;
}

var obj : StringRegexDictionary = {
    sth: /abc/,
}

이런식으로 해둘 때의 장점은,

Object.keys(obj).forEach((value)=> {})
//이런식으로 될때, 뭐 value의 타입을 string으로 고정해둘수있다 => 추론

 

인터페이스 확장(상속)

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

/* interface Developer {
    name: string;
    age: number;
    language: string;
} */

interface Developer extends Person {
    language: string;
}

var me: Developer = {
    language: 'ts',
    age: 100,
    name: '9yu'
}

 

---

타입 별칭

type Mystring = string;
var str: MyString = 'hello';

type Person = {
    name: string;
    age: number;
}

 

타입 별칭과 인터페이스의 차이점

타입 별칭은 새로운 타입을 하나 생성하는 것이 아니라, 정의한 타입에 대해 이름을 부여하는것.

→ 타입은 확장이 되지 않음.

 

---

유니온 타입

function logMessage(value: string | number) {
    console.log(value);
}

logMessage('hello');
logMessage(100);

 

이런 식으로 타입가드를 할 수 있음

function logMessage(value: string | number) {
    if (typeof value === 'number') {
        value.toLocaleString();
    }
    if (typeof value === 'string') {
        value.toString();
    }
    throw new TypeError('삐빅');
}

 

특징

interface Developer {
    name: string;
    sill: string;
}

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

function askSomeone(someone: Develooper | Person) {
    someone.??? 
    // 두가지 인터페이스를 유니온 타입으로 사용할 때는, 공통된 속성만 사용할 수 있다.
    // name만 사용할 수 있음 : 에러 방지 -> 타입가드를 사용하자

}

 

인터섹션 타입

function askSomeone(someone: Developer & Person) {
    someone.name;
    someone.skill;
    someone.age;
}

& : developer와 person이 갖고있는 속성들을 모두 사용할수 있음

 

유니온 타입과 인터섹션 타입 차이점

//인터섹션 타입을 사용했을때,
askSomeone({ name: '디벨로퍼', skill: '웹 개발'}) // -> 오류남

//name, skill, age 3개 다 넘겨야 오류 안남

//유니온 타입 사용 예 : 이렇게 같은 함수에 다른 인자로 넘겨야 할때
askSomeone({ name: '디벨로퍼', skill: '웹 개발'})
askSomeone({ name: '디벨로퍼', age: 100})

 

---

이넘

// 이넘 : 특정 값들의 집합 
// 기본값 숫자형 이넘: 해당값들은 인덱스값
enum Shoes {
    Nike,
    Adidas
}

/* enum Shoes {
    // 이런식으로 문자로 초기화 가능
    Nike = '나이키',
    Adidas = '아디다스'
} */

var myShoes = Shoes.Nike;
console.log(myShoes) // 0

 

활용

enum Answer {
    Yes = 'Y',
    No = 'N',
}

/* function askQuestion(answer: string) {
    if (answer === 'yes'){
        console.log('정답입니다')
    }
    if (answer === 'no') {
        console.log('오답입니다')
    }
} */

function askQuestion(answer: Answer) {
    if (answer === Answer.Yes){
        console.log('정답입니다')
    }
    if (answer === Answer.No) {
        console.log('오답입니다')
    }
}

askQuestion(Answer.Yes);

이런식으로 enum에서 제공하는 값만 넘길수있도록 설정할 수 있음 (드롭다운 등의 목록에서 필요한 값들)

 

클래스

class Person {
	// 이런식으로 타입스크립트 문법을 통해 추가 설정 가능
	private name: string;
	public age: number;
	readonlu log: string;

	constructor(name: string, age: number) {
		console.log('생성되었습니다');
		this.name = name;
		this.age = age;
	}
}

var seho = new Person('9yu', 30);