🔵 [React/TypeScript] 타입 별 예제 1

타입스크립트의 타입

 

1. 원시타입

- 하나의 값만 저장하는 타입

- number, string, boolean, null, undefined

// number
let num1: number = 123;
let num2: number = -123;
let num3: number = 0.123;
let num4: number = -0.123;
let num5: number = Infinity; // 무한대
let num6: number = -Infinity; // 음의 무한대
let num7: number = NaN;

// num1 = "hello"; // 오류 => string 값이 들어옴
// num1.toUpperCase(); // 오류 => toUpperCase(): string형에서 대문자로 변환
num1.toFixed(); // toFixed(): number형 소수점 제거

// string
let str1: string = "hello";
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello ${str1}`;

// str1.toFixed();
console.log(str1.toUpperCase())

// boolean
let bool1: boolean = true;
let bool2: boolean = false;

// null
let null1: null = null;

// null1 = 1; // 오류

// undefined
let unde1 : undefined = undefined;

// strictNullChecks 옵션을 false를 주어야 에러가 사라짐 (tsconfig.json)
let numNull : number = null;

// 리터럴 타입
// 리터럴 -> 값
// 해당하는 값만 가질 수 있음
let numA: 10 = 10; // 10 값만 들어갈 수 있음

let boolA: true = true; // true만 들어갈 수 있음

let strA: "hello" = "hello";

 

 

:number 형에도 null 값 넣는 방법

- tsconfig.json

 

tsx ./src/chapter1.ts  
HELLO

 

2. 배열타입

// 배열
let numArr : number[] = [1, 2, 3];

let strArr : string[] = ["hello", "hi"];

// 재네릭 문법
let boolArr: Array<boolean> = [true, true, false];
let stringArr: Array<string> = ["hello", "hi"];

// 배열에 들어가는 요소의 타입이 다양한 경우
let multiArr: (string | number)[] = [1, "hello"];

let a: (string | number) = 1;

// 다차원 배열 => 겹치는 배열 개수만큼 [] 정의
let doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5]
]

// 튜플
// 길이와 타입이 고정된 배열
let tup1: [string, number] = ["문자", 2];
tup1 = ["문자", 123];

let tup2: [number, string, boolean] = [1, "2", true];
// tup2 = ["3", 3, false] // 오류 => 앞에 숫자가 와야함

// 취약점 및 주의점: push나 pop등은 자바스크립트라서 길이가 변동 될 수 있음
tup2.push(1);
console.log(tup2); // [ 1, '2', true, 1 ] 

tup2.pop();
tup2.pop();
console.log(tup2); // [ 1, '2' ] 

const users: [string, number][] = [
  ["홍길동", 1],
  ["바보", 2],
  ["오잉", 3],
]

 

3. 객체 리터럴 타입

// 객체 타입

/*
let user: object = {
  id: 1,
  name: "홍길동"
};

// 호출 불가
// 에러 발생 이유: 이 값이 객체라는 것 말고 제공되는게 없기 때문
user.id;
*/

// 객체 리터럴 타입
// 구조적 타입 시스템
let user: {
  id?: number, // 옵셔널 체이닝 // id가 있을수도 없을수도 있다.
  name: string
} = {
  id: 1,
  name: "홍길동"
};

user.id;

// id에 옵셔널(?)을 주면 id를 주지 않아도 에러가 나지 않는다.
user = {
  name : "김길동"
};

user.name = "문길동";

// 값이 변하면 안 될 때 => readonly 사용
let config: {
  readonly apiKey: string;
} = {
  apiKey: "alfiowjflkaej key"
};

// config.apiKey = "바꿈"; // 에러