함수 타입

한 입 크기로 잘라먹는 타입스크립트 - 함수 타입

onebite-typescript/section4 폴더를 만든 뒤 vscode 로 해당 폴더를 연다. 이후 node.js 패키지를 초기화한 뒤, @types/node 패키지를 설치한다.
npm init -y 명령어를 사용하면 자동으로 기본값으로 패키지 초기화가 진행된다.

- Terminal

npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.

    See `npm help init` for definitive documentation on these fields
    and exactly what they do.

    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.

    Press ^C at any time to quit.
    package name: (section4)
    version: (1.0.0)                                                                                                                                                                                                                  
    description:                                                                                                                                                                                                                      
    entry point: (index.js)                                                                                                                                                                                                           
    test command:                                                                                                                                                                                                                     
    git repository:                                                                                                                                                                                                                   
    keywords:                                                                                                                                                                                                                         
    author:                                                                                                                                                                                                                           
    license: (ISC)                                                                                                                                                                                                                    
    About to write to D:\개발\인프런\한 입 크기로 잘라먹는 타입스크립트(TypeScript)\onebite-typescript\section4\package.json:

    {
    "name": "section4",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
    }


    Is this OK? (yes) yes
    npm notice 
    npm notice New minor version of npm available! 10.2.3 -> 10.9.0
    npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.0
    npm notice Run npm install -g npm@10.9.0 to update!
    npm notice

npm i @types/node
    added 2 packages, and audited 3 packages in 769ms

    found 0 vulnerabilities

npm i @types/node 명령어를 통해 내장 기능들에 대한 타입 선언들 추가.
이후 타입스크립트 컴파일러 옵션을 설정하기 위해 tsconfig.json 파일을 생성하여 설정한다.

- tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext"
      , "module": "ESNext"
      , "outDir": "dist"
      , "strict": true
      , "moduleDetection": "force"
      , "skipLibCheck": true // 추가
    }
  , "include": ["src"]
  , "ts-node": {
        "esm": true
    }
}

ES 모듈 시스템을 사용하도록 package.json 파일에서 "type" 속성과 값을 추가한다.

- package.json

{
  "name": "section4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^22.8.5"
  }
}

모든 패키지 설정이 완료되었으므로, 설정이 잘 되었는지 확인하기 위해 src 폴더를 만들고 index.ts 파일을 생성한다.

- index.ts

console.log('Hello New Project');

이후 tsc 명령어를 이용하여 컴파일 후 컴파일된 자바스크립트 파일을 확인한다.

- Terminal

tsc

- dist/index.js

console.log('Hello New Project');
export {};

tsconfig.ts 에서 "moduleDetection": "force" 로 설정했기 때문에, 자동으로 export 키워드도 추가되었다.
컴파일 결과를 node 로 실행하고 tsx 로 실행한다.

- Terminal

node dist/index.js
    Hello New Project

tsx src/index.ts
    Hello New Project

타입스크립트 패키지 초기설정을 완료했다.
src 폴더에 chapter0.ts 를 생성한다.

1. 함수 타입 정의
자바스크립트 버전 : 함수를 설명하는 가장 좋은 방법은, 어떤 매개변수를 받고, 연산을 거쳐 어떤 결과값을 반환하는지 이야기 하는 것이다.
타입스크립트 버전 : 함수를 설명하는 가장 좋은 방법은, 어떤 [타입의] 매개변수를 받고, 연산을 거쳐 어떤 [타입의] 결과값을 반환하는지 이야기 하는 것이다.

- chapter0.ts

/**
 * 함수 타입 정의
 */
// function func(a: number, b: number): number {
function func(a: number, b: number) {
    return a + b; // 반환값 타입 생략해도 number 타입으로 추론
}

/**
 * 화살표 함수 타입 정의
 */
// const add = (a: number, b: number): number => a + b;
const add = (a: number, b: number) => a + b; // 반환값 타입 생략해도 number 타입으로 추론

/**
 * 함수의 매개변수
 */
// 주의사항1 : 명시한 매개변수 타입과 초기화하는 값의 타입이 다르면 안됨.
// 주의사항2 : 함수 호출시 자동 추론된 매개변수의 타입과 다른 타입을 인수로 전달하면 안됨.
function introduce(name = '송진성') { // 타입 지정하지 않아도 기본값 기준으로 타입 추론
    console.log(`name : ${name}`);
}
// introduce(1);

function introduce2(name = '송진성', tall?: number) { // 선택적 매개변수 타입 : number | undefined
    console.log(`name : ${name}`);
    if (typeof tall === 'number') { // 타입 가드로 타입 좁히기
        console.log(`tall : ${tall + 10}`); // number
    }
}

introduce2('송진성', 178);
introduce2('송진성'); // 선택적 매개변수로 인해 가능

// 선택적 매개변수 뒤에 필수 매개변수가 오면 안됨
// 선택적 매개변수 앞에 필수 매개변수가 와야 함
// function introduce3(name = '송진성', tall?: number, age: number) {}
function introduce3(name = '송진성', age: number, tall?: number) {}
introduce3('송진성', 31, 178);

/**
 * 나머지 매개변수
 */
// function getSum(...rest: [number, number, number]) { // 튜플 타입으로 만들어 매개변수를 3개만 받을 수 있음
function getSum(...rest: number[]) { // 개별 요소를 배열로 묶음
    let sum = 0;
    rest.forEach((it) => sum += it);
    return sum;
}
getSum(1, 2, 3); // 6
getSum(1, 2, 3, 4, 5); // 15

참고링크 : https://reactjs.winterlood.com/4e81b92b-4097-4fd8-8c67-09a7588c94d6#c027776dc2ea440d9867381b8ec296fe

6. 스프레드 연산자와 rest 매개변수 - 2. 자바스크립트 실전

 

참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런