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 이라서 에러
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; 숫자를 반환 할려고 하면 에러가 난다.
};
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 로 해줘야한다.
*/
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'));
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 가 문자열이라서 에러를 발생하게 된다.
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];
}
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
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'));// 에러 발생
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:
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}`;
}