TypeScript -16-

mh·2022년 5월 14일

typescript

TypeScript

목록 보기

16/17

Photo by Jerome on Unsplash

JS파일을 TS파일에서 사용하기

JS에서 TS로 마이그레이션(이전)하기

새로운 모듈yourPackage.js 생성 후 다음과 같이 작성

export function start(config) {
    return true;
}
export function end(code) {
    return code + 1 ;
}

tsconfig에 allowJs를 true 해주면 자바스크립트 모듈을 그대로 import 할 수 있음

만약 d.ts 파일이 존재하고 해당 모듈의 타입을 정의하면 타입스크립트는 무조건 d.ts파일을 불러옴

콜시그니처를 추론중인 TS
start란 함수에 config란 인수를 받는데 any타입이고, bool값을 반환받음

end는 code도 any고 반환값도 any임

이렇게 JS와 TS를 섞어서 작성 할 수 있다.

TS가 JS를 인식하지만, 타입스크립트로 바꾸고(마이그레이션)하고 싶지 않을때

왜? - 대규모 프로젝트의 코드 -> 코드를 변경하고 삭제하기 까다로움 -> 자바스크립트 인 채로 나둬야 할 때 -> JS파일을 그대로 두면서 TS의 보호기능을 사용하고 싶을때

@ts-check

최상단에 주석으로 @ts-check를 입력

아래와 같이 TS를 적용한것처럼 에러를 출력한다.

그러나 JS기때문에 TS문법은 사용하지 못하고 JSDoc이란걸 사용해야함

JSDoc

주석으로 이루어진 문법
함수 바로 위에 주석을 달아주면 TS가 이 주석을 읽을 수 있음

/**를 입력하면 자동완성

// @ts-check
/**
 * 프로젝트 시작
 * @param {*} config 
 * @returns 
 */
export function start(config) {
    return true;
}
export function end(code) {
    return code + 1 ;
}

첫번째 줄에 이 함수에 대한 설명을 해줄 수 있음

// @ts-check
/**
 * 프로젝트 시작
 * @param {object} config 
 * @returns 
 */
export function start(config) {
    return true;
}
export function end(code) {
    return code + 1 ;
}

두번째 줄 @param {*} config은 config라는 파라미터를 받을 것이고 {}안의 타입을 받을 것임을 나타냄

// @ts-check
/**
 * 프로젝트 시작
 * @param {object} config 
 * @param {boolean} config.debug
 * @returns 
 */
export function start(config) {
    return true;
}
export function end(code) {
    return code + 1 ;
}

*을 추가하고(엔터치면 자동으로 삽입됨) 위와 같은 형태의 @param {} config config파라미터(객체) 안에 있는 값의 타입을 설정 해 줄 수 있음

// @ts-check
/**
 * 프로젝트 시작
 * @param {object} config 
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns 
 */
export function start(config) {
    return true;
}
export function end(code) {
    return code + 1 ;
}

config파라미터(객체) 안의 url의 타입을 string으로 설정

// @ts-check
/**
 * 프로젝트를 시작하는 함수
 * @param {object} config 
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns boolean
 */
export function start(config) {
    return true;
}
export function end(code) {
    return code + 1 ;
}

이 함수의 반환값을 boolean으로 설정

만약 반환값이 잘못되었을 경우(void로 설정) 다음과 같은 에러

end 함수도 이렇게 설정할 수 있음

// @ts-check
/**
 * 프로젝트를 시작하는 함수
 * @param {object} config 
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns boolean
 */
export function start(config) {
    return true;
}
/**
 * 프로젝트를 종료시키는 함수
 * @param {number} code 
 * @returns number
 */
export function end(code) {
    return code + 1 ;
}