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가 있습니다.