728x90
interface Student {
studentNumber: number;
studentName: string;
age: number;
gender: string;
};
function getStudentInfo(studentNumber: number): Student {
return {
studentNumber,
studentName: 'Cine',
// age: 20,
gender: 'male',
};
}
인터페이스에 정의된 값을 하나라도 뺴고 작성을 하게 된다면 'age' is declared here 즉, Student 인터페이스에 정의된 age 프로퍼티가 반환값에 포함되어야 하는데 없다는 메세지가 발생합니다.
근데 만약 age를 필요로 할때도 있고 없어도 되는 경우도 있을때는 어떻게 해야할까요??
interface Student {
studentNumber: number;
studentName: string;
age?: number;
gender: string;
};
function getStudentInfo(studentNumber: number): Student {
return {
studentNumber,
studentName: 'Cine',
// age: 20,
gender: 'male',
};
}
이처럼 인터페이스를 작성할때 프로퍼티에 ?를 붙여주게 되면 있어도 되고 없어도 된다는 의미로 해석하게 됩니다.
따라서 위의 코드는 ? 하나를 붙임으로서 age 프로퍼티는 선택적 프로퍼티가 되어 에러가 발생하지 않는것입니다.
이러한 ? 를 옵셔널이라고 합니다.
이러한 옵셔널은 함수의 인자에도 적용할수가 있습니다.
function getStudentInfo(studentNumber: number, str?: string): void {
console.log(`${studentNumber}, ${str}`
}
이렇게 되면 getStudentInfo함수에 인자가 2개가 들어오지만 2번째 인자는 받지 않을수도 있습니다.
함수에서는 2번찌 인자에 옵셔널이 붙게되면 뒤에 인자 모두 옵셔널이 붙어야합니다.
함수에 전달되는 매개변수가 여러개이고 몇가지만 선택적 매개변수인 경우 선택적 매개변수들은 반드시 필수 매개변수 뒤에 나와야합니다!
인자의 순서가 중요하기 때문이죠!
function getStudentInfo(studentNumber: number, str = 'hello'): void {
}
또한 이처럼 인자에 값을 할당해서 인자를 넣어줄 경우
2번째 인자에 아무 값도 받지 않았을경우는 자동으로 할당된 값을 나타내줍니다.
console.log(getStudentInfo(12345));
위의 콘솔을 찍게 되면 2번째 인자로 전달하는 값이 없기 때문에 str은 자동으로 'hello'를 할당하게 됩니다
728x90
'TS 관련 > TypeScript' 카테고리의 다른 글
[TypeScript] 생성자(Constructor) (0) | 2022.07.19 |
---|---|
[TypeScript] Class와 객체(OOP 프로그래밍) (0) | 2022.07.18 |
[TypeScript] Union Type(유니언 타입), Type Alias, 타입가드 (0) | 2022.07.16 |
[TypeScript] Enum(열거형)과 리터럴 타입 (0) | 2022.07.15 |
[TypeScript] Readonly(읽기전용) 속성 (0) | 2022.07.14 |