https://www.youtube.com/watch?v=jlzvXcDGZUU&list=PLJf6aFJoJtbUXW6T4lPUk7C66yEneX7MN&index=5&ab_channel=%EB%95%85%EC%BD%A9%EC%BD%94%EB%94%A9PeanutCoding
# 타입스크립트 파일에서 컴파일을 하여 js문서로 바꿔줘야 한다.
app.ts 라는 파일에서 ts코드를 적었다면 터미널에서
tsc app.ts하면 app.js라는 자바스크립트 문서로 나타난다.
# 컴파일후 ts파일에서 중복된함수 에러메세지가 뜬다면?
터미널에서 tsc --init을 치면 없어짐. vs에러야.
# 매번 컴파일 하지 않고 실시간으로 하려면?
tsc -w
watch로 계속 바로 바꿔주는거임.
# 실시간으로 nodemon 처럼 코드 확인하려면?
터미널 두개띄워서 하나는 tsc -w 실행시켜두고
또하나는 nodemon app.js실행해놓으면 됨.
#타입명시
let x : string = 'hello world
# 타입 인프런스
let a = 5;
a = 'five'
console.log(a)
이런식의 코드는 js에서 문제가 없다. 하지만 타입스크립트에서 a를 숫자로 넣었기떄문에
다음 할당도 숫자가 들어가야한다. 컴파일 자체가 안됨.
let a = 5;
a = 10;
console.log(a)
이건 됨.
이게 타입스크립트가 타입을 추론해서 알아서 에러띄워주는거.
# 함수 타입 명시
let num : number = 12345;
let str : string = 'hello';
let age : number = 10;
let gender : string = 'male';
let subject :string = 'javaScript';
let courseCompleted : boolean = true;
//void는 반환값이 없는 함수일때.
function fetStdInfo(studentId : number):void {
console.log()
}
// object라고 적으면 객체값이 반환됨. 반환값 없으면 에러뜸.
function getStdInfo(studentId : number):object {
console.log()
return {student : 'smart1'}
}
파라미터 옆에, 함수이름 옆에 등등 타입쓴다.
# 객체 타입 명시
// object라고 적으면 객체값이 반환됨. 반환값 없으면 에러뜸.
function getStdInfo(studentId : number):{
value1 : number,
value2 : string
}{
return {value1 : 1, value2 : 'hello'}
}
이렇게 객체 키벨류값에 각각 타입명시도 가능.
#위에처럼 넘 코드가 드럽게 보인다면? -> 인터페이스 사용
interface Obj {
value1 : number, value2 : string
}
이렇게 인터페이스 구조를 잡아준다.
그리고 밑에 함수에서
function getStdInfo(studentId : number):Obj{
return {value1 : 5, value2 : 'babo'}
}
이렇게 걍 Obj로만 써도 잘 작동해먹음.
# 객체반환 인터페이스 함수 예시
interface Student {
studentId : number;
name : string;
age : number;
gender : string ;
subject :string ;
courseCompleted : boolean;
}
function getStudentInfo ( studentId : number) : Student{
return {
studentId : 1,
name : 'jacob',
age : 30,
gender : 'male',
subject : 'js',
courseCompleted : false,
}
}
# 선택적 프로퍼티
// 한 키값이 있던 없던 상관안하는거.
interface Student {
studentId : number;
name : string;
age? : number;
gender : string ;
subject :string ;
courseCompleted : boolean;
}
// age가 있어도 없어도 됩니다. 물음표 안붙이면 에러뜹니당.
function getStudentInfo ( studentId : number) : Student{
return {
studentId : 1,
name : 'jacob',
gender : 'male',
subject : 'js',
courseCompleted : false,
}
}
# 메소드 인터페이스
interface Student {
studentId : number;
name : string;
age? : number;
gender : string ;
subject :string ;
courseCompleted : boolean;
addComment (comment : string) : string;
addComment : (comment:string) =>string;
}
이렇게 객체 메소드로 넣을수 있음.
# readOnly 읽기 전용 프로퍼티
interface Student {
readonly studentId : number;
name : string;
age? : number;
gender : string ;
subject :string ;
courseCompleted : boolean;
// addComment (comment : string) : string;
addComment? : (comment:string) =>string;
}
이렇게 readonly붙여주면 새로운 할당으로 들어갈수 없음. const처럼 생각하면 될듯.