엘리스 SW 엔지니어 트랙 23일차
박성국 강사님 실시간 강의
23 (1/2) :: TypeScript Interface, 사용 이유 & 예시, 상속
링크 => https://forgottenknowledge.tistory.com/entry/23-12-TypeScript-Interface-%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0-%EC%98%88%EC%8B%9C-%EC%83%81%EC%86%8D
양이 많아서 2개로 쪼갰다
제네릭 시작!
Generic
데이터 타입 일반화(Generalize)
재사용성 높은 함수를 만들 때 사용
???? 이해 안간다
밑에 다가가면 이해가길
<T> 이녀석이 제너릭
number, string 등 넣어주는 곳에 사용하는데
좀 더 유연하게 사용할 수 있어 보인다
function getSize<T>(arr: T[]): number {
return arr.length
}
const arr1 = [1, 2, 3]
console.log(getSize(arr1))
const arr2 = ['a', 'b', 'c']
console.log(getSize(arr2))
Generic 사용 함수
function toPair<T, U>(a: T, b: U): [T, U] {
return [a, b]
}
toPair<string, string>('1', '2') // Good
toPair<string, number>('1', '2') // Error
interface Mobile<T> {
name: string
price: number
option: T
}
const m1: Mobile<object> = {
name: 's1',
price: 1000,
option: {
color: 'red'
}
}
const m2: Mobile<string> = {
name: 's1',
price: 1000,
option: 'red'
}
// 같은 효과 다른 문법 1
interface GenericLogTextFn<T> {
}
// 같은 효과 다른 문법 2
interface GenericLogTextFn {
<T>(text: T): T
}
클래스에도 사용
class Stack<T> {
private data: T[] = []
constructor() {}
push(item: T): void {
this.data.push(item)
}
pop(): T | undefined{
return this.data.pop()
}
}
Union Type
타입 여러개 연결 하려고 | 이거 사용하는 것
interface Person {
name: string
age: number
}
interface Developer {
name: string
skill: string
}
function introduce(someone: Person | Developer) {
someone.name // Good
someone.age // Error
someone.skill // Error
}
합치기
interface Person {
name: string
age: number
}
interface Developer {
name: string
skill: string
}
function introduce(someone: Person & Developer) {
someone.name
someone.age
someone.skill
}
keyof
function getProperty<T, O extends keyof T>(obj: T, key: O) {
return obj[key]
}
let obj = {a: 1, b: 2, c: 3}
// 'a' | 'b' | 'c'
getProperty(obj, 'a')
Type Assertion
interface Person {
name: string
age: number
}
interface Developer {
name: string
skill: string
}
function introduce(someone: Person | Developer) {
someone.name // Good
(someone as Person).age
(someone as Developer).skill
}
'Web Dev > ELICE' 카테고리의 다른 글
24 :: TypeScript Generic, Constraints, keyof (0) | 2021.11.26 |
---|---|
23 (3/3) :: TypeScript 복습, 실습 (0) | 2021.11.25 |
23 (1/3) :: TypeScript Interface, 사용 이유 & 예시, 상속 (0) | 2021.11.25 |
22 :: 타입스크립트 복습 (0) | 2021.11.24 |
21 (2/2) :: TypeScript 함수 사용, class (0) | 2021.11.23 |