DEVELOP
article thumbnail

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

 

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

타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관

www.inflearn.com


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

- Boolean

const isOpen: boolean = true;

- Number

const num: number = 10;

- String

const str: string = "Hello";

- Object

const obj: object = {};

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

- Array

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

const tuple: [string, number] = ["age", 20];

- Enum

enum fruits {
  apple,
  banana,
  melon,
  orange,
}

let red: fruits = fruits.apple;

- Any

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

- Void

function sayHello(): void {
  console.log("Hello");
}

- Null

const temp = null;

- Undefined

const temp = undefined;

- Never

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

타입스크립트 함수 타입 

함수 타입을 정의하는 방식

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

function sum(a: number, b: number) {
  return a + b;
}

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

function add() :number{
    return 10;
}

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

function sum(a: number, b: number): number {
  return a + b;
}

파라미터를 제한하는 특성

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

function sum(a, b) {
  return a + b;
}

sum(10, 20, 30, 40);

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

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

function sum(a: number, b: number): number {
  return a + b;
}

sum(10,20,30);

오류발생


옵셔널 파라미터

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

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

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

 

profile

DEVELOP

@JUNGY00N