TypeScript 타입스크립트의 함수, 타입단언

⭐ 타입스크립트의 함수

• 함수의 선언과 호출
• 매개변수와 반환 값에 타입 지정 가능

function greet(name: string): string {
  return `Hello ${name}`;
}

 

✔️ 함수에 타입 별칭을 사용하는 경우

•  화살표 함수의 체계를 사용

type ArrowFuncType = (name: string) => string; 

const arrowFunc: ArrowFuncType = (name) => {
  return `Hi ${name}`
}

console.log(arrowFunc('선하영'));
console.log(arrowFunc('지수민'));

 

✔️ 선택적 매개변수와 기본 매개변수

✅선택적 매개변수

• 함수 호출 시 생략 가능
• 변수명 뒤에 ? 작성

✔️기본 매개변수

• 기본값을 할당
• 함수 호출 시 생략하는 경우에 기본값을 자동 할당
• 매개변수명 = '기본값'

function select(name?: string, greeting: string = '안녕') {
  if (name) {
    console.log(`${greeting}, ${name}`);
  } else {
    console.log(`${greeting}, guest`);
  }
}

select(); // 안녕, guest
select('이승아'); // 안녕, 이승아
select('반가워'); // 안녕, 반가워****

select(undefined, '반가워') // 반가워, guest

select('이도경', '반가워'); // 반가워, 이도경

✅ 선택적 매개변수와 기본 매개변수 사용 시

• 선택적 매개변수는 반드시 필수 매개변수(인자로 전달) 뒤에 작성
• 기본 매개변수는 필수와 선택적 매개변수 양쪽에 작성 가능 (어디든)
• 기본 매개변수가 앞서는 경우 생략하려면 반드시 undefined를 전달
  
  

✔️ Rest(나머지) 매개변수

• 함수에 전달하는 여러 개의 매개변수를 그룹화하여 배열로 전달하는 기능
•  ...연산자(spread 연산자)를 사용하여 매개변수명 앞에 사용

function sum(a: number, b: number, ...c: number[]) {
  return c.reduce((c1, c2) => c1 + c2, 0); // c1 += c2
}

console.log(sum(1, 2, 3, 4, 5)); // 12
console.log(sum(1, 2)); // 0
console.log(sum(1, 2, 10, 20, 30)); // 60

✔️ Rest 매개변수의 주의점

• 항상 매개변수 리스트의 마지막에 위치
• 타입 명시를 배열로 작성

function sum(a: number, b: number, ...c: number[]) {
  return c.reduce((c1, c2) => c1 + c2, 0); // c1 += c2
}

console.log(sum(1, 2, 3, 4, 5)); // 12
console.log(sum(1, 2)); // 0
console.log(sum(1, 2, 10, 20, 30)); // 60

 

✔️ Rest 매개변수의 주의점

• 항상 매개변수 리스트의 마지막에 위치
• 타입 명시를 배열로 작성

 

⭐ 타입 단언(Type Assertion)

• 개발자가 타입스크립트 컴파일러 보다 해당 값의 타입의 주도권을 가지는 방법
• 컴파일러에게 '이 데이터의 타입을 내가 지정한 차입으로 간주해라!'라는 지시

✔️ 타입 단언 방법

• as 키워드를 사용

let someValue = 'this is  a string';
    // someValue = true; 
    let length = someValue.length; // length 속성의 경우 문자열, 배열에서 주로 사용
    console.log(length); // 17

 

✅ 타입 단언을 활용하는 예시

• 웹 개발에서 DOM 요소를 조작할 때, 특정 DOM 요소를 구체적인 HTMLElement 타입으로 단언
• ts가 자동으로 해당 DOM 요소의 정확한 타입을 추론할 수 없다

document.addEventListener('DOMContentLoaded', () => {
        // 버튼요소 가져오기 
        const button = document.getElementById('myButton');
        // button.disabled = true;
        // >> 'button'은(는) 'null'일수 있습니다.
        // 
        if (button) {
            button.disabled = true;
            // : bool속성인 disabled 속성은 버튼 태그에만 존재
        }
    });
    // #
    const jsonString = '{"name": "LSA", "age": 30, "hobby": "exercise"}';
    const userData = JSON.parse(jsonString);
    console.log(userData);
}

• 웹 문서에 이벤트를 등록하여
  DOM 구조가 생성되면 두번째 인자의 화살표 함수를 실행
• DOM 요소에 bool 속성 지정
  요소.bool속성
  요소.bool속성 = true; 와 동일
• HTML의 모든 요소는 HTMLElement라는 TS 내장 타입에 속함
  버튼 요소: HTMLButtonElement
   DIV 요소: HTMLDivElement
    

✅ JSON 문자열

const jsonString = '{"name": "LSA", "age": 30, "hobby": "exercise"}';
  
  interface IUser {
    name: string;
    age: number;
  }
  
  const userData = JSON.parse(jsonString) as IUser;
  
  console.log(userData);
  }