1. 타입스크립트란?
타입스크립트=자바스크립트+타입체크
타입스크립트가 자바스크립트보다 큰 집합이라고 생각하면 된다. 자바스크립트와 달리 컴파일이 필요하다.
설치 방법
npm i typescript실행 방법
다음과 같은 app.js 파일을 vscode에서 실행할 때는
function logName(name: string) {
console.log(name);
}
logName("rin");vscode 터미널 창에서 다음 명령어를 실행하면 된다.
tsc app.ts그러면 동일한 이름의 js 파일이 생성된 것을 확인할 수 있다. 그리고 그 js 파일은 다른 js파일과 마찬가지로 node 명령어로 실행하면 된다.
node 파일 이름그런데 ts 파일을 수정한다고 해서 js파일이 자동으로 수정되는 것은 아니니, 수정 후에는 컴파일을 돌려야한다. 그런데 매번 컴파일 하기는 귀찮으니 다음 명령어로 js가 ts를 계속 지켜보게 설정하자. (수정 시 알아서 바로바로 컴파일이 된다.)
tsc -w app.ts
📌에러 처리
파일 실행을 하려고 했는데 위와 같은 보안 오류가 발생했다. 그래서 터미널에 다음 명령어 두 개를 입력해 restricted에서 remoteSigned로 변경했다.
$ Get-ExecutionPolicy
$ Set-ExecutionPolicy RemoteSigned그리고 설정 파일을 알아서 설정해주는 명령어를 실행했다.
tsc --init필요한 설정 파일이 생기면 주석 처리를 해제하고 사용하면된다.
2. 데이터 타입과 추론
타입 추론(Type Inference) 기능
타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있다.
타입스크립트 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론한다.
ex) let age=30;에서 타입스크립트는 age 변수의 타입을 자동으로 number로 추론한다.
데이터 타입의 종류
타입스크립트에서는 다양한 데이터 타입을 지원하는데, 크게 기본 데이터 타입, 객체 타입, 특수 타입으로 나눌 수 있다.
기본 데이터 타입
number: 숫자 타입으로, 정수와 실수를 포함
string: 문자열 타입
boolean: 참, 거짓을 나타내는 타입
null: 값이 없음을 나타내는 타입
undefined: 값이 할당되지 않는 변수의 기본값인 타입
객체 타입
object: 객체를 나타내는 타입
array: 동일한 타입의 요소를 가진 배열을 나타내는 타입
tuple: 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입(중요도 낮음)
특수 타입
any: 어떠한 타입이든 할당될 수 있는 타입. 타입을 정하기 모호할 때.
unknown: 타입을 미리 알 수 없는 경우 사용되는 타입
타입스크립트 타입 명시
변수를 선언할 때 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정한다. 데이터 타입에 다른 값이 할당되면 오류가 발생된다.
3. 인터페이스
인터페이스는 string이나 number 타입처럼 데이터 타입으로 사용 가능하다. (사용자 정의 타입)
메소드도 인터페이스 내에서 선언 가능한다.
인터페이스를 클래스에 상속할 수 있다.
옵셔널 프로퍼티(?)
속성 뒤에 옵셔널 프로퍼티(?)를 붙이면 인터페이스를 사용할 때 인터페이스에 정의되어 있는 속성을 다 사용하지 않아도 된다.
interface Student {
stdId: number;
stdName: string;
age?: number;
}4. 열거형
열거형의 값은 숫자가 아니라 문자가 될 수도 있다. 이를 문자열 열거형이라고 한다.
enum GenderType {
Male = "male",
Female = "female",
GenderNeutral = "neutral",
}interface Student {
gender?: GenderType;
}5. 리터럴 타입
바로 위에선 GenderType을 열거형으로 표현했다면 이젠 문자열 리터럴로 표현해보겠다.
interface Student {
stdId: number;
stdName: string;
age?: number;
gender?: "male" | "female";
course?: string;
completedd?: boolean;
setName: (name: string) => void;
getName: () => string;
}Line 5) 리터럴 값으로 만들면 "male"과 "female"이 아닌 다른 문자이 들어오면 오류가 발생한다.
리터럴 타입을 사용하면 코드의 가독성이 높아지고, 잘못된 값이 들어오는 것을 방지할 수 있다.
6. any 타입
타입스크립트는 타입에 관한 정보가 더 많을수록 좋다. 개발자의 의도를 명확하게 전달할 수 있고, 코드의 유지보수에 용이하기 때문이다. 따라서 any타입을 일부러 사용하지는 말고, 타입을 지정할 수 없는 제한적인 경우에만 사용하자.
7. 유니온 타입
공용체. 제한된 타입을 동시에 지정하고 싶을 때 파이프(|) 기호를 사이에 두고 동시에 타입을 지정할 수 있다.
let anyVal : number | string;유니온 타입의 경우 대입 과정에서 오류가 발생할 가능성이 있어 typeof 연산자를 이용하여 타입 검증을 수행한다. 이를 타입가드라고 한다.
type strOrNum = number | string;
let numStr2: strOrNum = 100;
let item: number;item은 number 타입인데, number도 되고 string도 되는 더 큰 범주인 strOrNum타입을 대입하면 오류가 발생한다. 이런 경우 타입 가드를 수행하는 것이다.
// 타입 가드
if(typeof numStr2 === 'number') {
item = numStr2;
}8.타입별칭(Type Alias)
반복되는 코드를 재사용한다. 타입 재정의라고 생각하자. type 뒤에 별칭을 입력하고 =연산자 뒤에 타입을 정의하면 된다. 별칭은 관습적으로 대문자로 시작한다. 보통 union type으로 type이 길거나 복잡한 경우 유용하게 사용한다.
type AnimalType = string | number | undefined;
let animal :AnimalType;타입 별칭을 union 타입으로 합치는 것도 가능하다.
9. Array와 Tuple
Array
let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: string[] = ['apple', 'banana', 'orange'];
let mixedArray: (number | string)[] = [1, 'two', 3, 'four'];
let readOnlyArray: ReadonlyArray<number> = [1, 2, 3];
let infer = [1, 2, 3];Line 3) 타입이 섞여있는 배열을 만들고 싶으면 union 타입을 사용하면 된다.
Line 4) 읽기 전용 배열도 선언할 수 있다.
Line 5) 타입을 지정하지 않아도 타입 추론으로 자료형이 결정되기도 한다.
Tuple
타입의 순서가 정해져있는 배열이라고 생각하자.
let greeting: [number, string, boolean] = [1, 'hello', true];Array와 Tuple의 차이점
Array는 길이가 가변적이며 동일한 타입의 요소로 구성되어있다.
Tuple은 길이가 고정적이며 각 요소의 타입이 정해져있다.
10. 클래스
클래스를 선언할 때는 보통 멤버 변수와 멤버 함수를 선언한다.
멤버변수 == 속성 == 프로퍼티
멤버함수 == 메소드
생성자
class Employee {
private _empName: string;
private _age: number;
private _empJob: string;
// 생성자
constructor(empName: string, age: number, empJob: string) {
this._empName = empName;
this._age = age;
this._empJob = empJob
}
}
const emp1 = new Employee('kim', 30, 'developer');Line 7) 위의 상태에서 객체를 생성할 때 모든 옵션이 반드시 할당되지 않아도 되게 만드려면 옵셔널 프로퍼티를 붙여주면 된다.
