타입스크립트
타입스크립트는 왜 필요한가
- 자바스크립트 코드가 너무 지저분
- 코드의 스케일이 커지면서 코드관리가 되지 않는다.
타입스크립트 장점
- JS 기반보다 버그를 줄일 수 있다
- 유지보수가 쉽다
- 강력한 높은 퀄리티의 코드 생산 가능
타입 스크립트란
- 자바스크립트 + 타입 체크
- 타입스크립트 환경에 자바스크립트를 코딩하면 동작
// JS
function plus(a,b) {
return a+b;
}
console.log(plus(3,5));
// TS
function plus(a : number,b : number) {
return a+b;
}
console.log(plus(3,5));
데이터 타입을 표기시 좋은 점
- 타입 스크립트를 자바스크립트로 컴파일하는 과정 필요
환경 설정
- VSCode 설치 후 타입스크립트 설치Typescript 설치 및 컴파일 방법
npm i -g typescript
전역 설치
tsc
명령어 사용
tsc [파일이름]
입력시 컴파일 진행 -> 동일한 이름의 js파일이 생성됨
- 매번 실행하기 귀찮지 않나.
tsc -w
: watch. 해당 파일이 변화하는지 계속 감시하며 수정될 때마다 자동으로 컴파일되도록 설정
- eg)
tsc -w app.ts
Typescript의 설정 초기값을 세팅해보자tsc --init
: ts파일의 기본 설정값들이 설치된다 (tsconfig.json)
데이터타입과 추론
데이터타입의 종류
- 기본 데이터타입 / 객체타입 / 특수타입
- 기본 데이터타입
- number : 숫자 타입. 정수와 실수 모두 포함
- string : 문자열 타입
- boolean : 참 거짓
- null : 값이 없음을 나타내는 타입(참조하는 메모리 주소값이 없음을 의미. 능동적)
- undefined : 값이 할당되지 않는 변수의 기본값인 타입(수동적. 아무값도 리턴하지 않을 경우 undefined가 리턴됨. C의 return 0와 동일)
- 객체 타입
- object : 객체
- array : 동일한 타입의 요소를 가진 배열을 나타내는 타입(객체로 지원)
- tuple : 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입 (잘 안씀)
- 특수 타입
- any : 어떠한 타입이든 할당될 수 있는 타입 (JS의 var와 비슷. 모호할 경우에 임시로 쓰이게 됨)
- unknown : 타입을 미리 알 수 없는 경우 사용되는 타입. any와 비슷
타입스크립트 타입 명시
- 변수 선언 시 변수값의 타입을 명시함으로써 변수의 데이터타입을 지정
let x:string = '나는 문자열이다.';
// int x 정의방식과 유사
- 정의 시 데이터타입과 다른 타입이 재정의될 경우 Syntax 에러 발생
// TS
function plus(a : number,b : number):number { // 함수의 리턴값 데이터타입 명시 가능
return a+b; // 리턴값이 number이게 됨
}
console.log(plus(3,5));
// 더 복잡한 값 반환 디테일하게 설정
function getInfo(id: number) : {
stdId : number;
stdName : string;
age: number;
gender: string;
course: string;
completed: boolean;
}
{
return null;
}
인터페이스
인터페이스로 getInfo 좀 더 간단하게 코드 리팩토링하기
interface Student {
stdId : number;
stdName? : string;
age?: number; // 선택적 프로퍼티
gender?: string;
course?: string;
completed?: boolean;
// setName(name: string) : void; 아래와 동일
setName? : (name: string) => void;
getName? : () => string;
}
function getInfo(id: number) : Student {
return {
stdId : id;
stdName : 'eom';
age: 20;
gender: 'female';
course: 'typescript';
completed: false;
};
}
console.log(getInfo(5678));
function plus(a : number,b? : number):number { //b가 선택적 매개변수
return a+b;
}
function setInfo(student : Student) : void { // 인터페이스 재사용
console.log(student);
}
let std = {
stdId : 93,
stdName : 'eom',
age: 20,
gender: 'female',
course: 'typescript',
completed: false
};
setInfo(std);
// 인터페이스 클래스로 상속
class MyStudent implements Student {
stdId = 93;
stdName = 'eom';
age= 20;
gender= 'female';
course= 'typescript';
completed= false;
setName(name: string) :void {
this.stdName = name;
console.log('이름 설정 : ' + this.stdName);
}
}
const myInstance = new MyStudent();
myInstance.setName('앨리스');
타입스크립트 인터페이스
- 인터페이스는 string이나 number타입처럼 데이터 타입으로 사용 가능
- 선택적 프로퍼티로 지정하려면 속성값 뒤 ? 붙이기
- 메서드도 인터페이스 내에서 선언 가능
- 인터페이스를 클래스에 상속 가능
열거형
interface Student {
stdId : number;
stdName? : string;
age?: number; // 선택적 프로퍼티
// gender?: string; // Female Male 두가지밖에 없음.
// 값을 보장하기 위한 방법 1. 열거형(enum)으로 제한 두기
gender? : enum;
course?: string;
completed?: boolean;
// setName(name: string) : void; 아래와 동일
setName? : (name: string) => void;
getName? : () => string;
}
// 열거형 : 사용자 정의 타입
enum GenderType {
Male,
Female
}
class MyStudent implements Student {
stdId = 93;
stdName = 'eom';
age= 20;
gender= GenderType.Female; // string이 아닌 enum으로 받도록 변경
course= 'typescript';
completed= false;
setName(name: string) :void {
this.stdName = name;
console.log('이름 설정 : ' + this.stdName);
}
}