타입스크립트 머리박기 1일차 복기

 

1. 타입스크립트를 쓰는이유

 

기존 자바스크립트는 타입에 관대하다.

 

10-"3"을 해도, parseInt([1,2,3]) 이런 이상한걸 넣어도 아무런 제지가 없다.

 

=> 타입스크립트는 이런걸 모두 잡아낸다.

 

근데 굳이?

 

작은 프로젝트들은 코드량이 그렇게 많지 않다보니  상관없지만, 협업프로젝트에서 코드량이 천줄, 만줄단위의 큰 프로젝트에서는 타입에러가 문제되는 경우가 있다.

남이 쓴 코드에서 에러가 발생했는데 알수없는 타입에러가 뜬다면 골치아프기 때문이다..

 

그리고 에러가 나도 자바스크립트보다 더 구체적으로 에러원인을 알려준다.

 

---

 

2. 타입스크립트 기본 룰

 

1. 변수 옆에 :를 붙이고 타입을 지정해준다.

let 타입1 :string = "문자"
let 타입2 :number = "3"

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

 

let 타입3 :string[] = ['글자', '문자']
let 타입4 :{숫자: number} = {숫자: 32}

배열과 객체는 이렇게 지정한다.

 

2. 여러가지 타입이 될 수있다면?  Union Type

let 타입5 :string | number = "문장이게숫자게3"

| 기호를 사용하여 타입후보들을 지정할수있다.

 

3. 타입을 변수처럼 저장해둘수 있다.

type nameType = string | number
let 이름 :nameType = "김도영"

 

4. 나만의 타입을 만들수있다. literal type

type 방구타입 = "부락방구" | "쓱방구";
let 방구 :방구타입 = "부락방구";

string, number같은 기존의 타입말고 원하는 글자나 숫자를 적어두면

저 값들만 적을수있게된다.

 

5. 함수도 지정가능

function 함수타입 (x :number) :number {
return x*2
};

매개변수 값과 return 값도 지정해둘수 있다.

 

6. Class도 지정가능

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

중괄호 안에 미리 name;같이 변수를 만들어 놔야한다.

 

---

 

기본 예제풀이

 

아래 예제를 타입스크립트로 바꿔보자

1. 

let project = {
  name : ['kim', 'park'],
  age : 30,
  human : true,
}

 

풀이:

let project :{
  name : string[],
  age : number,
  human : boolean,
} = {
  name : ['kim', 'park'],
  age : 30,
  human : true,
}

 

 

2. 에러가 안나게 고쳐보자

let 어레이: number[] = [1,'2',3]
let 오브젝트: {data : number} = { data : '123' }

 

풀이

var 어레이: number | string[] = [1,'2',3]
var 오브젝트: {data : number | string} = { data : '123' }

 

---

any와 unknown

 

1. any

 

any는 원카드에서 컬러조커같은 느낌이다.

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

타입을 any라고 지정하면 아무에러가 나지않는다. 근데 이러면 타입스크립트를 쓸 이유가없죠잉?

진짜 비상용으로 쓰자 ex) 다른사람이 짠 코든데 어디서 타입에러가 나는지 모를때, 변수타입체크 해제기능으로 사용한다.

 

 

2. unknown

unknown은 흑백조커 느낌이다.  any처럼 모든타입을 쓸 수는있지만, 그래도 조건은 붙는다.

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

 

 

let 이름: unknown;

let 변수1: string = 이름;
let 변수2: boolean = 이름;
let 변수3: number = 이름;

적어도 이럴땐 에러가 뜬다. any는 에러안뜸..

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

계산을하더라도 같은 타입인 경우에만 에러없이 발동된다. 이름은 unknown이기 때문에 다른타입들하고 어울리질 못함.

 

 

---

함수에 타입 지정하기

 

기본형

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

 

파라미터 값과 return값 모두 타입을 지정해줘야한다.

 

return값이 필요없는 경우는 void

function 함수타입(x :number) :void{}

 

파라미터를 안써도 될수도있는 경우는 ?

function 함수타입(x? :number){

}
함수타입();   //가능
함수타입(3);  //가능

그냥 파라미터 오른쪽에 ?치면 됨

 

사실상 number | undefined 되는거임

그리고 함수도

function 자릿수세기(x :number | string){ 
  return x + 1 
} 

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

이런건 안됨.  union type이랑 undefined이기 때문에.. 타입스크립트는 딱 끼리끼리만 됨. 숫자는 숫자끼리만!!

 

---

함수 예제문제

 

 결혼 가능 확률을 알려주는 함수를 만들어보자.

1. 함수의 파라미터로 월소득(만원단위), 집보유여부(true/false), 매력점수 ('상' or '중' or '하') 를 입력할 수 있어야합니다. 

2. 월소득은 만원 당 1점, 집보유시 500점 & 미보유시 0점, 매력점수는 '상'일 때만 100점으로 계산합니다. 

3. 총 점수가 600점 이상일 경우 "결혼가능"을 return 해줘야합니다. 그 외엔 아무것도 return하지 않습니다.

 

 

 

풀이

function (money :number, house :boolean, charm :string) :string|void{
let score :number = 0;
score += money;
if(house === true){
score += 500;
}
if(charm === "상"){
score += 100;
}
if(score >= 600){
return "결혼가능"
}
}

 

---

 

Type Narrowing  ,  Type Assertion

 

function 자릿수세기(x :number | string){ 
  return x + 1 
}

Operator '+' cannot be applied to types 'string | number' and 'number'

 

타입스크립트는 같은 타입이 아니라면 이런 수식계산이 안된다.

이럴때 계산이 되게하는 방법 2가지가 있다.

 

1. Type Narrowing

2. Type Assertion

 

 

1. Type Narrowing을 araboja

 

if문으로 타입을 좁혀간다.

function 자릿수세기(x :number | string){
  if (typeof x === 'number') {
    return x + 1
  } 
  else if (typeof x === 'string') {
    return x + 1
  }
  else {
    return 0
  }
}

 

+ if문을 쓸때 마지막에 else {} 꼭 써줘야한다. 아니면 또 에러남

 

else 쓰기 귀찮으면 tsconfig.js파일에   "noImplicitReturns": false 이걸 추가해주면 되는데..  그냥 귀찮아도 써주자.

 

 

2. Type Assert

 

이 변수의 타입을 ~~로 생각해주세요. 이렇게 해두면 타입스크립트 컴파일러가 정성을봐서  봐준다.

function 자릿수세기(x :number | string){ 
    return (x as number) + 1 
}
console.log( 자릿수세기(123) )

이 x를 숫자라고 생각해주세요.

근데 이렇게 쓰려면 변수에 무슨타입이 올지 본인이 알고있어야 쓸수있다.

만약 "123"을 넣는다면? 1231로 나올거다. 타입을 완전바꾸는게 아니라 눈속임이니까

 

 

근데 Assert로 떡칠하면 안된다. 임시로 타입스크립트 안쓰겠다는 뜻인데.. 

대부분의 경우는 Type Narrowing을 쓰자.

 

Assert를 쓰는 경우는

1. 왜 타입에러가 나는지 진짜 모르겠는 경우 임시용으로

2. 나는 무슨 값이 들어올지 아는데 컴파일러가 방해하는 경우

제외 Narrowing을 사용하자

 

---

 

Readonly 모드

const 과일 = "바나나"
과일 = "수박" // 에러

const는 변수의 값을 재할당 시키지 않는다.

const 과일 = {
name : "바나나"
}

과일.name = "수박"  // const지만 에러안남

근데 object 내부값은 const라도 못막는다..

const는 재할당만 막을뿐 속성값 변경은 못막기때문.. 

 

속성값 변경은 타입스크립트 readonly로 막을수있다.

type 리온 = {
readonly name :string,
}

let 과일 :리온 = {
name : "바나나"
}

과일.name = "수박"  // readonly라서 에러남

---

잡기술들

 

1. 물음표 연산자

type Square = {
  color? : string,
  width : number,
}

let 네모2 :Square = { 
  width : 100 
}

함수 말고도 평소에도 ?를 사용할수있다.

 

2. 타입 합치기 , type extend

type Name = string;
type Age = number;
type NewOne = Name | Age;

type PositionX = { x: number };
type PositionY = { y: number };
type XandY = PositionX & PositionY
let 좌표 :XandY = { x : 1, y : 2 }

 

Type alias & { name : string }

이렇게도 됨

 

 

3. 타입 재정의 불가능

type Name = string;
type Name = number;

불가능!

 

---

예제

 

{ name : '도영', phone : 1357, email : 'abc21@naver.com' }

{adult : true}

object안에 있는 이름, 전화번호, 이메일 타입을 검사하는 type alias 만들어 보시오

그리고 미성년자 여부 속성따지기 type aliad 만든다음에 

type extend해서 만들어보시오

 

type User = { name :string, phone :number, email :string}
type Audlt = {adult :boolean}

type plus = User&Adult;

let 회원정보 :plus = {
name : "도영",
adult : true,
phone : "1357",
email : "abc@naver.com"
}

---

as const

 

let 자료 = {
  name : 'kim'
}

function 내함수(a : 'kim') {

}
내함수(자료.name)

이러면 에러가 난다.

함수는 'kim' 타입만 쓸수있다고 했는데, 자료.name 은 string타입이지 'kim'타입이 아니기때문.

 

해결방법

1. 애초에 타입 잘 지정하기

2. Assertion 사용하기

3. as const 사용하기

 

해결하기

var 자료 = {
  name : 'kim'
} as const;

function 내함수(a : 'kim') {

}
내함수(자료.name)

as const 효과

1. 타입을 object의 value로 바꿔준다. (타입을 'kim'으로)

2. object 안의 모든 속성을 readonly로 바꿔준다.

 

---

함수도 타입을 변수처럼 저장가능

 

type NumOut = (x : number, y : number ) => number ;

let ABC :NumOut = function(x,y){
  return x + y
}