함수편
Optional Parameter
- 매개변수 안에 ? 를 넣게 되면 를 넣게 되면, 그인자는 전달을 받을수도 있고, 전달을 안받을수 있도록 정의 하게된다.
function showMyName(firstName: string, lastName? : string){
console.log(firstName, lastName);
console.log(lastName);
}
showMyName("김치워리어");
// 결과값 => "김치워리어", undefinedDefault Parameter
- 매개변수 안에 = 를 넣게 되면 를 넣게 되면, 전달받은 인자값이 없을경우, default로 설정한 값이 나온다.
function printMessage(message: string = "default message") {
console.log(message);
}
printMessage();
// 결과값 => "default message"Rest Parameter
- 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수있는 rest parameter는 ...인자 로 나타내고 타입의 정의는 : type[] 형태로, 배열형태로 받아온다.
// 인자타입 number, 함수 반환타입 number
function addNum(...numbers: number[]): number {
return numbers.reduce((a, b) => a + b);
}
console.log(addNum(1, 2));
console.log(addNum(1, 2, 3));
console.log(addNum(1, 2, 3, 4));
// 결과값 => 3, 6, 10배열편
Array
- 하나는 string(num...) []배열 정의, 또는 Array 로정의
const fruits: string[] = ["🍎", "🍐", "🍊"];
const scroes: Array<number> = [1, 2, 3];Tuple
- 배열이나 서로 다은 타입을 가질수있는 배열 => ex) string 과 number가 같이있는 상태이다. 그러나 권장하지 않다, 인덱스로 접근하는것은 가독성이 떨어지수도있기 때문이다.
- 따라서, interface, type alias, class로 대체해서 사용하게된다.
{
let student: [string, number];
student = ["name", 123];
student[0]; // "name"
student[1]; //123
const [name, age] = student;
console.log(name); // "name"
console.log(age); // 123
}Type Alias (타입 별칭)
- 타입 별칭(type alias)을 이용해 이미 존재하는 타입에 다른 이름을 붙여 복잡한 타입을 간단하게 쓸 수 있다. 그래서 의도를 보다 명확하게 나타낼 수 있다.
- 기존에 타입을 정의 하는방식 → const name: string 이런식으로 타입을 정의하는 대신에, Text = string을 정의한것을 정의해서 사용이 가능하다.
{
type Text = string;
const name: Text = "jin";
const address: Text = "korea";
type Num = number;
const num: Num = 3;
type Student = {
name: string;
age: number;
};
const student: Student = {
name: "jin",
age: 3,
};
// Student를 타입으로 정의해줘서 Student의 오브젝트 키를 똑같이 정의해줘야한다
console.log(name); // "jin"
console.log(address); // "korea"
console.log(num); // 3
console.log(student); // name:"jin", age : 3
}String Literal Types
- 재미있게도, Type을 문자열로도 정의할수있다.
{
type Name = "name";
let studentName: Name;
studentName = "name"; // 이미 Name이 할당되어져 name만 할당할수있다.
console.log(studentName) // "name"
studentName = "hello"; // 오류 발생!!
type Nice = "nice";
const nice: Nice = "nice";
console.log(nice) // "nice"
type Bool = true;
const isTrue: Bool = true;
console.log(isTrue) // true
}Union Types
- 발생할수있는 모든케이스중에 정해진값만 들어올수있다. 즉 발생할수있는 다양한 케이스중에 하나만 정하고 싶을때 사용한다.
{
type Direction = "left" | "right" | "up" | "down";
function move(direction: Direction) {
console.log(direction);
}
move("down");
// console => "down"
type size = 1 | 3 | 7;
const mapSize: size = 6; // 오류!!
const mapSize: size = 3;
}
{
// 로그인을 하는 함수와 성공, 실패를 알리는 타입을 정의하는예제
//function : login -> success, fail
type SucessState = {
result: "success";
response: {
body: string;
};
};
type FailState = {
result: "fail",
reason: string;
};
type LoginState = SucessState | FailState;
const good: SucessState = {
result: "success",
response: {
body: "nice!!",
},
};
const bad: FailState = {
result: "fail",
reason: ":(",
};
function printLoginState(state: LoginState) {
//sucess or fail
if (state.result === "success") {
console.log(`🥰${state.response.body}`);
} else {
console.log(`🥺${state.reason}`);
}
}
printLoginState(good);
// 🥰nice!!
printLoginState(bad);
// 🥺:(
Hello :)