11-3 타입스크립트
타입스크립트
TypeScript
- 자바스크립트의 단점(오류(컴파일단계에서 타입검사가 없어서, 대부분 실행중(런타임) 오류가 발생함), 싱글스레드 동작, 어지러움(프로젝트의 규모가 커질 수록 관리의 어려움))을 보완하기 위해 나온 언어. // Microsoft 에서 개발
- 자바스크립트 기반보다 버그를 줄일 수 있고, 유지보수가 용이합니다.
- 강력하고 높은 퀄리티의 코드를 생산할 수 있다.
js
function plus(a, b) {
return a + b;
}
console.log(plus(3, 5)); ---> 8
console.log(plus('3', '5')); ---> 35 (문자'3'과 문자'5'를 결합)
==========
ts
function plus(a : number, b : number) { // c, java에서 정수형 변수 선언하는 것과 같은 결
return a + b;
}
console.log(plus(3, 5)); ---> 8
console.log(plus('3', '5')); ---> 컴파일 오류 ('3' != number)
타입스크립트 = 자바스크립트 + 타입체크
.TS 환경에서 자바스크립트를 코딩하면 동작합니다.
.JS 환경에서 타입스크립트를 코딩하면 동작하지 않습니다.JS가 동작하는 웹브라우저에서 타입스크립트를 이해하지 못 하기 때문.
TS로 작성된 파일은 JS로 컴파일(트랜스 파일) 번역이 되고 난 후 웹브라우저에서 사용이 가능합니다.
.ts ---> tsc (TypeScript 컴파일러) ---> .js
타입스크립트 설치
- node.js 설치가 되어있고, npm도 같이 설치되어있다면 쉽게 설치가능
터미널에 아래 코드 입력
npm install -g typescript
버전 확인
tsc --versionTS 파일의 실행 확인
app.ts 파일을 바로 실행시킬 경우 아래처럼 오류가 발생합니다.
tsc 파일명 tsc app.ts을 입력하여 js로 컴파일 합니다.
- 별도의 app.js 파일이 생성된 것을 확인 할 수 있습니다.
빨간줄 생긴 이유는 "duplicate function implementation" 중복 함수로 구현 되었기 때문에 생긴 것
이후 해당 app.js를 실행시키면 잘 실행되는 것을 확인가능 합니다.
tsc --init
설정파일을 생성하는 명령어 입니다.
터미널에
tsc --init
위 코드를 입력하면 설정 파일이 생성됩니다.
또는 프로젝트(루트 폴더)에서 tsconfig.json 파일을 수동으로 생성합니다.기능
- 프로젝트의 타입스크립트의 동작 방식을 조절
- 컴파일러의 옵션을 설정
tsc -w
watch mode
TS파일에서 수정/변경이 발생할 경우 일일이 js로 컴파일 하거나 추가로 수정해주어야 하는 일이 발생함.
프로젝트의 모튼 타입스크립트 파일을 컴파일 합니다.
tsc
특정파일을 한 번 컴파일 합니다.
tsc app.ts
====================
프로젝트의 모든 타입스크립트 파일을 자동으로 컴파일 합니다. (수정/변경이 있을 때마다)
tsc -w
특정파일만 자동 컴파일 합니다. (수정/변경이 있을 때마다)
tsc -w app.ts
====================
자동으로 변환되는 것을 멈추려면?
tsc -w 가 실행중인 터미널을 ctrl + c 로 종료시킵니다.
데이터 타입
타입스크립트는 자바스크립트에 정적타입을 제공합니다.
정적타입
- 타입을 선언하고 선언된 타입에 맞는 값만 할당되도록 합니다.
자바스크립트에서의 변수에는 어떠한 데이터 타입의 값도 할당 할 수 있습니다.
let name = 'kim';
갑자기 어디서 누가 이렇게 변경해버리는 것도 가능
let name = 123;
타입 추론(Type Inference)기능
- 타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있습니다.
- 타입스크립트 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론합니다.
let a = 10;- 타입스크립트는 변수 a의 타입을 자동으로 number로 추론합니다.
- 타입 추론은 코드를 간결하게 작성할 수 있도록 도와주지만, 타입을 명시적으로 지정하는 것이 더 명확합니다.
- 타입 추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋습니다.
데이터 타입의 종류
- 타입스크립트에서는 다양한 데이터 타입을 지원합니다.
- 데이터 타입은 크게
기본 데이터 타입,객체 타입,특수 타입으로 나눌 수 있습니다.
기본 데이터 타입
| 타입 | 의미 |
|---|---|
| number | 숫자 타입으로, 정수와 실수를 포함 |
| string | 문자열 타입 |
| boolean | 참, 거짓을 나타내는 불리언 타입 |
| null | 값이 없음을 나타냅니다 |
| undefined | 값이 할당되지 않은 변수의 기본적인 타입 |
객체 타입
| 타입 | 의미 |
|---|---|
| object | 객체를 나타냅니다 |
| array | 동일한 타입의 요소를 가진 배열 |
| tuple | 각 요소가 다른 타입을 가질 수 있는 배열 |
특수 타입
| 타입 | 의미 |
|---|---|
| any | 어떠한 타입이든 할당될 수 있는 타입 |
| unknown | 타입을 미리 알 수 없는 경우 사용되는 타입 |
타입 명시
- 변수를 선언할 때 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정합니다.
let name : string = 'kim';
let age : number = 100;
let gender : string = 'male';
let alive : boolean = true;- 함수의 경우 매개변수의 타입과, 리턴값의 타입을 지정합니다.
function Plus(a : number, b : number) : number { // 매개변수 부분의 뒤에 붙은 : number 가 함수의 반환 타입
return a + b;
}
function Plus(a : number, b : number) : void { // 매개변수 부분의 뒤에 붙은 : void 가 함수의 반환 타입 (반환값 x)
//return a + b;
}
인터페이스
interface Book{
title : string;
isbn : number;
page : number;
category : string;
author : string;
publisher : string;
price : number;
lending : boolean;
}
==================
function book1(isbn : number) : Book { // book1 함수는 Book 타입을 리턴합니다.
return {
title : thisbook, // 리턴값은 Book 타입의 프로퍼티를 가져야합니다.
isbn : isbn,
page : 220,
category : computer,
author : anon,
publisher : abcdefg,
price : 10000,
lending : false
};
}
만약 리턴되는 프로퍼티(속성)중 값이 비어있다면?
// page 부분을 주석처리
==> 컴파일 실패 에러발생
인터페이스를 정의 할 때 프로퍼티에 '?'를 붙여서 선택적 프로퍼티로 만들어주면 됩니다. (? = 있어도 되고 없어도 되고)
interface Book{
title : string;
isbn : number;
page? : number;
category : string;
author : string;
publisher : string;
price : number;
lending : boolean;
}
함수의 경우도 ? 사용이 가능합니다.
호출시 매개변수가 한개만 존재한 경우도 사용이 가능
function Plus ( a : number, b? : number) : number {
return a + b;
}
매개변수가 a만 들어왔을 경우 b부분은 기본값 5가 들어가서 실행됩니다.
function Plus ( a : number, b? : number = 5) : number {
return a + b;
}- 인터페이스는 'string'이나 'number'타입처럼 데이터 타입으로 사용가능 합니다.
- 선택적 프로퍼티로 지정하려면 속성값 뒤에 ?를 붙여줍니다.
- 메서드도 인터페이스 내에서 선언 가능합니다.
- 인터페이스를 클래스에 상속할 수 있습니다.
열거형
interface Book {
category : string;
}
부분에서 category가 string 타입이면 카테고리랑 상관없는 문자열이 들어 갈 수도 있습니다.
=> 제한을 해야함
1.
열거형으로 CategoryType 이라는 타입을 생성합니다.
enum CategoryType {
Comic, //멤버
Society,
Horror,
Music,
Computer
}
2.
인터페이스의 category 타입도 수정합니다.
interface Book {
category : CategoryType;
}
3.
사용하는 부분에서도 열거형의 값에 맞게 수정합니다.
class MyBook implements Book {
~
category : CategoryType.Computer
~
}
보충
enum CategoryType {
Comic,
Society,
Horror,
Music,
Computer
}에서 enum의 경우 첫번째 멤버가 0이면 그 뒤의 멤버는 1 2 3 이런식으로 증가합니다.
해당 코드에서는
Comic = 0, Society = 1 이런식으로 숫자로 값을 갖고있습니다.
문자열 열거형으로 만드려면
Comic = 'comic',
Society = 'society',
이런식으로 문자열 값을 넣어주면 됩니다.
자바스크립트와 내용이 비슷해서 이해하는데 생각보다 어려운점은 없었지만
인터페이스의 사용과, 클래스 부분의 정리가 필요하다고 느낌
interface Book{
title : string;
isbn : number;
page? : number;
category : string;
author : string;
publisher : string;
price : number;
lending : boolean;
}
class MyBook implements Book { // 의미적으로는 Book을 상속한다는 의미
// Book 인터페이스를 사용해서 MyBook 이라는 클래스를 구현하겠다.
title = 'ABC';
isbn = 1234;
page = 20;
category = 'KIDS';
author = 'aaaa'
publisher = 'bbbb'
price = 4000;
lending = true;
// 메서드가 있다면 오버라이딩 하는 방식으로
}
