TypeScript 시작하기 (1) - Typescript 필수문법 10분 정리와 설치 셋팅 (Vue, React 포함)

funfungun·2025년 1월 1일

typescript 타입스크립트

0

TypeScript 시작하기

목록 보기

1/18

오늘은 타입스크립트를 설치하고 셋팅해보며 필수문법에 대해 짧게 살펴보겠습니다.

일단 nodejs를 검색해서 설치해주어야 합니다. 링크를 타고 들어가서 Download Node.js(LTS) 를 눌러줍니다.
https://nodejs.org/en

VSCode 를 다운받아 에디터를 준비해줍시다. 역시 링크를 타고 들어가서 Download for macOS 를 눌러줍니다. https://code.visualstudio.com

터미널을 열고 프로젝트 디렉토리를 만들어줍시다. 여기서는 ts라는 디렉토리 이름으로 정했습니다.
```
mkdir ts
```

만든 프로젝트 디렉토리로 경로르 바꿔줍시다.
```
cd ts
```

여기서 꿀팁은, 터미널에서 code . 만 입력해도 VSCode 가 열리면 편하지 않을까? 라는 생각을 하면 편해진다는 것입니다. (아님말고) 아직은 셋팅이 안되어 있어서 실행이 안되는 상황입니다.

VSCode 들어가서 Command + Shift + P 를 눌러줍시다.

shell 을 검색하면 <셸 명령: PATH에 'code' 명령 설치> 가 나오는데, 이걸 클릭해줍시다.

설치되었다는 멘트와 함께 확인을 누르고, 터미널로 돌아갑니다.

터미널에 code . 를 입력해주면 VSCode 가 자동으로 열리는 것을 확인할 수 있습니다.
```
code .
```

VSCode 에서 터미널을 켜고 다음의 명령어를 입력합니다.
```
npm install -g typescript
```

tsconfig.json 파일을 만들고, 아래와 같이 코드를 추가합니다. ‘target’은 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이고, ‘module’은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳입니다. 그래서 어느정도 IE 호환성을 원한다면 es5, commonjs를 선택해야 합니다.
```
//tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "CommonJS"
  }
}
```
+) 추가로 noImplicitAny 는 any 라는 타입이 의도치않게 발생할 경우 에러를 띄워주는 설정이고, strictNullCheck 는 null, undefined 타입에 이상한 조작하면 에러를 띄우는 설정입니다.
```
// tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true,
        "strictNullChecks": true
    }
}
```

근데 브라우저는 .js 파일만 읽을 수 있으니, 타입스크립트를 자바스크립트로 바꿔주는 과정이 필요한데, index.ts 파일을 아무거나 만들고, 터미널에서 tsc -w를 입력하면 index.js 로 자동 변환이 됩니다.
```
tsc -w
```

간단한 문법을 정리해보면, 타입스크립트에서는 간단한 변수 타입 지정이 가능합니다.
```
let nickname: string = "kim";
```

array 타입을 지정하려면 다음과 같이 지정하면 됩니다.
```
let nickname: string[] = ["kim", "park"];
```

object 타입을 지정하려면 object랑 똑같이 표기하고, 타입 선언만 바꾸면 됩니다. key 부분에 ? 를 붙이면 nickname 이라는 key가 있을 수도 없을 수도 있다는 것을 의미합니다.
```
let nickname: { nickname?: string } = { nickname: "kim" };
```

다양한 타입이 들어올 수 있게 하려면 Union type 을 사용하면 됩니다.
```
let nickname: string[] | number = 123;
```

타입은 변수에 담아서 쓸 수 있습니다. Type alias 라고 하는데, 보통 대문자로 시작해야 일반 변수와 구분할 수 있습니다.
```
type Mytype = string[] | number;

let nickname: Mytype = 123;
```

함수에도 타입 지정이 가능합니다. 파라미터와 리턴 값의 타입을 지정해 줄 수 있습니다.
```
const plus = (x: number): number => x + 2;
```

array에 쓸 수 있는 tuple 타입도 있습니다. 자료의 순서에 맞게 타입을 지정해 줄 수 있습니다.
```
type Member = [number, boolean];
let john: Member = [1, true];
```

object 에 타입 지정해야 할 속성이 너무 많으면 다음과 같이 처리할 수도 있습니다. [key:string] 이 부분이 모든 object 속성 이라는 뜻을 가지고 있습니다.

type Member = { [key: string]: string };
let john: Member = { name: "kim", age: "123" };

아래와 같이 class도 타입 지정이 가능합니다.

class User {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

지금까지, 타입스크립트를 실행해보고 짧은 문법을 살펴보았습니다. 번외로 https://www.typescriptlang.org/tsconfig 에 들어가보면 tsconfig에 들어갈 기타 항목들을 확인할 수 있습니다.

Commercial Art

다음 포스트

TypeScript 시작하기 (2) - 타입스크립트 기본 타입 정리 (primitive types)

0개의 댓글