typescript function

BackEnd_Ash.log·2021년 8월 11일
0

typescript

목록 보기
9/17

📌 function

👉 parameter type & return type

export { };

function getText(name: string, age: number): string{
	const nameText = name.substr(0, 10);
	const nameText2 = age.substr(0, 10); // age 는 타입이 number 라서 substr 메소드가 없음
	const ageText = age >= 35 ? 'senior' : 'junior';
	return `name : ${nameText}, age: ${ageText}`;
}

const v1: string = getText('mike', 23);
const v2: string = getText('mike', '23'); // age 타입이 number 라서 에러
const v3: number = getText('mike', 23); // return 이 string 이라서 에러

👉 parameter type & return type

The type of variable to store the function can use an arrow symbol

export { };

// 마우스를 올려보면 name 하고 age 에 마우스를 올려보면 타입들이 나오게 된다.
const getText: (name: string, age: number) => string = function (name, age) {
	return '';
    //return 123; 숫자를 반환 할려고 하면 에러가 난다.
};

👉 optional parameters

export { };
// 선택 매개변수
function getText(name: string, age: number, language?: string): string{
	const nameText = name.substr(0, 10);
	const ageText = age >= 35 ? 'senior' : 'junior';
	const languageText = language ? language.substr(0, 10) : '';
	return `name: ${nameText} , age: ${ageText} , language: ${languageText}`;
}

getText('mike', 23, 'ko'); // language 타입에 맞게 작성할 수도 있고
getText('mike', 23); // language 를 작성하지 않을수도 있다.
getText('mike', 23, 123); // language 타입에 맞게 작성하지않으면 에러 발생한다.

/*
function getText(name: string, language?: string , age:number): string{	
	이렇게 작성을 하면 에러가 발생한다. 두번째 인수가 language 를 가리키는지 age 를 가리키는지 알수가 없기 때문이다. 
    그래서 선택매개변수를 사용할려면 끝으로 보내거나 language :string | undefined 로 해줘야한다.
*/

👉 parameter base value

export { };

// 매개변수에 기본값 입력
// 매개변수에 기본값을 선언한다는것은 
// 작성하지 않아도 된다는 뜻이기도 하니깐 마우스를 getText 함수에 over 하면 optional 파라미터가 보인다.
function getText(name: string, age: number = 15, language = 'korean'): string {
	console.log('name : ', name);
	console.log('age : ', age);
	console.log('language : ', language);
	return '';
}

console.log(getText('mike'));
console.log(getText('mike', 23));
console.log(getText('jone' , 36 , 'english'));

👉 rest parameters

export { };

// 나머지 매개변수 (rest parameter)
// rest parameter 는 항상 배열로 정의를 해야한다.
function getText(name: string, ...rest: number[]): string {
	console.log('name : ', name);
	console.log('rest : ' , rest);
	
	return '';
}

console.log(getText('mike', 1, 2, 3));
// console.log(getText('mike',1,'2',3)); 2 가 문자열이라서 에러를 발생하게 된다.

👉 function & this

this can be defined as this

export { };

function getParam(index: number): string{
	const params = this.split(','); // this 정의를 안해서 에러를 발생
	if (index < 0 || params.length <= index) {
		return '';
	}
	return this.split(',')[index];
}


// 파라미터에 this 로 타입을 선언을 하면
// 이것을 this의 타입이라고 인식을 하게된다.
// 그리고 이 함수의 매개변수는 두번째부터 시작하게 된다.
function getParam2(this:string, index: number): string{
	const params = this.splt(','); // this 를 정의하고나서 오타가 나면 에러를 발생하게 된다.
	if (index < 0 || params.length <= index) {
		return '';
	}
	return this.split(',')[index];
}

👉 prototype

When you want to inject a function into a type built into JavaScript, you should use prototype .

// export { };

function getParam(this:string , index: number): string{
	const params = this.split(','); // this 정의안하면 에러 발생
	if (index < 0 || params.length <= index) {
		return '';
	}
	return this.split(',')[index];
}

interface String {
	getParam(this: string, index: number): string;
}

String.prototype.getParam = getParam;
console.log("asdf , 123 , ok : ".getParam(1)); // 123

👉 function overloading


export { };

function add(x: number | string, y: number | string): number|string {
	if (typeof x === 'number' && typeof y === 'number') {
		return x + y;
	} else {
		const result = Number(x) + Number(y);
		return result.toString();
	}
}

const v1: number = add(1, 2); 
// v1 에서 에러 발생 인자값 두개가 number 라도 return 이 반드시 number 가 반환된다는
// 보장이 없기 때문에 에러가 난다.
console.log(add(1,'2'));

so we are sovle for error by overloading

export { };

function add(x: number, y: number): number;
function add(x: string, y: string): string;
function add(x: number | string, y: number | string): number | string{
	if (typeof x === 'number' && typeof y === 'number') {
		return x + y;
	} else {
		const result = Number(x) + Number(y);
		return result.toString();
	}
}

const v1: number = add(1, 2);
console.log(add(1,'2'));// 에러 발생 

👉 named parameters

if you think you're going to have a lot of parameters, it's a good idea to change them to named parameters.

export { };

function getText({ 
	name,
	age = 15,
	language,
}: {
	name: string;
	age?: number;
	language?: string;
	}): string { 
	const nameText = name.substr(0, 10);
	const ageText = age >= 35 ? 'senior' : 'junior';
	return `name: ${nameText} , age: ${ageText} , language: ${language}`;
}

console.log(getText({ name: 'aaa' }))
// name: aaa , age: junior , language: undefined
console.log(getText({ name: 'bbb', age: 11, language: '' }))
// age 와 language 는 optional 이라서 입력하지않아도 된다.
// name: bbb , age: junior , language:

👉 named parameters & interface

if you want use information of named parameters other typescript file or other function
you have to define interface

export { };

interface Param {
	name: string;
	age?: number;
	language?: string;
}

// 이렇게 interface 를 만들어주면 다른곳에서도 사용할 수가 있다.

function getText({ name, age = 15, language }: Param): string {
	const nameText = name.substr(0, 10);
	const ageText = age >= 35 ? 'senior' : 'junior';
	return `name ${nameText} , age ${ageText}, language : ${language}`;
}
profile
꾸준함이란 ... ?

0개의 댓글