Typescript
- js의 기본문법에 자료형 체크기능을 추가한 것
- js가 자의적으로 type해석을 하고 코드 실행시켰을 때, 의도와 다르게 쓰이는 것을 방지
- 선언: let 변수이름: 타입 = 값;의 형태로 선언 및 초기화 가능
npm install -g typescript
- 모듈 설치 후 사용가능
- 사용하려는 폴더에서 tsc --init 명령 후 사용가능
- 브라우저는 ts파일을 읽을 수 없어 js변환 필요
- 실행1) tsc 파일이름.ts -> 같은 이름의 js파일 생성됨, node 파일이름.js로 실행가능
- 실행2) npm install -g ts-node 설치 후 ts-node 파일이름.ts로 바로 실행가능
type - js기본타입
- js의 기본타입: number, string, boolean, array, object, null, undefined
- 타입 선언 후 타입에 맞지 않는 값을 넣으면 오류(빨간줄) 발생
- 배열 선언
//두 가지 방법
let arr1: number[];
let arr2: Array<string>
//2개 이상의 타입 사용가능
let arr3: (number|string)[];
let arr4: Array<number|string[]|boolean>
//어떤 자료형이든 가능
const arr5: any[] = [1, 2, false, null, "하이", [], {}];- 객체 선언
let obj1: object = {
name: "juhee",
age: 14,
}type - ts타입
- ts의 추가타입: tuple, enum, never, void, any
Tuple
- tuple: js의 배열과 비슷한 개념, 개수와 데이터타입의 순서가 정해져있는 배열을 의미한다
- 선언: let 변수: [데이터타입, 데이터타입] = [값, 값]
let fruit: [string, number] = ["apple", 3000];
// 타입과 개수에 맞게 값을 넣지 않으면 오류발생- push()로 값을 넣는 것은 가능하다 -> 어떻게? 데이터 타입이 선언되어있지 않아도 string이나 number값일 것으로 ts가 타입을 추론해서 해당 타입의 데이터가 push되는 것은 오류가 발생하지 않는다
- push나 수정을 못하도록 하고싶다! -> readonly사용
let drink3: readonly [string, number] = ["cola", 2000];
// 수정, push불가능
// drink3[0] = "cider";
// drink3.push("push되나요?");Enum
- 열거형, 숫자열거형과 문자열거형이 있다(value로 숫자 or 문자만 가능)
- 값에 이름을 미리 정의하고 사용하는, 배열과 비슷한 형태이나 선언 이후 내용의 추가, 삭제가 불가능하다(배열은 :, enum은 =)
- 값을 넣지않고 선언하면 자동으로 위의 요소부터 0 1 2 순으로 번호(값)가 부여된다
- 선언: enum 이름 {키 = 값, 키 = 깂}
enum Cake {
choco,
vanila,
strawberry,
kiwi = "kiwi",
}
//Cake.choco 배열과 같은 방법으로 값 접근가능type
- 사용자정의 타입
- type 이름 = 으로 선언
- 값에 제한을 둘 수 있음 | 로 or을 표현함
type Gender = "Female" | "Male";
// Gender타입은 둘 중 하나의 값만 가짐
const myGender: Gender = "Female" //OK
const myGender: Gender = "female" //오류발생- 객체의 타입을 생성하여 사용하는 방법 -> 인터페이스 대신 가능
//interface랑 생긴게 아주 비슷 차이는 1. type이라고 씀, 2. = 다음에 배열 씀
type Person2 = {
name: string;
age?: number;
like?: string[];
gender: Gender;
};
let daniel: Person2 = {
name: "다니엘",
gender: "Female",
age: 20,
};Interface
- 사용자정의 타입
- 사용 interface 이름 {} 배열 형태로 작성
- const 이름: 인터페이스이름 = {}
- 베열을 작성할 때 인터페이스를 사용하면 좋다
- 상속하여 새로운 인터페이스를 만들어 줄 수 있다(extends 후 {}작성)
//Student interface
interface Student {
name: string;
isPassed: boolean;
}
//사용자 정의 type
type Score = "A+" | "A" | "B+" | "B" | "C" | "D" | "F";
//Student를 상속하는 야구부 interface
interface 야구부 extends Student {
position: string;
height: number;
weight: number;
readonly backNumber?: number;
[grade: number]: Score;
}- readonly: 초기화 이후 수정 불가능
- 이름? : 필수값이 아닌 선택입력값
- [이름: 타입1]: 타입2 : key가 타입1인 것이 여러개 올 수 있음, 값은 type2를 가짐
- 함수 타입 설정: (매개변수:타입, 매개변수:타입): 리턴타입;
- 즉 함수이름 및 변수: 리턴타입;의 형태로 적는다고 보면된다
interface Calc {
(a: number, b: number): number;
}
const sum: Calc = function (num1, num2) {
return num1 + num2;
};
console.log(sum(1, 2));
//console.log(sum(1, "dd")); 오류발생- 교차타입: 타입가져올 때 &로 연결해준다, 모든 타입을 만족해야 오류가 발생하지 않는다
interface Toy {
name: string;
start(): void; //void return없는 타입
}
interface Car {
name: string;
color: string;
price: number;
}
const toyCar: Toy & Car = {
name: "타요", //겹쳐서 하나만 써도됨
color: "blue",
price: 50000,
start() {
console.log(`${this.name}의 가격은 ${this.price}원 입니다.`);
},
};