TypeScript

TypeScript
<colbgcolor=#ffffff,#1f2023><colcolor=#3179C7> 개발	Microsoft
출시	2012년 10월 1일
최신 버전	5.6.3 (2024년 10월 9일)
파일 확장자	.ts[1]
| |

1. 개요

2. 상세

3. 개발 환경 만들기

npm i -g typescript

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

tsc script

tsc --init

tsc

npm install -g ts-node

ts-node 타입스크립트파일명.ts

node --experimental-strip-types 타입스크립트파일명.ts

4. 자바스크립트와의 차이

• 타입 선언 기능의 존재

#!syntax javascript
const a = 3;
const b = '5';
console.log(a*b)

#!syntax typescript
const a:number = 3;
const b:string = '5';
console.log(a*b)

• 예시 [6][7]
• JavaScript (ES5)[8]
  {{{#!syntax javascript

• TypeScript
  {{{#!syntax typescript

5. 사용 사례

5.1. 백엔드와 프론트엔드 통합

5.2. 프론트엔드

6. 특장점

6.1. 기존 자바스크립트 소스와의 호환

6.2. 다른 언어와의 문법 유사성

6.3. IDE와의 궁합

6.4. 과감한 신규문법 도입

6.5. npm 사용

7. 주의사항

7.1. 결국에는 자바스크립트로 컴파일

7.2. 학습 곡선 및 Trade-off

7.3. JavaScript 라이브러리의 호환성

1. //@ts-ignore 주석을 import문 위에 붙여서 컴파일러를 침묵시킨다. 또는 require()를 사용하여 컴파일 오류 없이 라이브러리를 사용할 수는 있다. 물론 이렇게 불러온 라이브러리의 심볼들에 대해서는 타입 검사가 이루어지지 않기 때문에 TypeScript의 장점을 활용하기 어렵다.
2. 직접 타입 정의 파일을 만든다.답답해서 내가 쓴다 TypeScript 컴파일러는 소스 코드가 있는 디렉토리의 모든 .d.ts 파일을 불러오므로, 다음과 같은 타입 정의 파일을 적당한 곳에 던져놓으면 된다. 물론 규모가 좀 있는 프로젝트를 꾸린다면 타입 정의 파일을 별도의 디렉토리에 모아놓는 것이 편하다.

#!syntax typescript
// some-js-library.d.ts
declare module "some-js-library" {
    function someFunction(a: string, b: number): void;
    class SomeClass {
        /* .... */
    }
}

#!syntax typescript
// some-js-library.d.ts
declare module 'some-js-library';

#!syntax javascript
// cacoon.js

/**
 * @template {string | number} T
 * @param {string} source
 * @param {T} value
 * @param {(input: T) => number} proc
 * @returns {string}
 */
export function caccoon(source, value, proc) {
  return source.repeat(proc(value));
}

#!syntax typescript
// main.ts
import { caccoon } from "./cacoon";

const values = ["one", "two", "three", "four", "five"] as const;

function alter(input: (typeof values)[number]) {
  return values.indexOf(input) + 1;
}

for (const value of values) {
  const result = caccoon("token", value, alter);
  console.log(result);
}

VSCode의 JsDoc intelicode

7.4. 결론

8. 라이브러리

• Angular - 구글에서 만든 타입스크립트 프레임워크이다. 구버전은 자바스크립트를 대상으로 했으나 현버전에서는 타입스크립트를 대상으로 하고 있다.
• React - 페이스북에서 만든 자바스크립트 프레임워크라이브러리로, TypeScript와 호환성이 높다. React 특유의 JSX 문법도 TypeScript에서 이해하고 검사하기 때문에 자연스럽게 적응할 수 있다.
• Vue - 베이스는 자바스크립트이지만 최근에 릴리즈된 3.0버전 이후부터 ts를 공식적으로 지원한다. 2.x 버전에서도 사용이 불가능한 것은 아니었으나, 각종 플러그인들을 사용해야 했다. 공식적으로 지원함에 따라 ts 사용에 탄력이 붙을 가능성이 높아졌다.
• Nest.js - Node.js 생태계의 스프링 같은 프레임워크를 지향하는 백엔드 라이브러리이다. 타입스크립트 없이 자바스크립트로도 어느 정도 사용은 가능하나, 타입스크립트를 사용해야 모든 기능을 제대로 활용할 수 있다. 단순히 타입을 지원해 주는 걸 넘어서, 타입스크립트에만 존재하는 데코레이터[22]와 같은 문법을 적극적으로 활용해 MVC 구조의 백엔드를 구성할 수 있다.
• TypeORM - 타입스크립트용 Node.js ORM 툴이다. 당연하게도 백엔드 라이브러리이다.[23] Nest.js와 마찬가지로 데코레이터를 적극적으로 활용한다.

9. 관련 문서

• JavaScript
• AssemblyScript
• ReasonML
• ReScript