타입스크립트는 그대로 실행할 수 없다.
꼭 자바스크립트 파일로 변경해야만 실행이 가능하다 : 컴파일 or 트랜스파일이라고 한다.
타입스크립트 설치가 필요하다.
1. 전역으로 타입스크립트 설치를 하자
npm install typescript -g
2. 설치 버전 확인하기
tsc -v
3. 컴파일 하자
tsc app.ts
4. 생성된 js를 실행하자
node app.js
* 변경될 때마다 계속적으로 컴파일 하는거는 귀찮다.
-w하면 왓치 모드로 변경된다. 이건 파일이 변경해서 저장하면 자동으로 컴파일이 된다.
tsc app.ts -w
* 타입스크립트 설정파일
tsc --init
"strict": true, 로설정되어있으면 에러 빨간 줄이 뜬다. -> strict는 필수
실무에서는 eslint 같은걸로 함께 쓴다.
ctrl + shift + P -> TS 서버 다시 시작
//**타입스크립트 기본 타입**
let value: number = 1233123;
let str: string = "hello";
let bool: boolean = true;
let arr: number[] = [1, 2, 3, 4];
let arr2: Array<number> = [1, 2, 3, 4];
let arr3: string[] = ["a", "b", "c"];
let tuple: [string, number] = ["hi", 10]; //개수가 정해짐
//자바스크립트에 없는 enum을 쓸 수 있다.
enum Fruit {
Apple, //0
Pear, //1
Melon, //2
}
let fruit: Fruit = Fruit.Apple;
console.log(fruit);
enum Fruit2 {
Apple = 2, //0
Pear, //1
Melon, //2
}
let fruit2: Fruit2 = Fruit2.Apple;
console.log(fruit2);
//비어있다. -> 반환 값이 없을때 사용
let void1: void = undefined;
function func(): void {
console.log();
}
let any1: any = "hi";
any1 = 1234;
any1.toFixed(2);
//unknownd은 타입스크립트의 최상위 타입(Top Type)
//unknown은 toFixed(3)같은것을쓸 수 없다.
//최상위 이므로 모두를 받아야함
//모든 타입이 쓰는 메소드는 쓸수 있지만, 아닌경우 불가능
let unknown1: unknown = 42;
unknown1 = 123;
//unknown1.toFixed(2); <-- 는 숫자형만 쓸수있기때문에 불가능
//never : 어떠한 타입도 불가능한 경우,타입 추론이 불가능한 경우에 사용
function fn(x: string) {
if (typeof x === "string") {
x; //x:string
} else {
x; //도달하지 않으므로 x:never 뜬다
}
}
//함수
//반환값을 고정시키려면 써야함.
function sum(a: number, b: number): number {
return a + b;
}
const result = sum(10, 20);
console.log(result);
//내부에 값에의해서 변환될때는 쓰지않아도 된다.
function sum2(a: number, b: number) {
return a + b;
}
const result2 = sum2(10, 20);
console.log(result2);
//추가로 받거나, 받지 않고 싶은경우가 있다. : 옵셔널 -> ?을 넣어준다.
function sum3(a: number, b?: number) {
return a + (b ?? 0);
}
const result3 = sum3(10);
console.log(result2);
//매개변수로 기본값을 줄 수있다.
function sum4(a: number, b: number = 0): number {
return a + (b ?? 0);
}
const result4 = sum4(10);
console.log(result2);
//매개변수를 가변적으로 주고싶다 -> 스프레드 연산자 사용
function sum5(...nums: number[]): number {
return nums.reduce((result, num) => result + num);
}
console.log(sum5(1, 2, 3, 4, 5));
console.log(sum5(1, 2));
console.log(sum5(1, 2, 3));
//타입스크립트에서 this는 this에 대한 타입을 추가할 수 있다.
//this를 window라고 정의해주고, 그 뒤부터가 매개변수이다.
// function thisFunc(this: window, message: string) {
// this.alert(message);
// }
// window.thisFunc("hi~");
//###모르는 부분 찾아서 공부###
//타입스크립트에서의 오버로드
//오버로드 시그니처
function makeDate(date: string): Date; //오버로드 시그니처
function makeDate(y: number, m: number, d: number): Date; //오버로드 시그니처
//구현시그니처
function makeDate(date: string | number, m?: number, d?: number) {
if (typeof date === "string") {
return new Date(date);
}
return new Date(date, m ?? 0, d);
}
console.log(makeDate("2022-10-01"));
console.log(makeDate(2022, 10, 1)); //년 월 일
// console.log(makeDate("2022", 10, 1)); //<- 이런거는 허용하면 원하는 값이랑 달라진다.
// console.log(makeDate(2022)); // <- 이런거는 허용하면 원하는 값이랑 달라진다.