변수 만들 때 타입정하기 (타입 실드씌우기)
타입스크립트는 변수만들 때 변수의 타입을 지정가능합니다.
let 이름: string = 'kim'
변수명:타입 이렇게 정하면 됩니다.
방금 여러분은 변수에 실드를 씌운 것입니다.
이제 이름이라는 변수는 string 타입이 되며
갑자기 숫자 이런걸 할당하려고 하면 실드로 튕겨냅니다 (에러가 나게 됩니다.)
진짜 시험삼아 숫자 할당해보십시오. 타입 실드가 바로 튕겨내줄걸요
(참고) name이라는 변수명은 전역변수로 사용불가능합니다. 비슷한거 여러개 있음
타입은 여러가지가 있습니다.
자주 쓰는 primitive types 들을 소개하자면
string, number, boolean 이런게 있습니다.
let 이름 :string = 'kim';
let 나이 :number = 20;
let 결혼했니 :boolean = false;
(대문자 String 아닙니다 소문자 string임)
추가로 null, undefined 이런 것도 있습니다.
근데 굳이 사용하진 않습니다.
array 또는 object 자료 안에도 타입 지정가능
여러 자료를 한 곳에 저장하고 싶을 때 array 또는 object 자료형을 사용합니다.
근데 그 안에 들어갈 자료들도 전부 타입지정이 가능합니다.
let 회원들 :string[] = ['kim', 'park']
array 자료안에 들어갈 타입은 타입명[] 이렇게 지정하면 됩니다.
그럼 array 자료에 각각 string이라는 타입 실드를 장착한 겁니다.
이제 숫자로 수정하려면 실드가 튕겨냅니다. 에러날걸요?
Q. array 안에 string, number 이런게 동시에 들어갈 땐 타입지정 어떻게 하냐고요?
그것은 변수명: (string | number)[] 이렇게 하면 되는데 나중에 다뤄보도록 합시다.
let 내정보 : { age : number } = { age : 20 }
object 자료안에 들어갈 타입은 내가 만들 object와 똑같은 모습으로 지정하면 됩니다.
뭔가 이상해보이지만 변수명 오른쪽에 오는 것들은 전부 타입지정 문법입니다.
외우면 이상하지 않습니다.
아무튼 이러면 age 속성에 number 실드를 씌워준 것입니다.
let 이름 :string = 'kim';
이름 = 30;
타입을 잘 지정해준다면 타입이 실수로 변경될 때 이런 경고성 에러가 납니다.
Type 'number' is not assignable to type 'string'.(2322)
엄격하게 타입을 지켜서 코드짜는걸 도와주는 에러니 앞으로 반겨주면 됩니다.
(물론 이 에러는 ts에서만 나는 에러고 실제 변환된 .js 파일 가보시면 별일 없습니다.)
하지만 오늘의 프로 팁은
그렇다고 모든 변수에 타입지정하러 다니면 초보티가 납니다.
숙련자들은 타입을 귀찮게 굳이 적지 않습니다.
왜냐면 변수 생성시 타입스크립트가 타입을 자동으로 부여해주니까요.
let 이름 = 'kim';
let 나이 = 20;
이렇게만 써도 자동으로 이름변수는 string, 나이 변수는 number를 가지고 있습니다.
(변수명에 마우스 올려보면 바로바로 확인가능)
array, object 만들 때도 자동으로 알아서 됩니다. 굳이 복잡하게 타입 명시할 필요 없음
let 이름;
이름 = 'kim';
심지어 변수만 만들고
나중에 가서 여기에 'kim'을 할당해도 타입이 자동으로 string으로 변합니다.
그래서 간단한 변수들은 타입을 생략하도록 합시다.
타입지정하는게 보기좋다면 그러쇼
팁) 에러메세지는 tsc -w 명령어 실행중인 터미널에 나옵니다.
간결하게 보려면 terminal 탭 옆에 problems 탭에도 나옴
Q1. 여러분의 이름, 나이, 출생지역을 변수로 각각 저장해봅시다.
물론 타입도 알아서 지정해보십시오. 이건 쉬우니 답은 없습니다.
Q2. 여러분이 가장 좋아하는 곡과 가수이름을 변수에 object 자료형으로 담아보십시오.
object 안엔 노래 제목과 가수이름이 들어가면 됩니다.
근데 제목과 가수는 문자만 들어올 수 있어야합니다.
var 좋아하는거 :{ song : string, singer : string } = { song : '로리신레퀴엠', 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,
}
그렇다고 합니다. 왼쪽 오른쪽 짝맞추기임