변수 타입 지정

변수 선언

• 타입스크립트는 자바스크립트의 엄격한 버전
• 변수의 타입을 명시하는 것이 권장되며, 코드를 더 예측 가능하고 이해하기 쉽게 만듭니다.
• : 변수의 타입을 변수명 뒤에 작성. 변수의 타입과 맞지 않는 변수를 작성 시, 에러를 발생

// 선언 방법
let 변수명 :변수의 타입 = 변수;

//javascript
let value = 5;

//typescript
let value :number = 5;

tip

타입스크립트에서는 변수를 선언할 때 타입을 명시하지 않아도 된다.
이때 타입스크립트는 할당된 값으로부터 타입을 추론한다.

//typescript 타입 명시 x
let value = 5;

위의 value 변수 처럼 타입을 명시하지 않아도, 할당된 값이 숫자이며 타입이 자동으로 number로 추론
명시적인 타입 지정이 코드의 가독성을 높이고 실수 및 에러를 방지하는데 도움이 된다.

변수 타입 종류

• :number: 자연수
• :string: 문자열
• :boolean: true 혹은 false
• : 변수타입 []: 배열
• : { key : 변수타입 }: 객체
• any: 모든 타입
• unknown: 모든 타입
• null: null
• undefined: undefined

caution

any와 unknown

• any:

  • 어떤 타입이든 할당 가능하며, 타입 검사를 하지 않음.
  • 타입 안정성이 낮아서 사용을 최소화

• unknown:

  • 어떤 타입이든 할당 가능하며, 명시적인 타입 체크나 타입 단언을 통해 사용
  • 타입 검사를 거쳐 안전하게 활용 가능하며, any보다 타입 안정성이 높음

• 타입스크립트에서는 타입 안정성을 유지하는 것이 좋기 때문에 unknown을 권장

object 선언

배열 선언

// 1차원 배열안의 원소를 string형으로 통일
let array: string[] = ["park", "lee", "kim"];

// 1차원 배열안의 각각의 요소 타입을 설정
let array: [string, number] = ["hello", 999];

// 2차원 배열안의 각 원소를 boolean형으로 통일
let array: boolean[][] = [
  [false, true],
  [true, true],
  [false, false],
];

// 2차원 배열안의 각 요소의 타입을 설정
let array: [string, number][] = [
  ["JJamVa", 27],
  ["alpha", 29],
];

객체 선언

// object는 key값을 입력 후, value에 해당 타입을 입력
let obj: { name: string } = { name: "JJamVa" };

연습 문제

타입을 알맞게 작성

let info_obj = {
  name: ["junhong", "JJamVa"],
  age: 27,
  job: "FrontEnd",
  major: true,
};

정답

let info_obj: {
  name: string[];
  age: number;
  job: string;
  major: boolean;
} = {
  name: ["junhong", "JJamVa"],
  age: 27,
  job: "FrontEnd",
  major: true,
};

객체 안 value값이 배열이면, 타입 선언을 같이하면 된다.

UnionType이란?

• 변수 선언 시, 변수가 2가지 이상의 타입을 가질 때 | 연산자를 통해 사용

// value라는 변수는 string 혹은 number로 할당
let value: string | number = "안녕";

// 괄호 사용가능
let value: null | number = 2;

// 배열 타입 생성 시, 괄호에 따라 의미가 달라짐
let array: (string | number)[] = [1, 2, "3"];

// 객체 타입 생성 시, value에 |을 이용하여 생성
let obj: { info: boolean | number } = { info: 100 };