[TS] 기본 문법 2

1. 함수 - 명시적 this 타입, 오버로딩

 

// 함수 - 명시적 this
interface Cat {
    name: string
    age: number
}
const cat: Cat = {
    name: 'lucy',
    age: 3
}

// 명시한 this는 cat 타입이라는 의미
function hello(this:Cat, message: string) {
    console.log(`hello ${this.name}, ${message}`)
}
// hello 함수를 cat 객체 데이터의 메소드처럼 호출
hello.call(cat, 'you are pretty awesome!')

 

// 함수 - 오버로딩
// 1)
function add1(a:string, b:string) {
    return a+b
}
function add2(a:number, b:number) {
    return a+b
}
add1('hello ', 'world')
add2(1,2)
add1('hello ', 2)
add2('hello ', 2)

// 2)
function add(a:string, b:string):string // 타입 선언1
function add(a:number, b:number):number // 타입 선언2

// 함수 구현(위 타입 선언이 어떤 방식으로든 할당될 수 있다는 의미)
// 타입 선언을 여러개 하면 같은 함수라도 타입을 사용하는 방법을 여러 개로 관리할 수 있음
function add(a:any, b:any) { 
    return a+b
}
add('hello ', 'world')
add(1,2)
add('hello', 2)

 

 

2. 클래스와 접근 제어자

 

// 클래스, 접근 제어자 (Access Modifiers)
// public - 어디서나 자유롭게 접근 가능, 클래스 바디에서 생략 가능
// protected - 나와 파생된 후손 클래스 내에서 접근 가능(본인을 상속해서 사용하고 있는 클래스)
// private - 내 클래스에서만 접근 가능

class UserA {
    constructor(
        public first: string = '', 
        protected last: string = '', 
        public age: number = 0) {
        // 생략 가능
        // this.first = first
        // this.last = last
        // this.age = age
    }
    getAge() {
        return `${this.first} ${this.last} is ${this.age}`
    }
}
class UserB extends UserA {
    getAge() {
        return `${this.first} ${this.last} is ${this.age}`
    }
}
class UserC extends UserB {
    getAge() {
        return `${this.first} ${this.last} is ${this.age}`
    }
}

const neo = new UserA('neo', 'and', 102)
console.log(neo.first)

 

3. 제네릭 - 함수, 클래스, 인터페이스 & 제약 조건

 

// 제네릭(Generic)
// 함수
// 오버로딩 반복 줄이기
// 타입추론 활용 많이!
interface Obj {
    x:number
}
type Arr = [number, number]

// function toArrary(a:string, b:string):string[]
// function toArrary(a:number, b:number):number[]
// function toArrary(a:boolean, b:boolean):boolean[]
// function toArrary(a:Obj, b:Obj):Obj[]
// function toArrary(a:Arr, b:Arr):Arr[]
// function toArrary(a:any, b:any) {
//     return [a,b]
// }

// T는 타입이라는 매개변수
function toArrary<T>(a:T, b:T){
    return [a,b]
}

console.log(
    // T 매개변수가 지정되어야하는 타입 명시
    // 'neo'는 string이니까 b도 string으로 지정되어야함
    // 첫번째 인수로 타입추론 가능
    toArrary<string>('neo', 'ㅁㄴ'),
    toArrary(1,2),
    toArrary(true, false),
    toArrary({x:1}, {x:2}),
    // Arr 추가 시, 튜플 타입이 되면서 인수 갯수가 같아야함
    toArrary<Arr>([2,3], [3, 4,32]) // number[]
)

 

// 클래스
// P = payload
class User<P> {
    // public payload : P

    // 매개변수명 = 내부에서 사용하는 속성명이고, this처럼 할당으로 시작한다면
    // 매개변수 부분에서 속성을 초기화 가능
    constructor(public payload : P) {
        // this.payload = payload
    }
    getPayload() {
        return this.payload
    }
}

// USER 클래스를 사용할때마다 다른 타입을 지정하고 싶다면 GENERIC 문법 사용 
interface UserAType {
    name: string
    age: number
    isValid: boolean
}
interface UserBType {
    name: string
    age:number
    emails: string[]
}
const test = new User<UserAType>({
    name: 'test',
    age: 20,
    isValid:true,
    email:[] // userAType과 일치하지 않음
})
const neo = new User<UserBType>({
    name:'neo',
    age:2,
    emails:['test@gmail.com']
})

 

// 인터페이스, 제약 조건(Constraints)
// T 타입 변수는 string, number[]로 type 조건 걸음
// 다양한 type이 들어오는 것 방지
interface MyData<T extends string | number[]> {
    name: string
    value: T
}
// 할당 연산자로 객체데이터 할당하고, type 명시
// string은 <T>로 들어감
const dataA : MyData<string> = {
    name:'Data A',
    value: 'Hello world'
}
const dataB : MyData<number> = {
    name: 'Data B',
    value: 1234
}
const dataC : MyData<boolean> = {
    name: 'Data C',
    value: true
}
const dataD : MyData<number[]> = {
    name: 'Data D',
    value: [1,2,34]
}

 

 

4. 패키지의 타입 선언

// 패키지 타입 선언
// 외부에서 설치한 패키지의 type 선언이 필요할 때
// 방법 1)
// npm i lodash
// definitelyTyped github 참고하면 lodash 타입을 가져와서 사용가능한 것 확인
// 아래 방법으로 하지 않아도 npm i @types/lodash -D로 dts 파일 생략 가능

// 방법 2)
// 삼중 슬래시 지시자 / 참조 태그 사용으로 다른 파일명 import 가능
// /// <reference path="./main.d.ts"/>

// lodash는 js라, lodash.d.ts로 패키지의 내용 타입 설정
import _ from 'lodash'

const str = 'the brown fox jumps'

console.log(_.camelCase(str))
console.log(_.snakeCase(str))

 

lodash.d.ts

// dts 파일 : ts 선언 포함(타입에 대한 내용만)
// 파일명 lodash, 확장자 ts 사이 d(declare) 추가

// lodash 타입 선언
declare module 'lodash' {
    interface Lodash {
        camelCase : (str:string) => string
        snakeCase : (str:string) => string
    }
    const _ : Lodash
    export default _
}

 

5. 타입 가져오기와 내보내기

 

// 함수, 타입 가져오기 / 내보내기
import {getFullName, User} from './user'

const test  : User = {
    firstName:'test',
    lastName:'a',
    age:50,
    isValid:true
}
const fullName = getFullName(test)

console.log(fullName)
console.log(test.isValid)

 

user.ts

// 인터페이스 내보내기
export interface User {
    firstName : string
    lastName : string
    age: number
    isValid: boolean
}

export function getFullName(user:User) {
    return `${user.firstName} ${user.lastName}`
}

 

 

6. tsconfig.json 구성 옵션

 

{
    // 컴파일러 옵션 지정
    "compilerOptoins" : {
        // 컴파일될 ES(JS) 버전 명시 - "ES2015" 권장
        "target":"ES2015",
        // 모듈 시스템 지정 - ECMAScript 최신 버전 사용
        // "CommonJS(NODE 환경-DEFAULT)", "AMD", "ESNext(= ESM, 브라우저 환경)"
        "module" : "ESNext",
        // 모듈의 해석 방식 지정 - "Node(DEFAULT)", "Classic"
        // NODE : 경로를 지정할 때 특정 폴더 안에 있는 index 이름의 js 파일은 생략 가능해짐
        "moduleResolution" : "Node",
        // ESM 모듈 방식 호환성 활성화 여부
        // js의 ESM과 nodejs의 common.js를 호환하여 모두 사용할 수 있는 구조로 만듦
        "esModuleInterop" : false,
        // 모든 파일을 모듈로 컴파일, import 혹은 export 키워드 필수
        "isolatedModules" : true,
        // 모듈 해석에 사용할 기준 경로 지정
        "baseUrl": "./",
        // 컴파일러가 참조할 타입 선언(d.ts)의 경로 지정
        "typeRoots": ["./node_modules/@types"],
        // TS를 JS로 컴파일할 때 사용해야하는 LIB 목록 - "EXNest", "DOM"
        "lib" : ["ESNest", "DOM"],
        // 더 엄격한 타입 검색 활성화, 암시적 타입 검사를 활성화 할 수 있음
        "strict" : true
    },
    // 컴파일 할 ts 경로
    "include": [
        "src/**/*.ts"
    ],
    // ts-> js 컴파일 시, 제외할 경로
    "exclude": [
        "node_modules"
    ]
}