1. 자바스크립트(JavaScript)
자바스크립트는 모질라 재단에서 개발한 프로토타입 기반의 스크립트 언어입니다. HTML, CSS와 함께 웹을 구성하는 요소중 하나입니다. HTML이 웹페이지의 구조를 정의하고 CSS가 웹페이지를 디자인 한다면 자바스크립트는 클라이언트 단에서 웹페이지가 동적으로 동작하도록 합니다. 예전에는 웹브라우저의 인터프리터에 의해 클라이언트 단에서 동작했지만 Node.js가 등장하면서 서버 단에서도 런타임 환경에서 동작이 가능해졌습니다.
2. 타입스크립트(TypeScript)
타입스크립트는 마이크로소프트에서 구현한 자바스크립트 슈퍼셋 프로그래밍 언어입니다. 즉, 자바스크립트 문법에 타입스크립트 문법을 추가한 언어입니다. 이때문에 올바르게 작성된 자바스크립트 코드는 타입스크립트 코드로 사용가능합니다. 자바스크립트가 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있는 반면 타입스크립트는 정적 타입의 컴파일 언어로 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 컴파일해야합니다. 즉, 타입스크립트는 변수나 함수에 타입을 명시하여 사전에 오류를 발견하여 자바스크립트 개발의 생산성을 높일 수 있습니다.
3. 타입스크립트 컴파일
npm을 통해 타입스크립트를 전역으로 설치해줍니다.
$ sudo npm install -g typescript |
다음 명령어를 통해 설치가 되었는지 확인할 수 있습니다.
작업공간을 만들고 타입스크립트 코드를 작성해보겠습니다.
$ mkdir ~/ts_ws && cd ~/ts_ws $ xed main.ts |
const message: string = 'hello world'; console.log(message); |
저장후 컴파일합니다.
main.ts 파일이 컴파일되어 main.js 파일이 생성되었습니다. nodejs로 실행해보세요.
컴파일시 다음과 같은 명령어로 옵션을 줄 수도 있습니다.
$ tsc main.ts --strict true --target ES6 --lib ES2015,DOM --module CommonJS |
또는 tsconfig.json 파일을 통해 옵션을 줄 수도 있습니다.
$ mkdir src && mv main.ts src/main.ts && xed tsconfig.json |
{ "compilerOptions": { "strict": true, "target": "ES6", "lib": ["ES2015", "DOM"], "module": "CommonJS", "rootDir": "src", "outDir": "dist" }, "include": [ "src/**/*.ts" ], "exclude": [ "mode_modules" ] } |
저장 후 컴파일해주세요.
컴파일 옵션에 대해서는 다음 페이지를 참고하세요. https://www.typescriptlang.org/docs/handbook/compiler-options.html(영문)
https://typescript-kr.github.io/pages/compiler-options.html(한글)
4. 타입
자바스크립트에서는 다음과 같이 7가지 내장 타입을 제공합니다. : Number, String, Boolean, Symbol, Null, Undefined, Object
타입스크립트에는 내장타입에 해당하는 원시 타입이 있습니다. : number, string, boolean, symbol, null, undefined, object
이 외에도 unknown, never, void 같은 타입과 배열(Array), 튜플(Tuple), 열거형(Enum), 제네릭(Generic) 등이 있습니다.
변수에 타입을 지정하려면 변수명 뒤에 : 타입 을 입력하면 됩니다.
let str: string = "hello world"; let num: number = 1; |
함수는 다음과 같이 파라미터의 타입과 리턴 타입을 지정합니다.
function add(a: number, b:number): number { return a + b; } |
배열(array)의 경우 2가지 방법으로 타입을 지정할 수 있습니다.
첫번째 방법은 타입 뒤에 대괄호([]) 를 붙이는 것입니다.
let arr1: number[] = [1, 2, 3] |
두번째 방법은 제네릭 배열 타입을 사용하는 것입니다.
let arr2: Array<number> = [1, 2, 3] |
튜플(tuple)은 배열과 유사한데 배열 타입과 각 요소의 타입을 지정할 수 있습니다. 튜플은 다음과 같이 타입을 지정합니다.
let tuple: [number, string] = [1, "spot"] |
열거형(enum)은 숫자 또는 문자열 값의 집합에 이름을 부여할 수 있습니다. 아래와 같이 enum 타입을 정의해봅시다.
enum Week { SUN, MON, TUE, WED, THU, FRI, SAT } |
Week 타입은 SUN부터 SAT까지 7개의 멤버를 가지는데 각각 0부터 시작하여 1씩 증가하는 번호를 부여받습니다. 아래와 같이 week 변수에 Week.FRI를 할당하면 week의 값은 5가 됩니다.
enum Week { SUN, MON, TUE, WED, THU, FRI, SAT }
let week: Week = Week.FRI |
시작하는 번호를 임의로 지정할 수 있습니다. 아래와 같이 SUN = 1을 지정하면 각각 1부터 시작하여 1씩 증가하는 번호를 부여받습니다. week 변수의 값은 6이 됩니다.
enum Week { SUN = 1, MON, TUE, WED, THU, FRI, SAT }
let week: Week = Week.FRI |
다음과 같이 문자열을 지정해줄수도 있습니다. 아래와 같이 코드를 작성하면 color 변수의 값은 "red"라는 문자열이 됩니다.
enum Color { RED = "red", BLUE = "blue", GREEN = "green" }
let color: Color = Color.RED |
any 타입은 모든 데이터 타입을 허용할때 사용합니다. 데이터타입을 미리 알 수 없는 경우 사용할 수 있지만 불가피한 경우를 제외하고는 사용하지 않는것이 좋습니다.
let x: any = 1 let y: any = "string" |
void 타입은 타입이 존재하지 않을때 사용합니다. 함수의 경우 리턴값이 없을때 사용합니다.
function msg_logger(msg: any): void { console.log(msg); } |
5. 인터페이스(Interface)
인터페이스는 타입을 정의하는 규칙입니다. 예를 들어 아래와 같이 인터페이스를 정의하겠습니다.
interface User { idx: number; name: string; level: number; } |
User 타입은 idx, name, level이라는 속성(property)을 가지며, 각각 number, string, number 타입의 값을 가집니다.
let user: User = { idx: 1, name: "spot", level: 3 } |
이때 하나의 속성이라도 빠지면 오류를 발생시킵니다. 선택적 속성을 정의하기 위해서는 콜론(:) 앞에 물음표(?)를 붙이면 됩니다.
interface User { idx: number; name: string; level?: number; }
let user: User = { idx: 1, name: "spot" } |
6. 타입 추론과 타입 단언
명시적으로 타입을 선언하지 않은 경우 타입스크립트는 타입을 추론하게 됩니다. 아래와 같이 타입을 선언하지 않고 변수에 값을 할당하면 타입스크립트에서는 str 변수를 string 타입으로 추론합니다.
만약 문자열이 아닌 숫자를 넣게 된다면 오류가 발생합니다.
let str = "spot" // string 타입으로 추론 str = 1 // number 타입을 대입하면 오류 발생 |
타입 단언은 타입 추론을 하지 않도록 타입을 단언하는 것을 말합니다. 예를 들어 아래와 같이 코드를 작성해봅시다.
let div = document.querySelector('div'); |
이 경우 타입스크립트는 div 변수가 null이 될 경우까지 추론하게 됩니다. 그러므로 아래와 같이 코드를 작성하면 오류가 발생합니다.
let div = document.querySelector('div'); div.innerText = "spot"; // div 변수가 null인 경우 innerText 속성이 존재하지 않으므로 오류 발생 |
이때 타입 단언을 통해 타입을 지정해준다면 오류가 발생하지 않게 됩니다.
let div = document.querySelector('div'); (div as HTMLDivElement).innerText = "spot"; |
속성 앞에 느낌표(!)를 붙여서 속성이 존재한다는 것을 단언해줄수도 있습니다.
let div = document.querySelector('div'); div!.innerText = "spot"; |
7. 제네릭(Generic)
제네릭은 여러 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 함수나 클래스를 사용하는 시점에서 타입을 선언합니다. 쉽게 말해서 타입을 파라미터처럼 사용합니다. 제네릭 타입은 함수 이름 오른쪽에 <T> 라고 작성하면 됩니다. T는 타입 변수로 매개변수처럼 원하는 이름으로 지정하면 됩니다.
아래와 같은 코드를 작성해봅시다.
function toArray(a: number | string, b: number | string): (number | string)[] { return [a, b]; }
let o1 = toArray(1, 2); // 배열 [1, 2]가 대입 let o2 = toArray("a", "b"); // 배열 ["a", "b"]가 대입 |
타입 선언에서 | 기호는 or를 의미합니다. 즉, number | string은 number 타입 또는 string 타입을 의미합니다. 위의 코드처럼 동적인 타입을 선언할 수도 있지만 제네릭을 통해 동적인 타입을 선언할 수도 있습니다.
function toArray<T>(a: T, b: T): T[] { return [a, b]; }
let o1 = toArray<number>(1, 2); // 배열 [1, 2]가 대입 let o2 = toArray<string>("a", "b"); // 배열 ["a", "b"]가 대입 |
타입 추론을 통해 타입 변수를 생략해도 됩니다.
function toArray<T>(a: T, b: T): T[] { return [a, b]; }
let o1 = toArray(1, 2); // 배열 [1, 2]가 대입 let o2 = toArray("a", "b"); // 배열 ["a", "b"]가 대입 |
타입 변수를 여러 개 지정할 수도 있습니다.
function toArray<T, U>(a: T, b: U): [T, U] { return [a, b]; }
let o1 = toArray(1, "a"); // 배열 [1, "a"]가 대입 |
|
스팟 
