Post

[TypeScript] 타입

Posted Updated
By 79gun79
12 min read
[TypeScript] 타입

데브타스

TypeScript 특징

검사 범위

  • 타입스크립트는 tsconfig.json 하위 파일의 모든 변수를
    전역으로 검사한다.
  • 따라서, 서로 다른 파일에 같은 변수를 정의하면 Error 발생!

해결 방법

코드 블럭 {}을 활용하여, 변수를 감싸주면 된다!

  • 이전

    1

      let num: number = 10;

  • 이후

    1
2
3

    {
  let num: number = 10;
}

타입 추론

  • 변수에 할당되는 값을 보고,
    타입스크립트 컴파일러가 타입을 추론하는 현상

  • 아래의 각 변수는 별도로 타입을 지정하지 않아도, 타입을 추론한다.

    1
2
3
4
5
6
7
8
9
10
11
12

        let num = 10                           // number
    let name = "hello";                    // string
    let bool = true;                       // boolean
      
    let unde = undefined;                  // any
    let nul = null;                        // any
      
    let sym = Symbol("a");                 // symbol
    let numArr = [1, 2, 3];                // number[]
    let obj = { name: "jaegeon", age: 26 };
    // {name: string, age: number}
    let big = 100n;                        // bigint

    undefined, null은 타입스크립트 컴파일러가
    나중에 어떤 값이 또 할당이 되겠다고 생각하기에 → any로 추론

readonly 키워드

  • 해당 키워드를 사용하면, 초기에 할당된 값을 바꿀 수 없다!

  • 어떤 변수든 사용가능하다.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14

      {
    let obj: {
      readonly name: string;
      age: number;
    } = {
      name: "jaegeon",
      age: 20,
    };
    
    obj.name = "heungmin"; // 여기서 Error
    
    console.log(obj.name);
    console.log(obj.age);
  }

옵셔널 파라미터 ?

  • 옵셔널 파라미터 ?를 붙이면, 옵셔널 속성이 된다.

  • 옵셔널 속성: 해당 속성에 해당하는 값이 와도 되고, 안와도 된다.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

      {
    let obj: {
      readonly name: string;
      age: number;
      gender?: string; // 옵셔널 속성
    } = {
      name: "jaegeon",
      age: 20,
    };
    
    obj.gender = "male"; // 나중에 값을 부여해도, 문제 없음!
    
    console.log(obj.name);
    console.log(obj.age);
    console.log(obj.gender);
  }


TypeScript 타입

  • 타입스크립트는 한 번 타입을 지정하면,
    그 이후에 다른 타입의 변수를 할당하면 Error 발생!

string

  • 문자열을 나타냄
  • ” “ ‘ ‘(따옴표) , ` `(리터럴)로 표현 가능

  • ` `(리터럴)로 여러줄의 문자열도 표현 가능

    1
2
3
4
5
6

      // 1. string
  let name: string = "Alice";
  let greeting: string = `Hello, ${name}`;
  let single: string = "Single Quote";
  let multie: string = `This is
      a multieline string`;

number

  • 다양한 형태의 숫자를 나타냄
  • 10진수, 16진수, 2진수, 실수 표현 가능

  • 별도로 정수와 실수 타입이 따로 나뉘지 않는다!

    1
2
3
4
5

      // 2. number
  let age: number = 10; // 10진수
  let hex: number = 0xff; // 16진수
  let binary: number = 0b10010; // 2진수
  let float: number = 3.14; // 실수

boolean

  • 논리형의 참, 거짓을 나타내고, truthy, falsy로 나뉨
  • falsy: 0, -0, “”, null, undefined, NaN

  • truthy: falsy를 제외한 모든 값

    1
2
3
4
5

      // 3. boolean
  let bool1: boolean = true;
  let bool2: boolean = false;
  let bool3: boolean = !0;
  let bool4: boolean = 10 <= 20;

null

  • 아무것도 없는 값을 나타냄.

    1
2

      // 4. null
  let nothing: null = null;

undefined

  • 정의되지 않은 값을 나타냄.

    1
2

      // 5. undefined
  let notDefined: undefined = undefined;

any

  • 모든 타입을 허용함 → 아무거나 가능 (원래, 타입을 지정하면 변경 X)
  • “타입을 검사하지 않겠다” 라는 의미로 해석 가능

  • 타입 검사를 하지 않기에 → 남용을 피해야 함.

    1
2
3
4
5
6
7

      // 6. any - 아무거나 허용
  let anything: any = 10;
  anything = 20;
  anything = "A";
  anything = true;
  anything = null;
  anything = undefined;

unknown

  • any와 동일하게, 모든 타입을 허용함
  • any와 동일하게, 타입 검사를 하지 않음.

  • 단, 해당 값을 사용하려면 → 타입을 검증해야 함!

    1
2
3
4
5
6
7

      // 7. unknown
  let input: unknown = 10;
  input = 20;
  input = "A";
  input = true;
  input = undefined;
  input = 3.14;

any와 unknown의 차이

any

  • number 타입의 숫자가 와서, 타입을 몰라도 수행 가능

    1
2
3

    // 6. any
let a: any = 3.14;
console.log(a.toFixed(2));

unknown

  • number 타입의 숫자가 와도, 타입을 몰라서 수행 불가

    1
2
3

    // 7. unknown
let a: unknown = 3.14;
console.log(a.toFixed(2));

  • 타입 검증 해결방법 → typeof() 검사

    1
2
3
4

      let input: unknown = 3.14;
  if (typeof input === "number") {
      console.log(input.toFixed(2));
  }

배열 array

  • 연속적인 자료형인 배열을 나타냄.
  • 타입 지정을 위해, []를 사용 → (이전에는 제네릭 <>을 사용했음)

  • 배열 안의 값과 타입이 중요하므로 같이 나타나야 한다!

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

      // 8. 배열(array)
  let arr: [] = [];
  let numArr: number[] = [10, 20];
  let numArr2: Array<number> = [10, 20];
    
  let strArr: string[] = ["10", "20"];
  let strArr2: Array<string> = ["10", "20"];
    
  let boolArr: boolean[] = [true, false];
  let boolArr2: Array<boolean> = [true, false];
    
  let undefinedArr: undefined[] = [undefined, undefined];
  let undefinedArr2: Array<undefined> = [undefined, undefined];
    
  let nullArr: null[] = [null, null];
  let nullArr2: Array<null> = [null, null];
  let objArr: object[] = [{}, {}];

  • 또한 중첩 된, 다차원 배열도 타입을 다음과 같이 지정한다!

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

      // 8-2. 이차원 배열
  let matrix: number[][] = [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9],
  ];
  let matrix2: Array<Array<number>> = [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9],
  ];
    
  // 8-3. 삼차원 배열
  let cube: number[][][] = [
      [
        [1, 2],
        [3, 4],
      ],
      [
        [5, 6],
        [7, 8],
      ],
  ];

튜플 tuple

  • 특정 형태를 갖는 배열을 나타냄.

  • 역시, []를 사용하여 안에 타입을 각각 지정하면 된다.

    1
2
3
4
5

      // 9. 튜플(tuple)
  let mixArr: [number, string] = [10, "a"];
  mixArr = [20, "b"];
  let mixArr2: [number, number[]] = [10, [20, 30]];
  let mixArr3: [number, [], {}] = [10, [], {}];

  • 다양하게, 혼합하고 중첩하여 사용할 수 있다.

    1
2
3
4

      let mixTuple: [number, string, object][] = [
      [1, "hello", { key: "value" }],
      [2, "world", { key: "example" }],
  ];

bigint

  • 자바스크립트에서 허용하는 최대 숫자의 범위

    1
2

      console.log(Number.MAX_SAFE_INTEGER);
  // 9007199254740991
  • 허용 범위를 넘어서는 숫자를 처리

  • n을 사용하여, 올바르게 출력 가능.

    1
2
3
4
5

      // 10. bigint
  console.log(9007199254740997); // 9007199254740996로 불일치
    
  const bigNum: bigint = 9007199254740997n;
  console.log(bigNum); // 9007199254740997n으로 일치

  • 일반적인 number의 숫자와는 타입이 달라, 계산이 불가능!

    1
2

        console.log(100n + 20n); // 120n
    console.log(100n + 20);  // Error

객체 object

  • 해당 내용에서는, 키와 값으로 구성된 데이터 구조를 의미

  • 타입 지정을 위해, {}나 object를 사용할 수 있으나, 주의할 점이 있음.

    1
2
3
4
5
6
7
8

      let obj: object = {}; 
  // [], function의 최상위 객체인 object의 타입을 허용
    
  let obj2: {} = {}; 
  // null과 undefined를 제외한 모든 값을 허용
    
  let objReal: Record<string, never> = {}; 
  // 객체의 키는 문자열, 값은 절대 올 수 없음

    • object: []과 function() {...}의 최상위 객체인 object 타입을 허용

      → 허용 타입: [], function() {...}

    • {}: 레퍼 객체라 중, null과 undefined를 제외한 모든 값을 허용

      → 허용 타입: [], function() {...}, number, string

    • Record<string, string>: 해당 방식으로
      키와 값으로 제한되는 객체만을 허용
    • Record<string, never>: 해당 방식으로
      키와 값으로 제한되는 객체의 빈 객체만을 허용

객체의 타입 지정

  • 객체 안에 올 수 있는 값은 다양함

  • 각각의 값의 타입은 {}안에 키: 타입;의 형식으로 지정
    (키: 타입,의 형식으로 콤마를 사용해도 무관)

    1
2
3
4
5
6
7
8
9
10
11

      let person: {
      name: string;
      likesFood: string[];
      address: { street: string; city: string };
      isLoggedIn: boolean;
    } = {
      name: "Jaegeon",
      likesFood: ["apple", "banana"],
      address: { street: "Yeon-Seong", city: "Shi-Heung" },
      isLoggedIn: false,
    };

[참고] 객체 타입 쉽게 지정

  • 예: 다음 코드의 타입을 쉽게 지정해보자.

  1. 타입으로 {}를 작성

    1
2
3
4
5
6

     let person: { } = {
     name: "Jaegeon",
     likesFood: ["apple", "banana"],
     address: { street: "Yeon-Seong", city: "Shi-Heung" },
     isLoggedIn: false,
   };

  2. {}안에 키와 값의 내용들을 쭉 복사한다.

    1
2
3
4
5
6
7
8
9
10
11

     let person: {
 		name: "Jaegeon",
     likesFood: ["apple", "banana"],
     address: { street: "Yeon-Seong", city: "Shi-Heung" },
     isLoggedIn: false, 
   } = {
     name: "Jaegeon",
     likesFood: ["apple", "banana"],
     address: { street: "Yeon-Seong", city: "Shi-Heung" },
     isLoggedIn: false,
   };

  3. {}안에 값의 타입을 확인하여 각각의 타입으로 수정한다.
    (이 때, ;를 구분자로 사용하도록 한다)

    1
2
3
4
5
6
7
8
9
10
11

     let person: {
     name: string;
     likesFood: string[];
     address: { street: string; city: string };
     isLoggedIn: boolean;
   } = {
     name: "Jaegeon",
     likesFood: ["apple", "banana"],
     address: { street: "Yeon-Seong", city: "Shi-Heung" },
     isLoggedIn: false,
   };

[참고] 중첩되는 구조의 타입 쉽게 지정

  • 예: 다음 코드의 타입을 쉽게 지정해보자.

    Image

  1. 최상위구조까지 접고, 타입을 명시한다.

    Image

    Image

  2. 다음 구조를 펼치면서, 차례로 타입을 명시한다.

    Image

    Image

프로그래머스 데브코스, 타입스크립트
study programmers typescript
This post is licensed under CC BY 4.0 by the author.