백구의 코딩찌개
  • [TYPE SCRIPT] 타입 스크립트 기본 문법
    2023년 12월 27일 00시 47분 16초에 업로드 된 글입니다.
    작성자: 코딩백구
    반응형

    자료형

    • 타입 스크립트에서 제공하는 데이터 타입은 Js 기본 자료형을 포함하며
    • boolean, number, string, symbol, null, undefined, array, any, void, never, unknown enum 등의 원시 타입이 있다.

    Type Annotation

    • Type Annotation 이란 명시된 타입만 들어올 수 있다고 선언하는 것을 말한다.
    // Literal Types
    const userName1 = "Bob";
    // const로 선언할 때, type 자체가 "Bob"로 할당, 이를 리터럴 타입이라 한다.
    let userName2 = "Tom"; // 다른 문자열로 바뀔 수 있으므로 type이 string로 할당.
    
    // Union Types : | 를 사용하여 타입을 나타내는것.
    grade: 1 | 2 | 3;
    // grade 에는 1 2 3 만 올 수 있다. 이를 Union Type 이라 한다.
    
    // Intersetction Types : & 을 사용하여 타입을 나타낸 것
    interface Car3 {
    	name: string;
    	start(): void;
    }
    
    interface Toy3 {
        name: string;
        color: string;
    	price: number;
    }
    
    const toyCar3: Toy3 & Car3 = {
        // 양쪽 모든 속성을 다 기입해줘야 한다.
        name: "타요",
        start() {
        	console.log("go");
        	},
        color: "black",
        price: 49000,
    };-

    함수 타입 정의

    function hello(name?:string): string {
    	return `Hello, ${name || "world"}`;
    }
    const result = hello();
    // return 문에 name이 없을 경우의 처리도 해 놓았지만 에러가 뜬다.
    // 들어가야하는 매개 변수에 ? 를 붙이면 해결 -> 선택적 매개변수
    // 혹은 매개변수에 default 값을 준다.
    
    
    function add2(...nums: number[]) {
        // 인자를 여러개 받을 때 ... (스프레드 연산자)를 사용하여 넣어주고, 타입은 배열로 정해준다.
        return nums.reduce((result, num) => result + num, 0);
    }
    
    interface User2 {
        name: string;
    	age: number;
    }
    
    // 오버라이딩을 사용함으로써 join 함수가 User2 를 반환할 지 string 을 반환할 지 알 수 없다.
    function join(name: string, age: number): User2; // 함수 오버라이딩 사용
    function join(name: string, age: string): string;
    function join(name: string, age: number | string): User2 | string {
        if (typeof age === "number") {
        	return {
                name,
                age,
            };
        } else {
        	return "나이는 숫자로 입력해주세요.";
        }
    }
    
    const jin: User2 = join("Jin", 20);
    // join이 User2 객체를 반환한다고 확신할 수 없다.
    
    const jane: string = join("Jane", "30");
    // join이 string 를 반환한다고 확신할 수 없다.
    
    // 이럴때는 함수 오버라이딩을 해준다.
    반응형
    댓글