📁 타입스크립트 기초
💡 타입스크립트란
📌 타입스크립트는 왜 필요한가
- 자바스크립트 코드가 너무 지저분함
- 자바스크립트는 HTML 문서의 동적인 부분을 지원하기 위해서 만들어진 언어임
- 따라서 문법도 사용자가 사용하기 쉽게 만들어짐 (타입에 대해 자유로움)
- 코드의 스케일이 커지면서 코드 관리가 되지 않음
- 협업에 대해 적합하지 않음
📌 타입스크립트
- 자바스크립트 기반보다 버그를 줄일 수 있음.
- 타입 체크 기반이기 때문에 타입에 대한 문제를 줄일 수 있음.
- 유지보수가 쉬움
- 강력한 높은 퀄리티의 코드를 생산할 수 있음.
📌 타입스크립트 = 자바스크립트 + 타입체크
- 타입스크립트 환경에 자바스크립트를 코딩하면 동작함
- 타입스크립트는 자바스크립트의 모든 기능을 포함하고 있음
- 자바스크립트에 포함되지 않는 새로운 기능도 타입스크립트가 가지고 있음
- 자바스크립트 환경에 타입스크립트를 코딩하면 동작 안 함.
📌 데이터 타입을 표기하면 좋은 점
- 컴파일 타임 시 오류 체크
- 타입스크립트로 작성된 코드는 자바스크립트로 컴파일 되어야 함
- 컴파일은 번역으로 생각하기.. (어떤 언어의 코드를 다른 언어로 바꿔주는 변환 과정)
- 즉, 브라우저에서 해석할 수 있는 자바스크립트 코드로 변환해주는 과정
- 그 후에 웹 브라우저가 자바스크립트를 해석해서 실행하게 됨
- 타입스크립트는 언어인 동시에 컴파일러임
💡 타입 스크립트 실행 환경
📌 환경 설정
- Visual Studio Code 설치
- 강력한 편집기, 강력한 IDE
- 타입스크립트 설치
- node.js 설치하기
- 타입스크립트 만들기
자바스크립트 내의 extension에서 prettier 설치 - 코드를 보기 쉽게 읽기 쉽게 해줌
코드를 검사하고 잠재적인 문제들에 대해 경고를 해주는 도구
괄호를 색깔별로 구분해줘서 가독성을 좋게 함. 오류를 낮춰줌
npm i -g typescript명령을 통해 타입스크립트를 자바스크립트로 변환해주는 컴파일러 설치
💡 첫 번째 프로젝트
📌 app.ts
// app.ts
function logName(name : string) {
console.log(name);
}
logName('lhb');이 후 터미널에 tsc app.ts 입력
위 코드를 실행해보았는데 다음과 같은 오류가 발생했다.
윈도우 powershell을 "관리자 권한"으로 실행 후
Set-ExecutionPolicy RemoteSigned명령을 입력한다. 그 후Y입력후 Enter키 누르기.
다시 코드를 실행시키면
위와 같이 app.js 파일이 만들어진 것을 볼 수 있음
// app.js
function logName(name) {
console.log(name);
}
logName('lhb');그 후 터미널에 node app.js를 입력하여 파일을 실행시킬 수 있음
app.js 실행
터미널에 tsc --init 명령 입력하여 타입스크립트의 설정 초기값을 만들어줌
app.ts의 내용을 바꾸어도 app.js 내용이 자동으로 바뀌지 않음. 컴파일을 해줘야 바뀜
tsc -w app.ts명령을 입력하면 컴파일러가 계속 파일을 지켜보고 있음. (변화가 있는지 감시함) 코드가 수정이 되면 (변경이 되면) 저절로 컴파일 해줌
💡 데이터 타입과 추론
📌 왜 데이터 타입이 그렇게 중요한가
- 타입스크립트의 특징은 자바스크립트 언어의 정적 타입핑 기능을 제공함
- 타입을 선언하고 그 선언된 타입에 맞는 값만 할당되도록 해야 함
- 자바스크립트의 변수에는 어떤 데이터 타입의 값도 할당될 수 있음.
let myname = 'lee';- BUT, 누군가가
myname을 실수로 이렇게 변경할 수도 있음. let myname = 1;
- 자바스크립트는 이러한 문제를 사전에 막지 못함.
📌 타입 추론(Type Inference) 기능
- 타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있음.
- 타입스크립트는 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론함.
let age = 30;
- 타입 스크립트는age변수의 타입을 자동으로number로 추론함.
- 타입 추론은 코드를 간결하게 작성할 수 있도록 도와주지만 타입을 명시적으로 지정하는 것이 더 명확함
- 타입 추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋음.
타입스크립트에서는 처음 할당된 값이 문자열인데, 재할당한 값이 숫자여서 할당될 수 없기 때문에 오류 발생함. 자바스크립트에서는 오류 발생 X
만약
let myname = 'lim';
myname = 'han'; // 타입추론 문자열로 바꾸면 에러가 발생하지 않음!
object 형태에서도 타입 추론 가능
📌 데이터 타입의 종류
- 타입스크립트에는 다양한 데이터 타입을 지원
- 데이터 타입은 크게 기본 데이터 타입, 객체 타입, 특수 타입으로 나눌 수 있음
🔗 기본 데이터 타입
🔸 number : 숫자 타입으로, 정수와 실수를 포함
🔸 string : 문자열 타입
🔸 boolean : 참, 거짓을 나타내는 불리언 타입
🔸 null : 값이 없음을 나타내는 타입 (의도적으로 사용자가 값을 할당하지 않음 - 능동적임)
🔸 undefined : 값이 할당되지 않는 변수의 기본값인 타입 (수동적)
🔗 객체 타입
🔸 object : 객체를 나타내는 타입
🔸 array : 동일한 타입의 요소를 가진 배열을 나타내는 타입
🔸 tuple : 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입
🔗 특수 타입
🔸 any : 어떠한 타입이든 할당될 수 있는 타입 (타입을 지정하는데 모호한 경우가 생길 때 임시로 사용하는 타입)
🔸unknown : 타입을 미리 알 수 없는 경우 사용되는 타입
💡 타입스크립트 타입 명시
📌 타입 명시
- 변수를 선언할 때 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정함.
- 타입 추론에 의해서 선언될 때보다 명확하게 지정 가능
let x : string = '나는 문자열이다.';📌 변수에 데이터 타입을 지정하는 방법
- 변수 선언 시 데이터 타입을 지정함
- 타입 스크립트를 자바스크립트로 컴파일할 때 데이터 타입에 다른 값이 할당되면 오류를 발생시켜 개발자에게 알려줌.
let myname:string = 'lim';myname = 1;myname변수에string타입을 지정하여myname에 숫자 타입을 할당하면 에러가 발생- 컴파일 타임에 에러를 일으켰을 때 에러 메시지가 난 것을 컴파일 에러 - syntax 에러라고 함. (문법적인 에러가 발생했을 때)
반환되는 구조를 위와 같이 쓰면 복잡해보임
💡 타입스크립트 인터페이스
📌 요약
- 인터페이스는 새로운 기능에 대한 명세임.
- 인터페이스는 'string'이나 'number' 타입처럼 데이터 타입으로 사용 가능 (사용자 정의 타입임)
- 선택적 프로퍼티로 지정하려면 속성값 뒤에 optional 기호인
?를 붙여줌.- optional 기호는 함수의 매개변수에도 사용 가능
- 메소드도 인터페이스 내에서 선언 가능
- 인터페이스를 상속받는 클래스는 반드시 메소드 오버라이딩을 해야 함.
- 인터페이스를 클래스에 상속할 수 있음
- 인터페이스는 구현이므로
implements를 사용함.
- 인터페이스는 구현이므로
- 인터페이스는 자바스크립트 파일에서는 보이지 않음.
// app.ts
// 변수의 데이터 타입 명시
let stdId : number = 625;
let stdName : string = 'lhb';
let age : number = 21;
let gender : string = 'female';
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 : 'lim',
age : 23,
gender : 'female',
course : 'JavaScript',
completed : true
};
}
console.log(getInfo(1111));
// 함수의 데이터 타입 명시 (매개변수, 리턴타입)
// function Plus(a : number, b : number) : number {
// return a + b;
// }
// 만약 반환 값이 없으면 void 사용 //app.js
// 변수의 데이터 타입 명시
var stdId = 625;
var stdName = 'lhb';
var age = 21;
var gender = 'female';
var course = 'TypeScript';
var completed = false;
function getInfo(id) {
return {
stdId: id,
stdName: 'lim',
age: 23,
gender: 'female',
course: 'JavaScript',
completed: true
};
}
console.log(getInfo(1111));
// 함수의 데이터 타입 명시 (매개변수, 리턴타입)
// function Plus(a : number, b : number) : number {
// return a + b;
// }
// 만약 반환 값이 없으면 void 사용 
// app.ts
interface Student {
stdId : number;
stdName : string;
age? : number; // 선택적 프로퍼티
gender : string;
course : string;
completed : boolean;
}
let std = {
stdId : 960615,
stdName : 'hoshi',
age : 29,
gender : 'male',
course : 'node.js',
completed : true
};
function setInfo(student : Student) : void
{
console.log(student);
}
setInfo(std);// app.js
var std = {
stdId: 960615,
stdName: 'hoshi',
age: 29,
gender: 'male',
course: 'node.js',
completed: true
};
function setInfo(student) {
console.log(student);
}
setInfo(std);
// app.ts
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 = 960615;
stdName = 'hoshi';
age = 29;
gender = 'male';
course = 'node.js';
completed = true;
setName(name : string) : void { // 오버라이딩
this.stdName = name;
console.log('이름 설정 : ' + this.stdName);
}
}
const myInstance = new MyStudent();
myInstance.setName('호시');// app.js
var MyStudent = /** @class */ (function () {
function MyStudent() {
this.stdId = 960615;
this.stdName = 'hoshi';
this.age = 29;
this.gender = 'male';
this.course = 'node.js';
this.completed = true;
}
MyStudent.prototype.setName = function (name) {
this.stdName = name;
console.log('이름 설정 : ' + this.stdName);
};
return MyStudent;
}());
var myInstance = new MyStudent();
myInstance.setName('호시');
💡 열거형
// app.ts
// 열거형 : 사용자 정의 타입
enum GenderType {
Male = 'male',
Female = 'female',
GenderNeutral = 'neutral'
};
interface Student {
stdId : number;
stdName? : string;
age? : number; // 선택적 프로퍼티
gender? : GenderType;
course? : string;
completed? : boolean;
// setName(name : string) : void;
setName? : (name : string) => void;
getName? : () => string;
}
class MyStudent implements Student {
stdId = 960615;
stdName = 'hoshi';
age = 29;
gender = GenderType.Male;
course = 'node.js';
completed = true;
setName(name : string) : void { // 오버라이딩
this.stdName = name;
console.log('이름 설정 : ' + this.stdName);
}
}
const myInstance = new MyStudent();
myInstance.setName('호시');
function getInfo(id : number) : Student
{
return {
stdId : id,
stdName : 'lim',
// age : 23,
gender : GenderType.Female,
course : 'JavaScript',
completed : true
};
}
let std = {
stdId : 960615,
stdName : 'hoshi',
age : 29,
gender : GenderType.Male,
course : 'node.js',
completed : true
};// app.js
// 열거형 : 사용자 정의 타입
var GenderType;
(function (GenderType) {
GenderType["Male"] = "male";
GenderType["Female"] = "female";
GenderType["GenderNeutral"] = "neutral";
})(GenderType || (GenderType = {}));
;
var MyStudent = /** @class */ (function () {
function MyStudent() {
this.stdId = 960615;
this.stdName = 'hoshi';
this.age = 29;
this.gender = GenderType.Male;
this.course = 'node.js';
this.completed = true;
}
MyStudent.prototype.setName = function (name) {
this.stdName = name;
console.log('이름 설정 : ' + this.stdName);
};
return MyStudent;
}());
var myInstance = new MyStudent();
myInstance.setName('호시');
function getInfo(id) {
return {
stdId: id,
stdName: 'lim',
// age : 23,
gender: GenderType.Female,
course: 'JavaScript',
completed: true
};
}
var std = {
stdId: 960615,
stdName: 'hoshi',
age: 29,
gender: GenderType.Male,
course: 'node.js',
completed: true
};