Typescript

[Typescript] 클래스와 접근제어자, 제네릭, tsconfig.json 구성 옵션

furaha 2023. 9. 26. 15:46
반응형

클래스와 접근 제어자

 

class UserA {
  // 블록 안에 상단에 타입지정 필요
  public first: string
  protected last: string
  private age: number
  constructor(first: string, last: string, age: number){
    this.first = first
    this.last = last
    this.age = age
  }
  
  // 매개변수로 블록 안의 내용이 같기 때문에 이렇게 변경 가능
    constructor(
  	public first: string
  	protected last: string
  	private age: number
  ) {}
  
  getAge(){
    return `${this.first} ${this.last} is ${this.age}`
  }
}

 

접근 제어자

public - 어디에서나 자유롭게 접근 가능, 클래스 바디에서 생략 가능

protected - 나와 파생된 후손 클래스 내에서 접근 가능

private - 내 클래스에서만 접근 가능

 

1) public

class UserB extends UserA {
  getAge() {
    return `${this.first} ${this.last} is ${this.age}`   ---> private 오류
  }
}

// 상속받아서 사용중

const neo = new UserA('Neo', 'Anderson', 102)
console.log(neo.first)
console.log(neo.last)      ---> protected 오류
console.log(neo.age)

public 이기 때문에 어디에서나 접근해서 자유롭게 사용이 가능하다 (생략 가능하지만 명시적으로 작성하는 것도 좋은 방법)

 

 

2) protected 는

상속에서는 사용 가능하지만

new 인스턴스 생성은 불가능

 

3) private은 내 클래스에서만 사용 가능

 

 

제네릭 문법

 

1) 함수

 

<> 꺽새 안에 본인이 사용하고자 하는 타입을 지정해줌

 

function toArray<T>(a: T, b: T){
  return [a,b]
}

consonle.log(
  toArray<string>('Neo', 'Anderson')
  //<string> 을 제거해도 타입 추론을 통해서 타입이 string 으로 될 것
)

 

첫번째 인수를 통해서 타입 추론 가능

 

 

2) 클래스

 

class User<P> {
 public payload
 constructor(payload: P){
   this.payload = payload
 }
 
 // constructor(public payload: P) {} 로 간략화 가능
 
 getPayload() {
   return this.payload
 }
 
}

interface UserAType {
  name: string
  age: number
  isValid: boolean
}

const heropy = new User<UserAType>({
  name?: 'Heropy',
  age: 85,
  isValid: true
})

 

3) 인터페이스

 

interface MyData<T> {
  name: string
  value: T
}

const dataA: MyData<string> = {
  name: 'Data A'
  value: 'Hello world'
}

const dataB: MyData<number> = {
  name: 'Data B'
  value: 10
}

// 제약 조건
interface MyData<T extends string | number> {
  name: string
  value: T
}

 

 

tsconfig.json 구성 옵션

 

- 컴파일하기 위한 세부 옵션

compilerOptions

 

- 컴파일될 ES(JS) 버전 명시 - 'ES2015' 권장

target : "ES3"

 

- 모듈 시스템 지정 - "CommonJS", "AMD", "ESNext"

module: "CommonJS" (node.js 환경, 기본값임 / ESNext 는 제일 최신 버전)

 

- 모듈 해석 방식 지정 - "Node", "Classic"

moduleResolution: "Node"

 

- ESM 모듈 방식 호환성 활성화 여부

esModuleInterop: false

 

- 모든 파일을 모듈로 컴파일, import 혹은 export 키워드 필수

isolatedModules: false

 

- 모듈 해석에 사용할 기준 경로 지정

baseUrl : ./

 

- 컴파일러가 참조할 타입 선언(d.ts)의 경로를 지정

typeRoots : ["./node_modules/@types"]

 

- 컴파일에서 사용할 라이브러리 지정

lib : []

 

- 더 엄격한 타입 검사 활성화

strict : false

 

- 컴파일할 파일 경로 목록

include

 

- 컴파일에서 제외할 파일 경로 목록

exclude

 

 

반응형