티스토리 뷰
타입스크립트
필요성
- 자바스크립트 코드가 너무 지저분하다.
- 코드의 스케일이 커지면서 코드 관리가 되지 않는다.
좋은점
- 자바스크립트 기반보다 버그를 줄일 수 있다.
- 유지보수가 쉽다.
- 강력한 높은 퀄리티의 코드를 생산할 수 있다.
타입스크립트 = 자바스크립트 + 타입체크
- 타입스크립트 환경에 자바스크립트를 코딩하면 동작함.
- 자바스크립트 환경에 타입스크립트응 코딩하면 동작안함.
타입스크립트로 작성된 코드는 자바스크립트로 컴파일 돼야함.
타입스크립트는 언어인 동시에 컴파일러.
타입스크립트 실행
글로벌 설정
tsc --inittsconfig.json 파일이 생성되고, 타입스크립트 설정이 완료된다.
tsc app.tsapp.js가 생성되며, 이후 node app.js로 실행 가능하다.
tsc -w app.ts-w 옵션(watch)을 사용하면 app.ts 파일을 수정할 때마다 자동으로 app.js로 컴파일이 된다.
내용이 같이 바뀜.
데이터 타입과 추론
타입추론기능
- 타입스크립트는 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론
- 타입스크립트는 변수 뒤에 : 타입처럼 타입을 직접 적을 수 있음.
하지만 적지 않아도 자바스크립트처럼 타입을 자동으로 추론해줘서 에러는 나지 않음. - 그렇지만 타입을 안 적으면 버그가 생길 수 있기 때문에, 특히 복잡하거나 헷갈리는 경우에는 타입을 꼭 명시하는 게 좋다.
데이터 타입의 종류
기본 데이터 타입
- number : 숫자 타입으로, 정수와 실수를 포함
- string : 문자열 타입
- boolean : 참, 거짓을 나타내는 불리언 타입
- null : 값이 없음을 나타내는 타입
- undefined : 값이 할당되지 않는 변수의 기본값인 타입
객체 타입
- object : 객체를 나타내는 타입
- array : 동일한 타입의 요소를 가진 배열을 나타내는 타입
- tuple : 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입
특수 타입
- any : 어떠한 타입이든 할당될 수 있는 타입
- unknown: 타입을 미리 알 수 없는 경우 사용되는 타입
타입스크립트 타입 명시
타입 명시
- 변수를 선언할 때 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정한다.
변수에 데이터 타입을 지정하는 방법
- 변수 선언 시 데이터 타입을 지정한다.
- 타입스크립트를 자바스크립트로 컴파일 할때 데이터 타입에 다른 값이 할당되면 오류 발생
//변수의 데이터 타입 명시시
let stdId : number = 1111;
let stdName : string= "John Doe";
let age : number = 20;
let gender : string= 'male';
let course : string = 'Typescript';
let completed : boolean = false;
//컴파일 에러 - syntax에러
//함수의 테이터 타입 명시(매개변수, 리턴타입)
function plus(a: number, b: number): number {
return a + b;
}
console.log(plus(10, 20)); // 30
function plus(a: number, b: number): void {
return a + b;
}
리턴타입에 void가 들어가면 아무것도 리턴하지 않는다.
let stdId : number = 1111;
let stdName : string= "John Doe";
let age : number = 20;
let gender : string= 'male';
let course : string = 'Typescript';
let completed : boolean = false;
function getInfo(id : number) : {
stdId : number;
stdName : string;
age : number;
gender : string;
course : string;
completed : boolean;
}
{
return null;
}인터페이스
interface Student {
stdId : number;
stdName? : string;
age? : number;
gender? : string;
course? : string;
completed? : boolean;
}인터페이스에 ?만 붙여주면 옵셔널 기호가 됨
setName(name : string) : void;
setName : (name : string) => void;위 아래 코드가 같은 것임
let stdId : number = 1111;
let stdName : string= "John Doe";
let age : number = 20;
let gender : string= 'male';
let course : string = 'Typescript';
let completed : boolean = false;
interface Student {
stdId : number;
stdName : string;
age? : number;
gender : string;
course : string;
completed : boolean;
}
function getInfo(id : number) : Student
{
return {
stdId : id,
stdName : 'lee',
// age : 20,
gender : 'female',
course : 'javascript',
completed : false
}
}
console.log(getInfo(5678));원래라면 하나가 빠지면 오류가 나고 출력이 안됨
interface에 ?를 넣고 없애면 뺴고 출력됨
let std = { //변수를 사용하여 코드를 더 깔끔하게 바꿈
stdId : 91012,
sydName : 'lel',
age : 30,
gender : 'female',
course : 'javascript',
completed : false
}
function setInfo(student : Student) : void
{
console.log(student);
}
setInfo(std);
변수를 사용하여 코드를 더욱 깔끔하게 만들었음
interface Student {
stdId : number;
stdName? : string;
age? : number;
gender? : string;
course? : string;
completed? : boolean;
//setName(name : string) : void;
setName : (name : string) => void;
//getName : () => string;
}
class MyStudent implements Student{
stdId = 91012;
stdName = 'lel';
age = 30;
gender = 'female';
course = 'javascript';
completed = false;
setName(name: string): void {
this.stdName = name;
console.log('이름 설정 :' + this.stdName) ;
}
}
const myInstance = new MyStudent();
myInstance.setName('앨리스');
* 타입스크립트의 인터페이스가 자바스크립트에는 없음
- 인터페이스는 런타임에는 영향 없음
- tsc로 컴파일 시 JavaScript 파일에는 전혀 남지 않음
- 오직 개발자 편의와 코드 안정성을 위해 존재하는 구조야
인터페이스 요약
- 인터페이스는 'string'이나 'number'타입처럼 데이터 타입으로 사용가능
- 선택적 프로퍼티로 지정하려면 속성값 뒤에 ?를 붙여준다.
- 메소드도 인터페이스 내에서 선언 가능
- 인터페이스를 클래스에 상속할 수 있다.
- 사용자 정의 타입
열거형
// 열거형 : 사용자 정의 타입
enum GenderTYpe {
Male = 'male',
Female = 'Female',
GenderNeutral = 2
}
let std = {
stdId : 91012,
stdName : 'lel',
age : 32,
gender : GenderTYpe.Female,
course : 'javascript',
completed : false
}
function setInfo(student : Student) : void
{
console.log(student);
}