클래스 및 인터페이스
- 타입스크립트에서는 인터페이스(규격)를 지원하고 인터페이스를 받아서 클래스를 구현 할 수 있다.
- 타입스크립트에서 접근 제어자는 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; private osType: string; constructor(osType: OsType) { this.osType = osType; }
set changeOsType(osType: OsType) { this.osType = osType; }
get getMaxByte() { 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; 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());
const dynamicClass2 = new DynamicTypeClass(false, 30);
console.log('key:', dynamicClass2.getKey(), 'val:', dynamicClass2.getValue());
|
모듈
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 type User = { id: string, name: string };
export function sum(a: number, b: number): number { return a + b; }
import { User, sum } from "./export";
const user: User = { id: '201mf934k1', name: 'delryn' };
console.log('user', user);
console.log('sum', sum(1, 10));
|
컴파일러 옵션
컴파일러 옵션은 tsconfig.json이라는 파일로 다음과 같은 명령어로 생성을 한다.
- target: 어떤 버전으로 컴파일하여 JS로 만들지 정하는 것.
- module: 모듈 부르는 방식 정하는 것.
- outDir: 컴파일 시 작성된 경로로 js 파일이 만들어짐
옵션에 주석으로 설명이 다 되어 있기에 (영어로..) 필요할 떄 번역기 돌려서 봐야겠음 👀
컴파일
명령어 한줄이면 끝
그 외
유틸리티 타입이라고 유틸 라이브러리 같은 게 있는데 뭐 이건 말 그대로 유틸이니.. 나중에 써보고 좋은 거는 따로 메모할 계획
느낀 점
학습하면서 짧게 코드를 작성해봤지만 뭔가 룰이 있고 객체 지향 적인 언어 같아서
쓰는 맛이 좀 있었고 일관성과 가독성이 어느 정도 보장?이 될 꺼 같은 느낌이 들었다 😆
앞으로 개인 프로젝트에서는 Node.js를 사용 시 타입스크립트 위주로 작성해서 연습해야지
암튼 올 해 목표 중 하나였던 타입스크립트! 3월이 되서야 한 걸음 떼었다 😭