[ 인프런 - 타입스크립트 입문_기초부터 실전까지 ] 1. 타입스크립트 기초 - 변수와 함수 타입 정하기

인프런 장기효(캡틴판교) 님의 [ 타입스크립트 입문 - 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다.

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의

---

1. 타입스크립트 변수 타입 (기본 타입) 12가지

- Boolean

      

      

      

    
    

      <typescript />
    
const isOpen: boolean = true;

- Number

      

      

      

    
    

      <typescript />
    
const num: number = 10;

- String

      

      

      

    
    

      <typescript />
    
const str: string = "Hello";

- Object

      

      

      

    
    

      <typescript />
    
const obj: object = {};

const obj2: { name: string; age: number } = {
  name: "choi",
  age: 20,
};

- Array

      

      

      

    
    

      <typescript />
    
const arr1: Array<number> = [1, 2, 3];

const arr2: Array<string> = ["AAA", "BBB", "CCC"];

const arr3: number[] = [1, 2, 3];

const arr4: string[] = ["AAA", "BBB", "CCC"];

- Tuple

      

      

      

    
    

      <typescript />
    
const tuple: [string, number] = ["age", 20];

- Enum

      

      

      

    
    

      <typescript />
    
enum fruits {
  apple,
  banana,
  melon,
  orange,
}

let red: fruits = fruits.apple;

- Any

      

      

      

    
    

      <typescript />
    
const str: any = "hello";
const num: any = 10;
const arr: any = ["a", 2, true];

- Void

      

      

      

    
    

      <typescript />
    
function sayHello(): void {
  console.log("Hello");
}

- Null

      

      

      

    
    

      <typescript />
    
const temp = null;

- Undefined

      

      

      

    
    

      <typescript />
    
const temp = undefined;

- Never

      

      

      

    
    

      <typescript />
    
// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미 
function neverEnd() : never {
    while(true){
        
    }
}

---

2. 타입스크립트 함수 타입 

2.1. 함수 타입을 정의하는 방식

- 함수의 파라미터에 타입을 정의하는 방식

      

      

      

    
    

      <typescript />
    
function sum(a: number, b: number) {
  return a + b;
}

- 함수의 반환 값에 타입을 정의하는 방식

      

      

      

    
    

      <typescript />
    
function add() :number{
    return 10;
}

- 함수에 타입을 정의하는 방식

      

      

      

    
    

      <typescript />
    
function sum(a: number, b: number): number {
  return a + b;
}

---

2.2. 파라미터를 제한하는 특성

- 자바스크립트에서 함수의 파라미터보다 더 많은 인자를 전달했을 때 -> 오류 x

      

      

      

    
    

      <javascript />
    
function sum(a, b) {
  return a + b;
}

sum(10, 20, 30, 40);

- 타입스크립트에서 함수의 파라미터보다 더 많은 인자를 전달했을 때 -> 오류o

- 타입스크립트에서는 함수를 호출할 때 파라미터의 갯수가 선언시와 호출 시가 1:1로 매핑되어야 한다.

      

      

      

    
    

      <typescript />
    
function sum(a: number, b: number): number {
  return a + b;
}

sum(10,20,30);

오류발생

---

2.3. 옵셔널 파라미터

- 파라미터의 이름 뒤에 물음표 ( ? ) 를 붙여주면, 해당 파라미터가 호출되지 않아도 오류가 발생하지 않는다.

      

      

      

    
    

      <typescript />
    
function log(a: string, b?: string, c?: string) {
  console.log(a + b + c);
}

log("Hello");
log("Hello", "world");
log("Hello", "world", "!");