[TS](2)基礎:タイプ宣言とタイプ推定


タイプ宣言とタイプ推定(推論)


1)タイプ推定なしでタイプを宣言:コードがどれだけ長くなるか...


a)タイプ宣言から変数:「変数名:タイプ」(タイプ推定は適用されません)
  • 変数宣言時のみ、変数に入るタイプを事前に宣言することもできます.
  • オブジェクト:次の図に示すように、Propertyをセミコロンで区切ります.
  • // let 키워드
    let a: number; // 선언만
    let b: string = "Hello";
    a = 12 // Good
    a = "Bye" // Error : 'string' 형식은 'number' 형식에 할당할 수 없습니다.
    b = "Bye" // Good
    b = 12 // Error : 'number' 형식은 'string' 형식에 할당할 수 없습니다.
    //
    // const 키워드
    const c: string = "Hi";
    const arr1: number[] = [12, 35];
    const arr2: [number,boolean] = [12, true]; // tuple 타입이다.(길이 고정, 인덱스마다 타입 다름)
    const arr3: (number | boolean)[] = [12, true]; // union 타입이다. (몇 개의 타입 허용)
    //
    // 객체 타입 선언
    const obj1: {
        key1: boolean;
        key2: string;
        key3: number;
    } = {
        key1: true,
        key2: "Hi",
        key3: 123,
    };
    b)関数のタイプ宣言(タイプ推定は適用されない)
  • パラメータのタイプ宣言:変数と同じです.
  • (重要)戻り値タイプ宣言(複数種):カッコ(「()」の横に
  • を作成
    // 함수 선언식
    function fun1(a: number, b: number): string {
        const sum: number = a + b;
        return sum.toString(); // function fun1(a: number, b: number): string 
    }
    // 함수 표현식(익명 함수)
    const fun2 = (a: number, b: number): string => {
        const sum: number = a + b;
        return sum.toString(); // const fun2 = (a: number, b: number): string
    };
    // 콜백 함수의 타입
    const fun3 = (
        a: number,
        b: number,
        c: (d: number, e: number) => string
    ): string => {
        return c(a, b);
    };
    console.log(fun3(1, 3, fun2)); // 4

    2)使用タイプ推定(Type Inference)宣言タイプ


    タイプ推定とは:タイプを宣言しなくても、コードコンテキストで最も一般的なタイプ(bestcommon type)として宣言できます.
    Documentation - Type Inference - TypeScript
    詳細は上のリンクで、私が今まで経験したことだけをまとめます.
    0)宣言時のみ(letキーワード)にタイプ宣言が必要です(推定できません).そうでなければ、anyタイプとして指定されるため、タイプスクリプトを使用すると意味がなくなります.本当に必要な場合にのみ、anyタイプが使用されます.
    1)変数(+オブジェクトのプロパティ、関数のパラメータ)を宣言しながら「元のタイプ」の値を指定する場合、タイプ推定は明確であるため、タイプ宣言は不要です.(元のタイプはJavaScriptの元のタイプ)
    2)オブジェクトタイプ(オブジェクト、配列、関数など)で複合タイプ宣言が必要な場合は、タイプ推定ではなく明確なタイプ宣言を行う必要があります.
    3)関数の戻りタイプが関数宣言時に戻り値のタイプを明確に知っていれば,タイプ推定を行うことができる.
    それをうまく利用すれば、不要なタイプ宣言は行われず、コードの長さを減らすことができます!
    コード表示前のコツ:vscodeで対応する変数や関数にぶら下がり、推論が何であるかを簡単に特定できます.

    類型推定なしで確認した上記のコードをまとめてみます.
    // 타입 추론을 활용하여 타입 선언하기
    
    // 변수에 타입 선언
    
    let a: number; // 타입 추론이 불가하므로 타입 선언 필요
    // let a; // 선언만 할 때 아무 타입도 지정하지 않으면 "any" 타입으로 선언됩니다.(권장 안함)
    let b = "Hello"; // 할당(초기화)된 값의 타입으로 타입 추론(string)
    a = 12; // Good
    // a = "Bye"; // Error : 'string' 형식은 'number' 형식에 할당할 수 없습니다.
    b = "Bye"; // Good
    // b = 12; // Error : 'number' 형식은 'string' 형식에 할당할 수 없습니다.
    
    const c = "Hi"; // 할당(초기화)된 값의 타입으로 타입 추론(string)
    const arr1 = [12, 35]; // 숫자 타입으로만 이루어진 배열로 타입 추론
    
    // 목적에 따라 타입을 선언해줘야 하는 경우
    const arr2: [number, boolean] = [12, true]; // 타입 선언 필요 : 선언하지 않으면  (number | boolean)[] 유니온 타입으로 추론됨
    const arr3 = [12, true]; // 타입 선언 불필요 : 원하는 타입으로 추론
    
    const obj1 = {
        key1: true,
        key2: "Hi",
        key3: 123,
    }; // 각각 프로퍼티의 값의 타입으로 타입 추론
    
    // 함수 선언할 때 타입 선언
    
    function fun1(a: number, b: number) {
        // return 타입 선언 불필요 : return 타입이 코드 문맥상 확실히 string
        const sum = a + b; // 타입 선언 불필요 : 타입이 코드 문맥상 확실히 number
        return sum.toString();
    }
    
    const fun2 = (a: number, b: number) => {
        // return 타입 선언 불필요 : return 타입이 코드 문맥상 확실히 string
        const sum = a + b; // 타입 선언 불필요 : 타입이 코드 문맥상 확실히 number
        return sum.toString();
    };
    
    const fun3 = (a: number, b: number, c: (d: number, e: number) => string) => {
        // return 타입 선언 불필요 : return 타입이 코드 문맥상 확실히 string
        return c(a, b);
    };
    console.log(fun3(1, 3, fun2));
    

    羽の中枢を検査する


    2つのコードの違いはすでにバニラの上に置いてありますので、ご確認ください!
    Github:タイプ宣言とタイプ推論