타입스크립트 기초 학습 정리 - 2
2021-03-01 16:23:52

클래스 및 인터페이스

  • 타입스크립트에서는 인터페이스(규격)를 지원하고 인터페이스를 받아서 클래스를 구현 할 수 있다.
  • 타입스크립트에서 접근 제어자는 public(공개), private(내부), protected(내부 및 자식)가 지원이 된다.
  • static (정적), readonly(읽기 전용)의 수식어를 쓸 수 있다.
  • 추상 클래스는 직접 인스턴스를 만들 수 없고 자식 클래스가 상속해서 구현을 할 수 있다 (인터페이스와 비슷 하다)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
type BuildResult = {
osType: string,
byte: number,
isGame: boolean
}

type OsType = 'iOS' | 'Android';

/**
* 인터페이스 선언 (구현부는 클래스에서)
*/
interface Build {
runBuild(program: string): void;
getBuild(): BuildResult;
}

/**
* 클래스 구현
*/
class BuildMake implements Build {
protected static readonly MAX_BYTE_SIZE = 300; // static은 정적, readonly는 읽기 전용
private osType: string;
constructor(osType: OsType) { // 생성자
this.osType = osType;
}

set changeOsType(osType: OsType) { // setter
this.osType = osType;
}

get getMaxByte() { // getter
return BuildMake.MAX_BYTE_SIZE;
}

runBuild(program: string) {
console.log(`${program} 빌드중...👀`);
}

getBuild() {
const result: BuildResult = {
osType: this.osType,
byte: Math.floor(Math.random() * BuildMake.MAX_BYTE_SIZE) + 1,
isGame: false
}
return result;
}
}

const iOSBuild = new BuildMake('iOS');
iOSBuild.runBuild('아이튠즈');
console.log('빌드 결과: ', iOSBuild.getBuild(), '최대 바이트: ', iOSBuild.getMaxByte);

/**
* 상속 클래스 구현
*/
class UnityBuildMake extends BuildMake {
constructor(osType: OsType) {
super(osType);
}

getBuild() {
const result = super.getBuild();
return {
...result,
isGame: true
};
}
}

const unityBuild = new UnityBuildMake('Android');
unityBuild.runBuild('가디언 테일즈');
console.log('빌드 결과: ', unityBuild.getBuild(), '최대 바이트: ', unityBuild.getMaxByte);

/**
* 추상 클래스
*/
abstract class Bundle {
protected source: string;
constructor(source: string) {
this.source = source;
}
abstract framework: string;
abstract bundleResource(): string;
}

class Vue extends Bundle {
framework: string; // private 사용 불가
constructor(source: string, framework: string) {
super(source);
this.framework = framework;
}

bundleResource(): string {
console.log(`${this.framework}을 사용 하여 ${this.source} 소스 번들화를 시작 하는 중.. 👀`);
return `/dist/main.js 생성 되었습니다.`;
}
}

const vue = new Vue('계산기', 'Webpack');
console.log(vue.bundleResource());

제네릭스

제네릭은 어떠한 타입이 올지 알수 없을 떄 유연하게 대처하기 위함으로 쓴다.

제네릭은 잘 안 써봐서 좀 햇갈린다 😭

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function writeLog<T>(params: T): void {
console.log(params);
}

writeLog("abc");
writeLog(123);

interface KeyValues<K, V> {
setKey: (k: K) => void;
setValue: (v: V) => void;
getKey: () => K;
getValue: () => V;
}

class DynamicTypeClass<K, V> implements KeyValues<K, V> {
constructor(private key: K, private value: V) {}
setKey(k: K) {
this.key = k;
}
setValue(v: V) {
this.value = v;
}
getKey(): K {
return this.key;
}
getValue(): V {
return this.value;
}
}

const dynamicClass: KeyValues<number, string> = new DynamicTypeClass(1, 'a');

console.log('key:', dynamicClass.getKey(), 'val:', dynamicClass.getValue()); // key: 1 val: a

const dynamicClass2 = new DynamicTypeClass(false, 30);

console.log('key:', dynamicClass2.getKey(), 'val:', dynamicClass2.getValue()); // key: false val: 30

모듈

export와 import는 기존에 쓰던 거와는 조금 다르다.. 😓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
* export.ts
*/
export type User = {
id: string,
name: string
};

export function sum(a: number, b: number): number {
return a + b;
}

/**
* import.ts
*/
import { User, sum } from "./export";

const user: User = {
id: '201mf934k1',
name: 'delryn'
};

console.log('user', user);

console.log('sum', sum(1, 10));

컴파일러 옵션

컴파일러 옵션은 tsconfig.json이라는 파일로 다음과 같은 명령어로 생성을 한다.

1
tsc --init
  • target: 어떤 버전으로 컴파일하여 JS로 만들지 정하는 것.
  • module: 모듈 부르는 방식 정하는 것.
  • outDir: 컴파일 시 작성된 경로로 js 파일이 만들어짐

옵션에 주석으로 설명이 다 되어 있기에 (영어로..) 필요할 떄 번역기 돌려서 봐야겠음 👀

컴파일

명령어 한줄이면 끝

1
tsc

그 외

유틸리티 타입이라고 유틸 라이브러리 같은 게 있는데 뭐 이건 말 그대로 유틸이니.. 나중에 써보고 좋은 거는 따로 메모할 계획

느낀 점

학습하면서 짧게 코드를 작성해봤지만 뭔가 룰이 있고 객체 지향 적인 언어 같아서

쓰는 맛이 좀 있었고 일관성과 가독성이 어느 정도 보장?이 될 꺼 같은 느낌이 들었다 😆

앞으로 개인 프로젝트에서는 Node.js를 사용 시 타입스크립트 위주로 작성해서 연습해야지

암튼 올 해 목표 중 하나였던 타입스크립트! 3월이 되서야 한 걸음 떼었다 😭

Prev
2021-03-01 16:23:52
Next