TypeScript 시작 방법

TypeScript는 Javascript에 Type을 추가하여 Compile이 필요하게 되는 언어입니다.

 

한번 시작해보도록 하시죠!

 

1. 새 프로젝트 설정

만약, 여기에서 npm도 설치되어있지 않고 Node도 설치되어 있지 않다면 Node를 설치해주시길 바랍니다.

 

nodejs.org/en/

Node.js

 

현재(2021-04-26) LTS 버전인 14버전으로 설치해주시면 좋을 것 같아요.

그러면 cmd창에서 npm -v, node -v를 입력하시면 버전이 출력되는 것을 보실 수 있으실거에요. 그러면 설치가 된 것입니다.

 

VS Code를 열어 새로운 프로젝트를 만들어보세요~!

npm i -D typescript

설치가 다 되셨으면은 typescript설정 파일을 생성해주세요.

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es2017", "dom"],
    "allowJs": true,
    "checkJs": true,
    "noEmit": true,
    "strict": false,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "esModuleInterop": true
  },
  "include": [ "script", "test" ],
  "exclude": [ "node_modules" ]
}

이 구성 파일의 중요한 행은 allowJs 및 checkJs 옵션이며 둘 다 true로 설정됩니다.

이는 TypeScript에 JavaScript 코드를 평가 하기를 원한다는 것을 알려줍니다.

또한 TypeScript에 script 및 test 디렉토리 내의 모든 파일을 확인하도록 했으므로 index.js라는 새 파일을 만들어서 테스트 해보도록 하겠습니다.

 

2. 간단한 테스트

새로 생성 된 JavaScript 파일 내에서 두 개의 매개 변수를 가져와서 함께 추가하는 간단한 추가 함수를 만들어 보겠습니다.

function add(x, y) {
  return x + y;
}

add(4, 2); // returns 6 ---> correct

add('4', 2); // returns '42'  ---> \./

JSDoc 주석을 추가하여 사용자에게 예상되는 작동 방식을 알릴 수 있습니다.

/**
 * Add two numbers together
 * @param {number} x
 * @param {number} y
 * @return {number}
 */
function add(x, y) {
  return x + y;
}

위와 같이 오류가 나는 것을 보실 수 있습니다.

위의 예에서 TypeScript는 주석을 읽고 확인하고 있습니다. 실제 TypeScript에서 함수는 다음과 같이 작성됩니다.

/**
 * Add two numbers together
 */
function add(x: number, y: number): number {
  return x + y;
}

 

TypeScript의 독점 구문에 비해 JSDoc 주석을 사용하는 추가 이점 중 하나는 인라인을 제공하여 인수 또는 유형 정의에 대한 추가 메타 데이터를 제공 할 수있는 기회를 개발자에게 제공한다는 것입니다 (우리 코드를 자체 문서화하는 긍정적인 습관을 장려하기를 바랍니다).

 

또한 TypeScript에 특정 개체의 인스턴스가 생성될 수 있음을 알릴 수 있습니다.

예를 들어 WeakMap은 객체와 다른 데이터 사이에 매핑을 생성하는 내장 JavaScript 객체입니다.

이 두 번째 데이터는 기본적으로 무엇이든 될 수 있지만 WeakMap 인스턴스가 문자열 값으로만 사용 하도록 하려면 TypeScript에 원하는 것을 알릴 수 있습니다.

weakmap.js를 만들어서 다음과 같이 작성해보세요.

/** @type {WeakMap<object, string>} */

const metadata = new WeakMap();
const object = {};
const otherObject = {};
metadata.set(object, 42);
metadata.set(otherObject, 'Hello world');

3. Type 정의하기

TypeScript와 마찬가지로 JSDoc을 사용하면 자체 유형을 정의하고 작업 할 수 있습니다. 

이름, 나이 및 취미 속성이있는 Person이라는 새 유형을 만들어 보겠습니다. 

TypeScript에서 표시되는 방식은 다음과 같습니다.

/**
 * @typedef Person
 * @property {string} name - The person's name
 * @property {number} age - The person's age
 * @property {string} [hobby] - An optional hobby
 */
interface Person {
    name: string;
    age: number;
    hobby?: string;
}

@typedef 태그를 사용하여 유형의 이름을 정의 할 수 있습니다.

이름(문자열) 및 연령(숫자) 속성과 함께 취미(문자열)라는 세 번째 선택적 속성을 사용하여

Person이라는 인터페이스를 정의 해 보겠습니다.

이러한 속성을 정의하기 위해 주석 안에 @property (또는 약식 @prop 키)를 사용합니다.

 

pet이라는 속성을 추가로 지정하면 다음과 같이 오류가 납니다.

pet 유형을 선택적으로 선언해줍니다.

/**
 * @typedef {'cat' | 'dog' | 'fish'} Pet - A type of pet
 */

/**
 * @typedef {'lizard' | 'bind' | 'spiden'} ExoticPet
 */

/**
 * @typedef Person
 * @property {string} name - The person's name
 * @property {number} age - The person's age
 * @property {string} [hobby] - An optional hobby
 * @property {Pet|ExoticPet} [pet] - the Person's pet
 */

/** @type {Person} */
const noel = {
    name: 'noel',
    age: 36,
    hobby: 'playing the guitar',
    pet:'cat'
}

이제 pet도 ExoticPet도 선택적으로 가질 수 있습니다.

 

4. Generic 사용하기

일반함수의 경우 고전적으로 인수를 받아 다시 반환하는 함수입니다.

Typescript에서는 다음과 같습니다.

function identity<T>(target: T): T {
  return target;
}

여기서는 새로운 제네릭 유형(T)을 정의하고 컴퓨터와 사용자에게 함수가 인수 대상이 무엇이든 유형을 공유하는 값을 반환 할 것이라고 알려줍니다.

이렇게하면 숫자나 문자열 또는 HTMLElement를 계속 전달할 수 있으며 반환된 값도 동일한 유형임을 보장할 수 있습니다.

 

@template라는 annotation을 사용해서 JSDoc에서도 똑같이 구현할 수 있습니다.

/**
 * @template T
 * @param {T} target
 * @return {T}
 */
function identity(target) {
    return target;
}

5. Type 형변환

document.querySelector('input').addEventListener(event => {
  console.log(event.target.value);
};

TypeScript는 값이 있음을 완전히 알고 있음에도 불구하고 EventTarget에 속성값이 존재하지 않는다고 불평합니다.

 

typeScript에 event.target이 HTMLInputElement라는 것을 알기 위해서는 객체의 유형을 캐스팅해야합니다

document.getElementById('input').addEventListener('input', event => {
  console.log(/** @type {HTMLInputElement} */(event.target).value);
});

그리고 특정 객체가 문제가되는 경우 항상 TypeScript에 객체가 @type {any}라고 알려 오류 메시지를 무시할 수 있습니다.

하지만 일반적으로 이것이 유용한 방법으로 간주되는 것은 좋지 않습니다.

 

TypeScript는 많은 개발자가 일관된 코드 표준을 중심으로 워크 플로를 간소화하는데 사용하는 매우 강력한 도구입니다.

대부분의 응용 프로그램은 내장 컴파일러를 사용하지만 일부 프로젝트에서는 TypeScript가 제공하는 추가 구문이 방해가된다고 결정할 수 있습니다.

또는 확장된 구문에 묶이지 않고 표준을 고수하는 것이 더 편할 수도 있습니다.

이러한 경우 개발자는 바닐라 JavaScript를 작성하는 동안에도 TypeScript의 유형 시스템을 활용하는 이점을 얻을 수 있습니다.

 

 

 

출처 : css-tricks.com/typescript-minus-typescript/?fbclid=IwAR16_e-N_hjoVFDLUnWDUcw8slNolQXCxNhSB6sz3VYIv_Wq6bBY1ea_Uxo