TIL 12주 2일차 - Type script 복습

타입스크립트 설치 => npm install -g typescript 

or

1. npm init -y

2. npm install typescript

3. npx tsc --init

----

tsc -w  => ts파일을 js로 실시간으로 갱신시켜줌

 

let 이름 :string = 'kim'

변수를 만들 때 타입지정이 가능합니다. 

변수명 : 타입명 이렇게 씁니다.

타입으로 쓸 수 있는 것들은 string, number, boolean, bigint, null, undefined,[], {} 등이 있습니다. 

 

 

 

let 이름 :string = 'kim';
이름 = 123;

타입을 지정해놓으면 타입이 의도치 않게 변경될 경우 에러메세지를 띄워줍니다.

덕분에 타입관련 버그들을 사전에 찾아 없앨 수 있습니다. 

 

 

 

let 이름 :string[] = ['kim', 'park']
let 나이 :{ age : number } = { age : number }

array 혹은 object 자료는 이렇게 타입지정이 가능합니다. 

 

 

 

 

let 이름 :string | number = 'kim';

이 변수에 여러가지 타입의 데이터가 들어올 수 있다면

| 기호를 이용해 or 연산자를 표현할 수 있습니다. 

위 예제는 변수에 숫자 혹은 문자를 집어넣을 수 있게 됩니다. 

 

 

 

 

type nameType = string | number;
let 이름 :nameType = 'kim';

type 키워드를 이용해 타입을 변수처럼 담아서 사용가능합니다.

 

 

 

type NameType = 'kim' | 'park;
let 이름 :NameType = 'kim';

string number 이런 것 뿐만 아니라 나만의 타입을 만들어 사용가능합니다.

저렇게 원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'kim' 또는 'park'만 들어올 수 있습니다.

literal type이라고 부릅니다. 

 

 

 

 

function 함수명(x :number) :number{
  return x * 2
}

함수는 파라미터와 return 값이 어떤 타입일지 지정가능합니다.

실수로 다른 타입이 파라미터로 들어오거나 return될 경우 에러를 내줍니다. 

함수는 return 타입으로 void를 설정가능한데 return이 없는지 체크할 수 있는 타입입니다. 

 

 

 

 

//에러
function 함수명(x :number | string) {
  return x * 2
}

//가능
function 함수명(x :number | string) {
  if (typeof x === 'number'){
    return x * 2
  } 
}

타입스크립트는 지금 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없습니다.

항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야 허락해줍니다. 

 

 

 

 

type Member = [number, boolean];
let john:Member = [100, false]

array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면 

tuple 타입을 쓰면 됩니다. 대괄호 [ ] 안에 들어올 자료의 타입을 차례로 적어주면 됩니다. 

 

 

 

 

type MyObject = {
  name? : string,
  age : number
}
let 철수 :MyObject = { 
  name : 'kim',
  age : 50
}

object 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용가능합니다.

type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용해도 무방합니다. 차이점은 별로 없습니다. 

특정 속성이 선택사항이면 물음표를 기입가능합니다. 

 

 

 

 

type MyObject = {
  [key :string] : number,
}
let 철수 :MyObject = { 
  age : 50,
  weight : 100,
}

object안에 어떤 속성이 들어갈지 아직 모른다면

그냥 전부 싸잡아서 타입지정도 가능합니다. 

index signature라고 합니다. 

 

 

 

 

 

 

class Person {
  name;
  constructor(name :string){
    this.name = name;
  }
}

class도 타입설정이 가능합니다.

다만 중괄호 내에 미리 name 이렇게 변수를 만들어놔야 constructor 안에서 this.name 이렇게 사용가능합니다.

 

---

변수 만들 때 타입정하기 (타입 실드 씌우기)

 

타입스크립트는 변수만들 때 변수의 타입을 지정가능합니다.

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으로 변합니다.

그래서 간단한 변수들은 타입을 생략하도록 합시다.타입지정하는게 보기좋으시다면 그렇게 하도록 합시다. 

 

 

ex)

 

let Myname = 'KSW'

let Myage = 28

let from = 'Seoul'

let fav = {song: 'rain', singer: 'paul kim'}

type test = {

    member : string[],

    days : number,

    started: boolean

}

let project : test = {

    member: ['kim', 'park'],

    days: 30,

    started: true

}

---

Union type

가장 좋은 Union type 사용

 

 

"이 변수엔 string 또는 number가 들어올 수 있습니다~" 라고 타입정의를 하고싶으면 | 연산자를 씁시다. 

OR 연산자 같은 느낌인데 이런 타입을 전문용어로 Union type 이라고 부릅니다. 

 

let 이름: string | number = 'kim';
let 나이: (string | number) = 100;

심심하면 괄호쳐도 됩니다. 

이러면 name, age 변수엔 string 또는 number만 들어올 수 있습니다. 

그리고 할당하는 순간 타입은 string 또는 number 중 하나로 변합니다.

 

+

let member: (string | number)[] = [1, '2', 3]

let member1: string | number[] = [1, '2', 3] // error

let member2: string[] | number [] = ['1', '2'] // member === member2

let obj: {a: string | number} = {a: 123}

 

아니면 any 타입이라는 것도 있습니다

 

아무 자료나 집어넣을 수 있는 타입입니다. 

쉽게 비유하면 실드해제입니다.

 

let 이름: any = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];

 

any 타입은 실드 해제 문법이기 때문에 갑자기 타입을 마구 바꿔도 에러가 나지 않습니다.

any 타입은 좋다고 막쓰면 안되는데

그럼 타입관련 버그가 생길 경우 왜 그런지 추적하기가 어려우니까요. 

타입 실드를 안씌우면 타입스크립트를 쓸 이유가 없습니다. 

그래서 비상시 쓰는 변수 타입체크 해제기능 이런 용도로 씁시다.

 

any 보다는 unknown 타입이 나은듯 

 

요즘 타입스크립트는 unknown 타입을 사용합니다. 

any와 똑같이 모든 타입을 집어넣을 수 있습니다. 

 

let 이름: unknown = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];

이래도 에러가 나지 않습니다. 

아직 어떤 타입이 들어올지 모를 경우, 다양한 타입을 집어넣어야할 경우 이걸 사용해보시길 바랍니다. 

중요한 특징은

1. unknown 타입엔 모든 자료 다 집어넣을 수 있음

2. 자료집어넣어도 타입은 그대로 unknown입니다. 

 

let 이름: unknown;
이름[0];
이름 - 1;
이름.data;

이래도 에러가 납니다. 

(any는 안그럼)

 

 

왜냐면 타입스크립트는 정확하고 확실한걸 좋아합니다.

확실하지않은 타입에 뺄셈해주고 그런거 싫어합니다. 

숫자가 아닌걸 뺄셈할 수는 없으니까요. 

타입스크립트에선 뺄셈은 number 류의 타입만 할 수 있고 

.name 이런건 object 류의 타입만 할 수 있다라고 미리 정의되어있습니다. 

 

 

 

그래서 결론은 아직 뭘 집어넣을지 모르겠는데 약간의 안정성을 도모하고 싶으면 unknown 타입을 써봅시다. 

근데 실은 코드짜다가 any, unknown 부여할 경우는 별로 없습니다. 

 

Q1. 이 코드는 왜 에러가 나는 것이죠?

let 나이: string|number;
나이 + 1;

분명 자바스크립트에선 문자에도 +1 가능하고 숫자에도 +1 가능합니다.

근데 저건 에러가 납니다.

 

Q2. 이 코드도 왜 에러가 나는 것이죠?

let 나이: unknown = 1;
나이 + 1;

분명히 나이라는 변수는 1인데 +1 안해줍니다.

오늘 강의에서 제가 잘 명심하라는거 떠올리면 왜 그런지 답변가능할 듯

 

둘다 같은 이유입니다

 

타입스크립트는 언제나 확실한걸 좋아한다고 했습니다. 

지금 변경하려는 변수의 타입이 확실해야 연산을 수행해줍니다. 

그래서 -1은 확실하게 왼쪽에 있는게 number 타입일 때만 가능합니다.

unknown은 number타입이 아닙니다.

string|number 이것도 number 타입이 아닙니다. (union type은 새로운 타입을 하나 만든 겁니다)

+1도 마찬가지입니다. 

(참고) 그래서 unknown 타입인 변수를 조작하려면

내가 조작할 변수의 타입이 무엇인지 확실하게 체크하는 narrowing 또는 assertion 스킬을 사용해야합니다. 

그것이 타입스크립트의 근간이 되는 코딩방법이고

변수에 뭐가 들어있을지 애매한, 추측해야하는 상황이 나오는 시점에선 반드시 사용해야합니다. 

 

+

let user: string = 'kim';

let age: undefined | number = undefined;

let married: boolean = false;

let cheolsoo: (string | number | undefined | boolean)[] = [user, age, married]

let school: {

    score : (number | boolean)[],

    teacher : string,

    friend : string | string[]

} = {

    score : [100, 97, 84],

    teacher : 'Phil',

    friend : 'John'

}

school.score[4] = false;

school.friend = ['Lee', school.teacher]

---

함수에 타입지정하려면 2곳 가능

 

그래서 함수는 총 두 군데 타입지정이 가능합니다.

1. 함수로 들어오는 자료 (파라미터)

2. 함수에서 나가는 자료 (return)

 

 

function 내함수(x :number) :number { 
  return x * 2 
} 

1. 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 적으면 됩니다.

2. 함수가 실행된 후 남는 값 (return 우측에 있는 값) 타입지정하고 싶으면 함수명() 우측에 적으면 됩니다.

 

함수에 멋있게 타입 실드를 장착했기 때문에

이제 파라미터와 리턴값이 이상해지면 자동으로 혼내줍니다. 

 

- 파라미터에 타입을 지정하면 필수 파라미터가 됩니다. 

 

 

 

 

 

 

 

 

함수는 void 타입이 있음

 

이런거 설명할 때 개발자들이 꼭 하는 말이 있습니다.

"Void 타입은 자바같은 프로그래밍 언어를 접한분들은 이해가 쉬울겁니다"

프로그래밍 책 보면 꼭 있는 말인데 그런 말 약간 극혐임 

그런 언어 안해봤으니까 애초에 강의 듣고 있는거 아닐까요 

 

 

 

함수는 특이하게도 void라는 타입을 사용가능합니다.

'아무것도 없이 공허함'을 뜻하는 타입인데  

return할 자료가 없는 함수의 타입으로 사용가능합니다.

 

 

function 내함수(x :number) :void { 
  return x * 2 //여기서 에러남 
} 

그럼 이제 이 함수에서 뭔가를 return하려고할 때 에러를 냅니다.

함수에 return 방지장치를 주고 싶을 때 void 타입을 활용하시면 되겠습니다. 

 

 

 

 

 

 

 

파라미터가 옵션일 경우

 

함수에 파라미터자리를 만들어놨지만 가끔 파라미터 없이 쓸 때도 있습니다. 

그럴 경우 타입스크립트에선 미리 "이 파라미터는 옵션임" 이렇게 정의를 해주셔야 에러가 나지 않습니다.

 

function 내함수(x? :number) { 

}
내함수(); //가능
내함수(2); //가능

파라미터 우측에 그냥 물음표치면 됩니다. 그럼 앞으로 내함수()를 사용할 때 파라미터없이도 쓸 수 있습니다.

근데 물음표는 실은 x : number | undefined 이거랑 똑같은 의미입니다 (중요)

파라미터가 정의가 안되면 자동으로 undefined가 되니까 그걸 반영한거라고 볼 수도 있겠습니다.