본문 바로가기

Front-End: Web/TypeScript

[코딩애플] ts part 1-2. primitive types

반응형

타입스크립트 기본 타입 정리 (primitive types)

JS문법 그대로 TS에서 사용 가능한데, 타입만 잘 지정해주면 된다.

저번에 셋팅해놓은 곳에 코드를 짜보자.

변수 만들기(변수에 타입지정 가능)

변수명 :타입명

let 이름 :string = 'kim';
이름 = 123; // 에러: Type 'number' is not assignable to type 'string'
  • (장점) 타입이 실수로 변경될 때 에러내줌
  • = 변수에 실드를 씌우는 것임. 다른 타입은 못 오도록.

![](.\images\01.png)

let 이름 :string = 'kim';
let 나이 :number = 50;
let 결혼했니 :null = null; // boolean, undefined, null 타입도 있음(쓸 일은 거의 없음)

array 자료에 타입 지정 가능

let 회원들 :string[] = ['kim', 'park']; // 문자만 담긴 array만 가능하도록 실드 씌움

(+) Q. 저는 array에 숫자랑 문자 동시에 넣고 싶은데요? ➡️ Union type을 쓰면 됨

object 자료에 타입 지정 가능

let 회원들 :{member1: string, member2: string} = { member1: 'kim', member2: 'park'}; 
// 이 변수엔 object만 들어올 수 있음.
// 그리고 member1 옆엔 string, member2 옆엔 string만 들어올 수 있음

타입스크립트 갓 배운 사람 특징) 온갖 곳에 다 타입 지정해놓음

let 회원들 :string = 'park';
  • 이렇게 타입을 적을 필요가 없다. **타입 지정 원래 자동으로 된다!**
  • 타입지정 문법을 생략할 수 있다.
let 회원들 = 'park'; // 자동으로 type이 string이라고 실드씌워줌

키보드 입력하는 시간을 아끼기 위해서 일부러 다 모든 데이터에 타입을 지정하진 말자.

예제 문제

Q1. 여러분의 이름, 나이, 출생지역을 변수로 각각 저장해봅시다.

물론 타입도 알아서 지정해보십시오. 이건 쉬우니 답은 없습니다.

let 이름 :string = 'daeun';
let 나이 :number = 26;
let 출생지역 :string = 'daegu';

 

Q2. 여러분이 가장 좋아하는 곡과 가수이름을 변수에 object 자료형으로 담아보십시오.

object 안엔 노래 제목과 가수이름이 들어가면 됩니다.

근데 제목과 가수는 문자만 들어올 수 있어야합니다.

let 노래 :{title: string, singer: string} = {title: '내 손을 잡아', singer: '아이유'};

Q3. 다음과 같이 생긴 자료의 타입지정을 해보도록 합시다.

let project = {
  member : ['kim', 'park'],
  days : 30,
  started : true,
}

project 변수 우측에 적으면 됩니다.

member 안엔 문자로 가득한 array만 들어올 수 있고

days는 숫자, started는 true/false만 들어올 수 있습니다.

let project :{
    member: string[], 
    days: number, 
    started: boolean
} = {
  member : ['kim', 'park'],
  days : 30,
  started : true,
}
반응형