[TypeScript] 타입스크립트 입문(6) - JSDoc, 유틸리티 타입, 모듈, 타입선언, 네임스페이스

타입스크립트 심화

JSDoc

• https://jsdoc.app
• 타입스크립트를 쓰지 않고도 타입을 선언할 수 있다!
• 타입스크립트에 없는 기능들도 구현 가능
• 문서화 및 배포도 가능!

 

유틸리티 타입

• 전역적으로 사용이 가능한 타입 변환 도구
• 이해하고 사용한다면 생산성을 증가시킬 수 있다
• 직접 만들고 직접 사용하면 이해도를 높일 수 있다!

 

모듈

• 타입스크립트도 자바스크립트 ES2015+처럼 모듈을 선언하여 사용이 가능하다.(ex. import & export)
• 모듈 선언이 없는 경우 전역 범위에서 사용 가능하도록 처리됨
• 3.8 버전부터는 타입 전용 선언 가능(import type & export type)
• 설정 혹은 CLI 지원
    -> tsconfig / module
    -> tsc -module commonjs SomeFileName.ts
• 대부분의 모듈을 지원!
  • AMP / RequireJS
  • CommonJS / Node
  • UMD
  • System
  • ES2015+

/**
 * 모듈
 */

// 내보내기
export const str = 'str'
export { str }
export { str as asStr}

export default class DefaultClass { }

// 가져오기
import someFile from './someFile'
import { someFile } from './someFile'
import { someFile as asSomeFile } from './someFile'

// 타입 선언 내보내기 & 가져오기
export type StrType = string

export interface Person {
    name: string
}

// all Module
export * from 'module1'
export * from 'module2'
export * from 'module3'

 

 

타입 선언(d.ts)

• 타입 선언만 명시되어 있는 파일
• TypeScript Playground에서 확인 가능
• [tsc FileName.ts -declaration]으로 타입스크립트를 빌드하면 자동으로 생성된다.(확장자 .d.ts)
• 자동 완성(inteligence) 등을 위해 유용하게 사용이 가능하다!

 

@types

• React 등 원래 JavaScript로 만들어진 프레임워크나 라이브러리에서 타입을 사용하기 위해서는 @types라는 키워드를 이용해 이후에 오픈 소스로 추가된 타입을 사용할 수 있다!
• 타입 선언(d.ts)이 포함되어있어서 따로 타입을 지정하지 않아도 된다!

 

네임 스페이스

• 이미 많은 프로그래밍 언어에 있는 기능으로, 코드를 캡슐화할 수 있는 수단
• 블럭 내부의 모든 코드들은 명시적으로 내보내지 않는 이상 외부에서 관찰할 수 없다.
• 다른 객체와의 네이밍 충돌을 피하기 위한 코드 블럭 조직화에 도움
• but, 모듈을 지향하고 네임스페이스는 지양하는 경우가 많다.
    -> 차라리 JavaScript 표준 Module의 [import], [export]를 사용
• 컴파일 후 JavaScript 코드로 남는다.
• 타입스크립트의 Triple-Slash 지시자와 자주 사용
  • 단일 XML 태그를 포함한 한 줄 주석으로 주석의 내용은 컴파일러 지시어로 사용
  • 파일 상단에서만 선언 가능
  • 컴파일 시 주석으로 처리됨

/**
 * 네임스페이스
 */
namespace Person {
    interface PersonInfo {
        getInfo(): string
    }

    export const name = "Person"

    export class Me implements PersonInfo {
        getInfo() {
            return this.toString()
        }
    }

    class You implements PersonInfo {
        getInfo() {
            return this.toString()
        }
    }
}

Person.name;
Person.Me;
Person.You; // error!

 

 

 

처음 자바스크립트를 배울 때 그동안 C++이나 Java를 배울 때 당연하게 써왔던 int나 string 등의 타입 없이 모든 변수를 let으로 선언한다는 것에 당황했었다. 하지만 타입스크립트를 배우고 그부분에 대한 불편함을 완전히 해소할 수 있었다. 언어마다 지향하는 목표점이 다르고, 그것을 이루기위해 많은 사람들이 지식을 모아 해결한다는 것이 흥미로웠다. 나도 언젠가는 이러한 생태계에 기여하는 개발자가 되고 싶다!