[Typescript] Typescript

[Typescript] Typescript

Documentation - The Basics

 

타입스크립트에 대해서 알아보겠습니다.

---

Typescript?

타입스크립트는 자바스크립트의 타입 검사를 수행하기 위한 언어입니다.

기본 자바스크립트는 변수의 값이 어떤 타입인지 알지 못하는 문제가 있습니다.

let iAmNumber = 1;

iAmNumber = '사실 문자열임';

// number만 사용할 수 있는 함수를 String에서 사용하여 에러 발생
// TypeError: iAmNumber.toExponential is not a function
iAmNumber.toExponential(2);

코드가 실행되기 전까지 해당 변수가 어떤 타입인지 모르기 때문에 어떤 프로퍼티나 함수를 가지는지 모릅니다.

따라서 코드 실행 시 발생할 수 있는 에러를 막기 위해서 타입스크립트를 사용합니다.

 

또한 자바스크립트와 달리 IDE에서 자동완성을 지원합니다.

---

타입 선언

타입스크립트는 명시적으로 변수의 타입을 지정할 수 있습니다.

변수 선언 시 타입을 명시하여 다른 타입을 변수에 할당할 수 없게 할 수 있습니다.

let message : String;

message = '12';

// 에러 발생
// 'boolean' 형식은 'String' 형식에 할당할 수 없습니다.
message = true;

---

타입 추론

타입스크립트는 변수의 타입을 명시하지 않아도 자동으로 해당 변수의 타입을 추론[inference] 할 수 있습니다.

// 초기화 시 message를 String으로 추론
let message = '12';

// 에러 발생
// 'boolean' 형식은 'String' 형식에 할당할 수 없습니다.
message = true;

---

타입 검사

타입스크립트는 변수의 타입을 컴파일 단계에서 검사하여 버그를 알릴 수 있습니다.

조용히 에러를 발생시키는 자바스크립트와는 다른 것을 알 수 있습니다.

const message : String = '나는 글자야';

// 에러 발생
// This expression is not callable.
// Type 'String' has no call signatures.
message();

---

타입 단언 연산자 as, !

as 를 사용하면 타입스크립트에게 해당 값이 어떤 타입인지를 구체적으로 명시할 수 있습니다.

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

 

타입이 null 이나 undefined 일 경우 타입 스크립트에서는 반드시 타입 검사를 시도해야 합니다.

또는 ! 를 사용하여 해당 값이 null 이나 undefined 이 아님을 단언할 수 있습니다.

function liveDangerously(x?: number | undefined) {
    // 타입 검사를 하지 않음
    console.log(x!.toFixed());

    // 옵셔널 체이닝을 사용하여 타입 검사를 할 경우
    // console.log(x?.toFixed());
}

---

tsc

tsc는 타입스크립트를 위한 컴파일러입니다.

노드 패키지 매니저를 통해 설치할 수 있습니다.

npm install -g typescript

 

타입스크립트는 .ts 확장자를 가지고 있습니다.

// 변환 전 typescript
function greet(person: string, date: Date) {
	console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

 

현재 [2025. 03] 브라우저는 타입스크립트를 지원하지 않기 때문에

타입스크립트로 작성된 코드는 자바스크립트로 변환해서 사용해야 합니다.

tsc 는 이러한 파일을 .js 자바스크립트 파일로 변환해 주는 역할을 합니다.

tsc hello.ts

 

tsc 명령어로 타입스크립트를 자바스크립트로 변환할 수 있습니다.

변환 도중 컴파일 에러가 발생한다면 오류 메시지를 출력하여 해당 스크립트에 문제가 있음을 알립니다.

// 변환된 javascript
"use strict";
function greet(person, date) {
	console.log("Hello ".concat(person, ", today is ").concat(date.toDateString(), "!"));
}

---

엄격한 타입 검사

기본적으로 tsc 는 에러가 있어도 자바스크립트로의 변환을 멈추지 않습니다.

더 강력하고 엄격한 타입 검사를 수행하기 위해서는 --noEmitOnError 컴파일 옵션을 사용해야 합니다.

tsc --noEmitOnError hello.ts

 

해당 옵션을 사용하면 에러 발생 시 자바스크립트로의 변환을 중단합니다.

 

그 외 컴파일 옵션은 다음과 같습니다.

옵션	설명
noEmitOnError	에러 발생 시 컴파일 중단
strictNullChecks	null, undefined 를 다른 타입 값에 할당할 수 없음
strictFunctionTypes	엄격한 함수 매개변수 타입 검사
strictPropertyInitialization	클래스의 모든 프로퍼티가 생성자에서 초기화되도록 강제
noImplicitAny	any 타입으로 추론되는 변수 사용 불가
noImplicitThis	This는 any 타입이 될 수 없음
noImplicitReturns	함수의 모든 경로에서 명시적으로 값을 반환하도록 강제
noUnusedLocals	사용하지 않는 로컬 변수에 대한 경고 발생
noUnusedParameters	사용하지 않는 함수 매개변수에 대한 경고 발생
alwaysStrict	항상 자바스크립트 엄격 모드 적용
esModuleInterop	CommonJS 모듈을 ES 모듈처럼 사용하도록 허용
resolveJsonModule	JSON 파일을 모듈처럼 가져올 수 있게 허용
strict	strictNullChecks, strictFunctionTypes, strictPropertyInitialization, noImplicitAny, noImplicitThis, alwaysStrict 활성화

---

tsconfig.json

tsconfig.json 는 타입스크립트 설정을 정의하는 파일입니다. 컴파일러 옵션, 프로젝트 경로 등을 설정할 수 있습니다.

tsc --init 명령어를 통해 생성할 수 있습니다.

{
    "compilerOptions": { // 컴파일러 옵션
        "target": "es6",
        "module": "commonjs",
        "strict": true,
        "outDir": "./dist",
        "rootDir": "./src",
        "esModuleInterop": true
    },
    "include": [ "src/**/*" ], // 포함할 파일 또는 디렉토리
    "exclude": [ "node_modules", "**/*.spec.ts" ] // 제외할 파일 또는 디렉토리
}

 

tsc 명령어를 실행하면 프로젝트 내의 tsconfig.json를 읽어 컴파일을 시도합니다.