정보실

웹학교

정보실

javascript TypeScript를 사용하지 않고 JavaScript에서 유형을 확인하는 방법

본문

TypeScript는 Microsoft에서 도입한 새로운 언어이며 기본적으로 유형이 있는 JavaScript입니다 (브라우저에서 실행되도록 JavaScript로 컴파일).


이제는 일부 테스트 프로젝트에서 사용했지만 여러 가지 이유로 TypeScript에서 자습서를 작성하지 않는 경향이 있습니다.


첫 번째는 주로 초보자 자습서를 작성하고 TypeScript는 일반적으로 사람들이 시작하는 것이 아닙니다.


또한 TypeScript로 글을 쓰기 시작하면 혼란스러울 것입니다. 무엇에 대해 이야기하고 있습니까?


JavaScript가 TypeScript 파일에 잘 맞을 수 있지만 TypeScript 팬은 JavaScript 자습서를 계속 사용할 수 있습니다.


따라서 웹 플랫폼을 기반으로 하는 기술이 아닌 웹 플랫폼의 기본을 고수합니다.


JavaScript에서 유형을 사용하면 도움이 되는 경우가 있습니다.


멋진 Paul Lewis의 비디오 덕분에 Visual Studio Code를 사용하여 실제로 JavaScript로 유형을 가질 수 있음을 발견했습니다!


먼저, 아직 설치하지 않은 경우 TypeScript를 설치해야 합니다.

npm install -g typescript


그런 다음 tsconfig.json 파일을 프로젝트의 루트에 추가하십시오. src 폴더에 JavaScript 파일이 있다고 가정하면 해당 파일에 필요한 최소 구성 량입니다.

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ]
}


폴더를 제외하기로 결정할 수 있습니다. 예를 들어 node_modules를 제외하는 것이 좋습니다.

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ],
  "exclude": [
    "node_modules",
  ]
}


이제 VS Code는 JavaScript 코드에서 유형 오류를 가리킬 수 있습니다.

아무 것도 하지 않아도 자동으로 수행 할 수 있습니다.


특히, 기본값을 사용하여 함수 매개 변수 유형을 유추 할 수 있습니다.


times에 기본값 2가 할당된 이 함수가 있다고 가정 해 봅시다.

const multiply = (aNumber, times = 2) => {
  return aNumber * times
}


이제 두 번째 매개 변수에 기본값이 있으므로 이 함수를 사용하여

multiply(20)


20에 2를 곱하거나 10을 곱하려면 다음과 같이하십시오.

multiply(20, 10)


그러나 예를 들어 multiply (20, 'hey')와 같은 두 번째 매개 변수로 문자열을 전달하면 VS Code에서 문제가 있음을 알려줍니다.


''hey ''유형의 인수는 'number'유형의 매개 변수에 지정할 수 없습니다. 


이러한 유형 검사는 기본값이 없는 인수에 대해서도 수행 할 수 있습니다. 일반적으로 API 생성기로 사용되는 JSDoc을 사용하고 유형 힌트를 추가하면 됩니다.

/**
 * @param {number} aNumber
 */
const multiply = (aNumber, times = 2) => {
  return aNumber * times
}


주석 시작 부분의 이중 **을 잊지 마십시오. 그렇지 않으면 예상대로 작동하지 않습니다.


이제 multiply('ho!')를 호출하려고 하면 오류가 발생합니다.


‘number’유형의 매개 변수에는‘’ho!’유형의 인수를 지정할 수 없습니다.


숫자 이외에 다음 유형을 설정할 수 있습니다.

  • null
  • undefined
  • boolean
  • string
  • Array
  • Object

예:

/**
 * @param {null} aNull
 * @param {undefined} anUndefined
 * @param {boolean} aBoolean
 * @param {string} aString
 * @param {Array} anArray
 * @param {Object} anObject
 */
const multiply = (aNull, anUndefined, aBoolean, aString, anArray, anObject) => {
  console.log(aNull, anUndefined, aBoolean, aString, anArray, anObject)
}


물론 주석에 주석을 추가 할 필요가 없고 코드 자체가 사실을 알려주는 것이 더 좋습니다. 이런 방식으로 살 수 있다면 좋을 것입니다! 그렇지 않으면 TypeScript가 있습니다.




  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 28회 ]  작성일19-08-28 18:09

웹학교