μžλ°”μŠ€ν¬λ¦½νŠΈ Javascript둜 μž‘μ„±λ˜μ–΄ λ…Έλ“œnode둜 λ™μž‘ν•˜λŠ” μ›Ή μ‘μš©ν”„λ‘œκ·Έλž¨μ„ νƒ€μž…μŠ€ν¬λ¦½νŠΈ Typescript둜 μž¬μž‘μ„±ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

npm νŒ¨ν‚€μ§€ 쀑 λͺ¨λ“ˆ μ •μ˜κ°€ μ—†λŠ” νŒ¨ν‚€μ§€κ°€ μžˆμŠ΅λ‹ˆλ‹€.

νƒ€μž…μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•  λ•Œ, μ •μƒμ μœΌλ‘œ μ‚¬μš©ν•  μˆ˜κ°€ μ—†μŠ΅λ‹ˆλ‹€.

이 λ•Œ, νŒ¨ν‚€μ§€ μ œμž‘μžμ—κ²Œ λͺ¨λ“ˆ μ •μ˜ νŒŒμΌμ„ μš”μ²­ν•˜κ±°λ‚˜, μž‘μ„±μ€‘μΈ ν”„λ‘œμ νŠΈμ— λͺ¨λ“ˆ μ •μ˜ 파일 .d.ts νŒŒμΌμ„ μž‘μ„±ν•΄μ„œ 문제λ₯Ό ν•΄κ²°ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

예제

예λ₯Ό λ“€μ–΄ showdown-xss-filter νŒ¨ν‚€μ§€λ₯Ό μ‚¬μš©μ€‘μΈ μ½”λ“œκ°€ μžˆμŠ΅λ‹ˆλ‹€.

const xssFilter = require('showdown-xss-filter');

νƒ€μž…μŠ€ν¬λ¦½νŠΈλ‘œ μž‘μ„±μ€‘μΈ μ½”λ“œμ—μ„œ λͺ¨λ“ˆμ˜ μ •μ˜λ₯Ό 찾을 수 μ—†λ‹€κ³  ν•©λ‹ˆλ‹€.

import xssFilter from 'showdown-xss-filter';

μ—λŸ¬ λ©”μ‹œμ§€:

Could not find a declaration file for module β€˜showdown-xss-filter’. β€˜d:/repos/blog-node-backend/node_modules/showdown-xss-filter/showdown-xss-filter.js’ implicitly has an β€˜any’ type.\n Try npm install @types/showdown-xss-filter if it exists or add a new declaration (.d.ts) file containing `declare module β€˜showdown-xss-filter’;

νƒ€μž…μŠ€ν¬λ¦½νŠΈ 컴파일러의 μ œμ•ˆμ„ μ°Έκ³ ν•΄μ„œ @types/showdown-xss-filter νŒ¨ν‚€μ§€λŠ” 검색해도 κ²°κ³Όκ°€ μ—†μŠ΅λ‹ˆλ‹€.

첫번째 μ œμ•ˆμœΌλ‘œ ν•΄κ²°λ˜μ§€ μ•ŠμœΌλ‹ˆ, λ‘λ²ˆμ§Έλ‘œ μ œμ•ˆν•˜λŠ” declare module 'showdown-xss-filter' μ½”λ“œλ₯Ό ν¬ν•¨ν•˜λŠ” μƒˆ μ •μ˜ νŒŒμΌμ„ λ§Œλ“€μ–΄μ•Ό ν•©λ‹ˆλ‹€.

ν•¨μˆ˜μ˜ λͺ¨μ–‘을 ν™•μΈν•˜κΈ° μœ„ν•΄ μ½”λ“œλ₯Ό λ³΄λ‹ˆ, showdown-xss-filter νŒ¨ν‚€μ§€μ˜ λ‚΄μš©μ€ 맀우 κ°„λž΅ν•œ μ½”λ“œλ‘œ μž‘μ„±λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

ν•„μš”ν•œ 것은 xssfilter ν•¨μˆ˜μ˜ μ •μ˜ μ‹λ³„μž Identifier, μΈμˆ˜λ“€ Arguments, λ°˜ν™˜ν˜• Return type μž…λ‹ˆλ‹€.

μ½”λ“œλ₯Ό ν™•μΈν•˜κ³ , μ•„λž˜μ™€ 같이 λͺ¨λ“ˆμ„ μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

λ‹€ν–‰νžˆ showdonw은 λͺ¨λ“ˆ μ •μ˜κ°€ μ‘΄μž¬ν•©λ‹ˆλ‹€. ❀

$ npm install --save-dev @types/showdown
// @types/showdown-xss-filter.d.ts
declare module 'showdown-xss-filter' {
    import Showdown from 'showdown';


    function xssFilter(
        converter?: Showdown.Converter,
    ): Showdown.ShowdownExtension[];

    export default xssFilter;
}

μž‘μ„±ν•œ showdown-xss-filter.d.ts νŒŒμΌμ„ typeRoots 둜 μ§€μ •λœ 디렉터리에 μ €μž₯ν•©λ‹ˆλ‹€.

νƒ€μž…μŠ€ν¬λ¦½νŠΈ ν”„λ‘œμ νŠΈ tsconfig.json νŒŒμΌμ—μ„œ typeRoots 속성을 μ‚¬μš©ν•˜μ§€ μ•ŠμœΌλ©΄ rootDir 둜 μ§€μ •ν•œ 디렉터리에 @types 디렉터리λ₯Ό λ§Œλ“€κ³  κ·Έ μ•ˆμ— μ €μž₯ν•˜λ©΄ λ©λ‹ˆλ‹€.