기본 세팅 과정
-
npm install -g typescript
:: 전역 설치 -
tsc -v
:: 버전 확인 -
index.html 생성
-
ts파일 생성
:: 타입스크립트 파일의 확장자는 ts이다.
(ex. app.ts) -
tsc app.ts
:: ts파일을 js파일로 변환 -
tsc --init
:: tsconfig.json 파일 추가
:: tsconfig.json 파일이 추가되며 duplicate function implementation 에러가 사라지는 것을 확인할 수 있다. -
tsc -w app.ts
:: 자동 컴파일 -
live server로 구현 내용 확인
특징
1. 다운 레벨링
ECMAScript의 하위 버전에서 상위 버전의 내용을 호환 가능하도록 변환하는 과정을 다운레벨링이라고 한다. 특정 파일을 ES6버전에 맞추고 싶다면 아래와 같이 코드를 입력하면 된다.
:: tsc --target es2015 파일명 (input.ts 등)
2. 타입 추론
타입스크립트는 말 그대로 타입을 추론할 수 있다. 아래의 코드를 보자.
let test = 5; test = 'five'; // error
변수 test에 타입을 선언하지 않았지만 5를 할당하는 순간, 변수 test의 타입은 number로 추론되었다. 다시 말해서, 컴퓨터는 let test:number = 5; 로 인식했다. 그래서 변수 test에 문자열을 할당하게 되면 error를 반환한다.
3. 타입 명시
타입스크립트는 선언할 때 데이터 타입을 명시하기 위해 만들어진 언어로, 타입 명시는 타입스크립트의 본질이라고 말할 수 있다. 타입은 string, number, string[], number[], boolean 외에도 여러가지가 있으며 선언할 때, 변수와 함수의 매개변수 그리고 함수의 반환값에 명시할 수 있다.
참고: PoiemaWeb
1) 변수
let greeting: string = 'hi'; greeting = 'welcome';
2) 함수의 매개변수
function sendGreeting(message: string, userName: number) { return `${message}, ${userName}`; } sendGreeting('hi', 'Jack') // hi, Jack sendGreeting('hi', 1) // 매개변수와 타입이 다르므로 error 반환 sendGreeting('hi') // 매개변수와 인자의 수가 일치하지 않으므로 error 반환
- 특이사항
:: 매개변수와타입이 다른 인자는 에러가 발생한다.
::매개변수 수와 인자 수는 일치해야 한다.
2-1) 선택적 매개변수
입력을 해도 되고 안해도 되는 매개변수를 만들고 싶다면 optional을 활용하면 된다. optional로 만들고 싶은 변수(혹은 매개변수 등)뒤에 물음표를 붙여주면 된다. userName?: number 이런 식으로.
function sendGreeting(message: string, userName?: number) { return `${message}, ${userName}`; } sendGreeting('hi', 'Jack') // hi, Jack sendGreeting('hi') // hi, undefined sendGreeting('hi', 1) // 매개변수와 타입이 다르므로 error 반환
- 특이사항
:: 단, 인자가 전달되지 않으면 undefined를 반환한다.
:: 선택적 매개변수는 반드시필수 매개변수 뒤에 위치해야 한다.
2-2) 기본 매개변수
선택적 매개변수를 사용할 때, undefined가 반환되는 것을 방지하기 위해 기본 매개변수를 사용한다. 그리고 기본 매개변수를 사용하면 타입추론으로 인해 타입을 명시할 필요가 없고, 선택적 매개변수 역시 적용되지 않는다.
function sendGreeting(message = 'Hello', userName = 'there') { return `${message}, ${userName}`; } sendGreeting(); // hello, there sendGreeting('Good Morning'); // Good morning, there sendGreeting('Good afternoon', 'Jenny'); // Good afternoon, Jenny
3) 함수의 반환값
함수가 반환하는 값의 타입 또한 지정할 수 있는데, 매개변수를 지정하는 소괄호 다음에 타입을 지정하면 된다. 예를 들면 function greeting (msg = 'Hello', user = 'there'):string { } 이런 식으로 사용할 수 있다.
function sendGreeting(message = 'Hello', userName = 'there'):string { return `${message}, ${userName}`; }
- 특이사항
:: 타입void는 오로지 반환값이 없는 함수만 명시할 수 있다.
:: 지정한 반환값의 타입과 실제 반환값이 다를 경우, 에러가 발생한다.
3-1) void
타입 void에는 null과 undefined만 할당이 가능하다.
단, --strictNullChecks가 true일 때는, null은 any와 null 타입에만 할당할 수 있다. (undefined는 예외적으로 void에 할당 가능)
3-2) 화살표 함수식으로 변환
const sendGreeting = (message: 'Hello', userName = 'there'):void => { console.log(`${message}, ${userName}`); }
- 특이사항
:: 위의 코드와 같이 반환값이 없는 경우 반환값의 타입으로 void를 지정한다.
3-3) 객체구조의 형태로 타입을 지정
함수의 반환값을 객체 형태의 타입으로 지정할 수도 있다.
function getData(data:number):{ studentID: number; studentName: string; gender: string; data: number; } { return data; }
4. 타입 단언
타입이 헷갈리지 않도록 한 가지 타입으로 단언하는 것을 말한다. 단언을 하는 방법에는 angle-bracket문법과 as문법이 있다. JSX와 함께 사용할 때는, as문법의 단언만 허용된다.
4-1) angle-bracket" 문법
let someValue: any = "this is a string"; let strLength: number = (<string>someValue).length;
4-2) as-문법
let div = document.querySelector('div') as HTMLDivElement // let div: HTMLDivElement div.innerText;
단언하기 전 div는 HTMLDivElement || null의 유니언 타입을 가지고 있다. null일 경우 오류가 발생할 수 있기때문에 에러를 띄운다. 이 때 에러를 미연에 방지하기 위해 타입을 단언한다.
5. Interface
객체 형태의 타입을 지정할 때 효율성과 가독성을 높여주는 것이 바로 interface이다. interface는 ts에서 js로 컴파일할 때 삭제되기때문에 렌더링에 영향을 주지 않는다.
interface Student { studentID: number; studentName: string; gender: string; data: number; } function getData(data:number):Student{ return { studentID: number; studentName: string; gender: string; data: number; }; }
- 특이사항
:: 반드시 대문자로 시작한다.
:: interface의 구조와 return 값의 구조는 동일해야 한다. 만약 return 값이 interface의 구조와 다르다면 에러가 반환되는 것을 확인할 수 있다.
4-1) interface 내 메소드 사용
interface Student { studentID: number; studentName: string; gender?: string; data: number; addComment? (comment: string): string; deleteComment?: (comment:string) => string; } function getData(data:number):Student{ return { studentID: number; studentName: string; data: number; }; }
4-2) 읽기전용 프로퍼티
특정 프로퍼티 앞에 readonly를 붙이면 된다. 읽기전용으로 만들 경우 재할당이 불가능하다.
예제 1.
interface Student { readonly studentID: number; studentName: string; gender?: string; data: number; addComment? (comment: string): string; deleteComment?: (comment:string) => string; } function getData(data:number):Student{ return { studentID: number; studentName: string; data: number; }; }
예제 2.
let a: number[] = [1, 2, 3, 4]; let ro: ReadonlyArray<number> = a; ro[0] = 12; // 오류! ro.push(5); // 오류! ro.length = 100; // 오류! a = ro; // 오류!
4-3) 선택적 프로퍼티
return할 때 interface의 내용을 빼고 싶다면?! 이 때 활용할 수 있는 것이 optional이다. 선택적 매개변수와 동일한 방법으로 사용할 수 있다.
interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig): {color: string; area: number} { let newSquare = {color: "white", area: 100}; // 기본값 if (config.color) { newSquare.color = config.color; } if (config.width) { newSquare.area = config.width * config.width; } return newSquare; } let mySquare = createSquare({color: "black"});
