리터럴
- 타입스크립트에서 타입을 리터럴 형식으로 생성하면, 정해진 값만을 가질 수 있습니다.
cf. 타입지정 : 타입을 명시해서 해당 타입의 값만 가질 수 있게 제한하는 것.
interface Member {
id : number;
gender? : 'male' | 'female';
}
function memberInfo(id : number) : Member {
return {
~
gender : 'male';
}
}
===
gender는 male 과 female 중 하나만 가능리터럴 타입
특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야 한다.
- 문자열 리터럴 타입
let status : 'success' | 'error'
status = 'success' // O
status = 'fail' // X- 숫자 리터럴 타입
let volume : 0 | 50 | 100;
volume = 100; // O
volume = 75; // X- 불리언 리터럴 타입
let alwaysTrue : true;
alwaysTrue = true; // O
alwaysTrue = false; // X- 객체 리터럴 타입
let myCar : { color : 'black', price : 4000 };
myCar = { color : 'black', price : 4000 }; // O
myCar = { color : 'white', price : 100}; // X // 값이 일치해야함- 타입 별칭
type CardinalDirection = 'N' | 'E' | 'S' | 'W';
let direction : CardinalDirection;
direction 'N'; // O
direction 'A'; // X리터럴 타입의 장점
- 코드의 가독성이 좋음
- 잘못된 값이 들어오는 것을 방지
유니온 타입
- any타입 : 타입 체크를 하지 않는다. 어떠한 타입이 오더라도 가능함. (JS에서의 방식, 문제 가능성)
- 유니온 타입 : 타입을 제한하면서, 다른 타입을 동시에 지정하고 싶을 때가 있을 때 사용합니다.
let n : number // number타입만 가능
let s : string // string타입만 가능
let ns : number | string; // number or string
e.g.
function convertToString( val : number | string ) : string {
return string(val);
}
function convertToNumber( val : number | string ) : number {
return number(val);
}type alias
type 키워드를 사용해서 새로운 타입을 선언하는 것
타입의 이름을 재지정하여 타입의 길이가 길어지면서 발생하는 단점을 없애줍니다.
type strOrNum = number | string;
function convertToString( val : strOrNum ) : string {
return string(val);
}- 타입의 반복을 줄여줍니다.
- 가독성을 높이고, 재사용성과 유지보수성을 높입니다.
타입가드
- typeof 연산자를 이용하여 타입 검증을 수행합니다.
* 보충
- 타입 가드는 타입 네로잉(Type Narrowing)의 방법 중 하나.
- 타입가드 : 조건문을 통해 런타임에서 값의 타입을 검사하고 분기하는 코드
typeof,instanceof,in, 기타
배열 타입
let numbers : number[] = [1, 2, 3, 4, 5];
let fruits : string[] = ['apple', 'banana', 'orange'];
let mixedArr : (number | string)[] = [1, 'a', 2, 'b']; // number와 string 요소
let readOnlyArr : ReadonlyArray<number> = [1, 2]; // 값 추가 불가능
--- --- --
튜플 : 타입의 순서가 정해져 있는 것
let inOrder : [number, string, boolean] = [1, a, true]Array와 Tuple의 차이점
- Array는 길이가 가변적이며 동일한 타입의 요소로 구성
- Tuple은 길이가 고정적이며 각 요소의 타입이 정해져 잇음
Spread 연산자 ...
let firstArr = [1, 2, 3]
let secondArr = [4, 5, 6]
// [...firstArr, ...secondArr]; // ...firstArr = [1, 2, 3] -> 1, 2, 3
// ...secondArr = [4, 5, 6] -> 4, 5, 6
// -----> [ 1, 2, 3 4, 5, 6]
let combineArr = [...firstArr, ...secondArr];
for(let i = 0; i < combineArr.length; i++) {
console.log(combineArr[i]);
}
===> 1 2 3 4 5 6class와 생성자
class Employee {
empName : string;
age : number;
empJob : string;
printEmp() : void {
console.log(this.empName + '의 나이는' + this.age + '이고, 직업은 ' + this.empJob + '입니다.')
}
}
let employee1 = new Employee();
employee1.empName = 'kim';
employee1.age = 100;
employee1.empJob = 'developer';
employee1.printEmp();모든 클래스는 생성자라는 메서드를 가집니다.
타입스크립트에서는 constructor ()라는 키워드의 메서드를 사용합니다. // 동작방식은 다른 프로그래밍 언어의 생성자와 동일
class Employee {
empName : string;
age : number;
empJob : string;
constructor(empName : string, age : number, empJob : string) {
this.enpName = empName;
this.age = age;
this.empJob = empJob;
}
printEmp() : void {
console.log(this.empName + '의 나이는' + this.age + '이고, 직업은 ' + this.empJob + '입니다.')
}
}
let employee1 = new Employee('kim', 500, 'FE');
employee1.printEmp();객체가 생성되면서 매개변수가 constructor 생성자에 전달이 되고 this.( 이 객체의 맴버 )로 전달이됩니다.
constructor(empName : string, age : number, empJob : string) 에서도 ?를 사용하여 선택적으로 전달하게 가능
중간에 옵셔널로 있으면 그 뒤부터는 전부 선택적으로 하게 해야함 -> 2번이 선택적인 경우 2번은 비어있고 3번에 값이 들어왔는데 이게 2번 값인지 3번 값인지 구별이 안되기 때문
constructor(empName : string, age? : number, empJob? : string)
접근 지정자
프로퍼티(속성값)는 객체를 통해서 변경이 가능합니다. // 값의 조작, 버그 발생 등
employee1.empName = 'park'; // kim ---> park
클래스의 멤버변수는 보호를 받아야합니다. -> 접근을 제한해야 한다. (접근 지정자를 사용)
간단하게
public : 외부에서 자유롭게 접근가능 (기본값)
private : 외부에서 접근불가. 내부에서만 접근가능
protected : 상속의 경우 자식의 경우는 부모에 접근가능, 외부에서는 접근 불가능
보호는 하는건 좋은데, 외부에서도 값을 불러오거나 하려면 어떻게 해야하는지
|기타|
클래스명은 대문자로 시작하는게 관습
private 이름 앞에는 _ (언더바)를 붙이는게 관습
getter setter
외부에서 직접적으로 프로퍼티에 접근하는 것을 막고, 중간다리 역할을 합니다.
getter : 값을 가져옵니다.
setter : 값을 지정합니다.
class Employee {
private _empName : string;
private _age : number;
private _empJob : string;
constructor(empName : string, age : number, empJob : string) {
this.enpName = _empName;
this.age = _age;
this.empJob = _empJob;
}
printEmp() : void {
console.log(this._empName + '의 나이는' + this._age + '이고, 직업은 ' + this._empJob + '입니다.')
}
}
------------------
get empName() {
return this._empName;
}
set empName(val : string) {
this._empname = val;
}
let employee1 = new Employee('kim', 500, 'FE');
employee1.empName = 'park';
employee1.printEmp();class Employee {
// 클래서의 멤버변수를 생성자쪽으로 이동?시킴
constructor( // 암묵적으로 클래스의 멤버변수로 선언됨
private _empName : string,
private _age : number,
private _empJob : string
) {
//this로 받아 멤버변수에 할당하는 것도 생성자에서 처리
}
printEmp() : void {
console.log(this._empName + '의 나이는' + this._age + '이고, 직업은 ' + this._empJob + '입니다.')
}
get empName() {
return this._empName;
}
set empName(val : string) {
this._empname = val;
}
}
let employee1 = new Employee('kim', 500, 'FE');
employee1.empName = 'park';
employee1.printEmp();- 생성자 매개변수에 접근 지정자(private 등)을 붙이면, 해당 매개변수는 자동으로 클래스의 멤버 변수로 선언되고 초기화까지 됩니다.
- 별도로 this._empName = _empName 의 할당 코드를 작성할 필요도 줄어듭니다.
