반응형
function add2(num1: number, num2: number):number {
console.log(num1+num2);
return num1+ num2;
}
function add3(num1: number, num2: number):void {
console.log(num1+num2);
}
function isAdult2(key:number):boolean{
return age>19;
}
//인터페이스처럼 함수의 매개변수도 옵셔널로 지정 가능 (optional parameter; 선택적 매개변수)
function hello(name?:string){
//function hello(name:string){
return `Hello, ${name||"world"}`;
//name이 없으면 world
}
const result =hello();
const result2 =hello("sam");
//name이 없으면 world라고 되어있지만, 타입명시 필요
//const result1 =hello(12);
//-> (name?:string) : undefined or string
//매개변수에 기본값 정의 가능
function hello2(name ="world"){
return `Hello, ${name}`;
}
//이름, 나이를 받아서 문자열 출력
function hello3(name:string, age?: number): string{
//function hello3(age?: number,name:string): string{
//-> 선택적 매개변수가 앞에 오면 에러 발생
if(age !== undefined){
return `Hello, ${name}. You are ${age}.`;
}else{
return `Hello, ${name}`;
}
}
//필수가 아닌 매개변수가 앞에 오게 하려면 (유니언 타입 이용)
function hello4(age: number|undefined, name:string): string{
if(age !== undefined){
return `Hello, ${name}. You are ${age}.`;
}else{
return `Hello, ${name}`;
}
}
//number나 undefined 가능 -> 단 명시적으로 undefined 전달
console.log(hello4(undefined, "sam"));
//나머지 매개변수
function add4(...nums : number[]){
return nums.reduce((result, num) => result +num, 0);
}
//개수가 매번 바뀔 수 있는 매개변수 -> 전달된 매개변수를 배열로 나타내게 한다.
//타입스크립트에서의 this
interface User5{
name: string;
}
const Smith: User5 ={
name:'Smith'
}
//this는 사용하는 방법에 따라 달라진다. -> bind
function showName(){
//console.log(this.name);
//this의 타입이 명시되지 않아서 에러발생
}
//this의 타입을 명시하는 방법: 함수의 첫번째 매개변수자리에 this:타입 명시
function showName2(this:User5){
console.log(this.name);
}
//매개변수 있을 경우
function showName3(this:User5, age:number, gender:'m'|'f'){
console.log(this.name, age, gender);
}
const a4 = showName.bind(Smith);
const a5 = showName2.bind(Smith);
const a6 = showName3.bind(Smith);
a4();
a5();
a6(30,'m');
//this다음부터 순서대로 매개변수로 적용된다.
//인터페이스 - 함수 (검증기)
//동일한 매개변수라도 타입을 다르게 줄 수 있는 특징을 가진 자바스크립트
//전달받은 매개변수의 타입에 따라서 함수의 반환형이 달라진다. -> 함수 오버로드
function join(name:string,age:string):string;
function join(name:string,age:number):User;
function join(name:string,age:number|string):User | string{
if(typeof age ==="number"){
return{
name,
age
};
}else{
return "나이는 숫자로 입력해주세요.";
}
}
//User 객체 혹은 string를 리턴하는 함수
//함수오버로드 적용전 (sam이 객체를 반환할지 문자열을 반환할지 타입 명시가 불확실하므로)
const sam: User|string =join("Sam", '1');
const jane: User|string =join("Jane", 30);
//함수오버로드 적용후
const sam2: string =join("Sam", '1');
const jane2: User =join("Jane", 30);
console.log(sam);
console.log(jane);
console.log(sam2);
console.log(jane2);
bind(항상 this로 받을 변수)
:함수의 this 값을 영구히 바꾼다.
function update(birthYear, occupation){
this.birthYear = birthYear;
this.occupation = occupation;
}
const updateMike = update.bind(mike);
//항상 mike의 프로퍼티를 바꾸는 메서드
updateMike(1980, "police);
반응형
'JavaScript > TypeScript' 카테고리의 다른 글
타입스크립트 클래스 (0) | 2024.02.05 |
---|---|
타입스크립트 리터럴, 유니온/교차타입 (0) | 2024.02.02 |
타입스크립트 DOM (0) | 2024.02.01 |
타입스크립트 인터페이스 (구현과 상속) (0) | 2024.02.01 |
타입스크립트 기본타입 (0) | 2024.01.31 |