타입 스크립트 기본 문법 (2.1 ~ 2.3)

목차

• 변수, 매개변수, 반환값에 타입을 붙이면 된다.
• 타입 추론을 적극 활용하자
• 값 자체가 타입인 리터럴 타입이 있다
• 객체는 const 이어도 수정 가능?

 

---

2.1 변수, 매개변수, 반환값에 타입을 붙이면 된다

• 변수, 함수의 매개변수, 반환값에 어떤 타입을 붙일지 알아야 한다!
• 타이핑 (typing) : 타입을 부여하는 행위
• 기본 타입 : string, number, boolean, null, defined, symbol. bigint, object

 

(타입스크립트 사이트의 플레이 그라운드 사용)

• 변수 이름 바로 뒤에 콜론과 함께 타입 표기

const str : string = 'hello';
const num : number = 123;
const bool : boolean = false;
const n : null = null;
const u : undefined = undefined;
const sym : symbol = Symbol('sym');
const big : bigint= 10000000000000n
const obj : object = {msg : 'hello'};

 

 

• 플레이 그라운드 사용시 자바스크립트 결과물을 보여줌
  • 타입 스크립트는 결국 자바스크립트로 변환됨!

"use strict";
const str = 'hello';
const num = 123;
const bool = false;
const n = null;
const u = undefined;
const sym = Symbol('sym');
const big = 10000000000000n;
const obj = { msg: 'hello' };

 

 

• 함수 표기하는 법
  • 매개변수 타입 : 매개변수 바로 뒤 표기
  • 반환값 타입 : 함수의 매개변수 소괄호 뒤 표기

function plus (x: number, y : number) :number {
    return x + y;
}

const minus = (x : number, y : number) : number => x - y;

 

 

 

 

---

2.2 타입 추론을 적극 활용하자

function plus (x: number, y : number) :number {
    return x + y;
}

const result1 : number = plus(1,2);
const result2 = plus(1,2);

• 변수 result2와 같이 타입을 부여하지 않아도 타입 스크립트가 알아서 타입을 추론해줌

number로 추론해줬음을 알 수 있음

• 타입 스크랍트는 어느 정도 변수와 반환값의 타입을 스스로 추론함
  • 매개변수에는 타입 부여해야,, : 어떤 값이 들어올지 모르니깐 --> 부여 안하면 오류 뜸

매개변수에 타입을 명시하지 않아 타입을 추론했다

• any타입 : 일단 모든 타입을 허용하는 타입이라고 이해하고 넘어가기
  • 발생 에러 : implicitAny 에러

 

타입스크립트가 타입을 제대로 추론하면 그대로 쓰고, 틀리면 타입을 표기한다!

 

const str = 'hello';
const num = 123;
const bool = false;
const n = null;
const u = undefined;
const sym = Symbol('sym');
const big = 10000000000000n
const obj = {msg : 'hello'};

위처럼 타입을 표기하지 않은 경우

 

 

• 타입 스크립트에서 알아서 부여하지만, 타입이 'hello'라고 되어 있음
  • null, defined를 제외한 모든 값이 특정 값으로 타입 추측됨
• const로 선언했으므로 다른 값이 될 수 없기 때문에!

 

알고 넘어가기

• 리터럴 타입 : 타입 표기시 'hello', 123, false 같은 정확한 값 입력 가능
• 타입 표기 시 더 넓은 타입 표기 가능 
  • {} (타입 표기로 사용 시) : null, undefined 가 아닌 모든 타입을 의미

 

let 으로 선언 시 대부분이 위의 내가 선언한 타입과 비슷함  (바꿀 수 있어 넓게 추측함)

• null, undefined는 any로 추측함

 

객체

• const 나 let이나 상관 없이 {msg : string}임
• 객체의 속성은 상관없이 변형 가능하기 때문!

 

 

 

---

2.3 값 자체가 타입인 리터럴 타입이 있다.

자바스트립트에서 let으로 선언한 변수는 어떤 값이든 대입 가능하다. 하지만 타입스크립트에서는 타입을 지정하기 때문에 타입과 일치하는 값만 대입 가능하다. let 변수에 리터럴 타입을 표기하는 경우 리터럴과 같은 값만 대입 가능하다.

'hello' 타입 변수를 수정하는 경우

'hello' 타입 변수 선언 시 'world'값을 넣는 경우

 

 

 

애초에 const가 존재하므로 let에는 리터럴 타입을 표기하지 않는다. 심지어 const 사용 시 우리가 직접 지정하지 않아도 알아서 리터럴 타입을 추측해준다.

 

 

 

리터럴 타입이 아닌 경우는 let과 함께 쓰임 -> 타입에 부합하는 값으로 변경 가능!

• string 타입 변수에 숫자인 123을 대입할 수 없음

 

 

객체를 표시하는 리터럴 타입도 있다.

const obj : {name : 'zero'} = {name : 'zero'};
const arr : [1,3,'five'] = [1,3,'five'];
const func : (amount : number, unit :  string) => string = (amount, unit) => amount +unit;

• 각각 객체, 배열, 함수
• 함수 리터럴 타입의 경우 반환값의 표기법 =>

 

 

타입 스크립트의 추측에 맡기는 경우

string or number

• 더 넓은 범위로 타입을 지정함
  • 객체는 const로 선언되어도 수정 가능하기 때문!

 

 

확실하게 변하지 않을 경우 -> 접미사 as const 추가

타입 추측이 바뀜

• readonly 수식어가 붙으면 해당 값은 변경 불가

 

---

객체는 const 이어도 수정 가능?

• 완전 arr 자체를 재할당하는 건 불가능

 

 

• arr 내부의 요소 값을 '변경' 하는 건 가능

const arr = [1,3,3]
arr[1]= 2
console.log(arr)

 

 

내 생각

객체 변수도 어차피 해당 객체를 참조하는 참조값임. 주소 자체가 변하는 않는 선에서 변경 가능한 것 같음