Type Script (코딩애플)

• JS 는 dynamic typing 가능
• TS 는 JS 랑 문법은 같은데 type 을 지정해주는 것 ( 코드 에디터 부가기능 역할로 봐도 될 듯 )

• 5 - '3';
  //원래는 숫자 - 숫자만 가능하지만 js가 알아서 숫자로 바꿔줌
  //이런 장점이 프로젝트가 커지면 단점이 됨

   
• TS 사용하는 이유
  • 1) TS 는 타입 엄격히 검사해줌.
  • 2) 에러메세지 퀄리티가 좋음.
• ts 파일을 js 로 변환해야 사용가능
  • tsc -w 켜두면 자동으로 js파일 생기고,
  • ts 파일 업데이트 하고 저장할때 마다 자동으로 js 파일 업데이트 됨.
  • 파일 사용시에는 당연히 js파일 갖다써라.
• tsconfig.json : ts->js 변환 시 옵션 설정 해줄 수 있음

 

• JS 문법
  • const 변수 
    • 등호로 재할당만 막는 역할을 한다.
    • const로 담은 object 수정은 자유롭게 가능하다.
    • typescript 쓰면 막을 수 있다 : readonly 사용. 

      • // js 사용시
        const 출생지역 = { region : "seoul" }
        
        출생지역.region = "busan"; // 가능
        
        // ts 사용시
        type GirlFriend = { 
          readonly name : string	// 실수로 수정하면 에러내줌(근데 실제 변환된 js 파일은 에러 없음)
        }
        
        const 여친 :GirlFriend = {
          name : '엠버'
        }

          
  • 1) 간단한 변수 타입 지정가능 : string, number, boolean, null, undefined...
    • 근데 타입지정 원래 자동으로 됨. (타입지정 문법 생략가능 - 변수생성 시 타입스크립트가 타입을 자동으로 부여해줌.) 
    • 같은 이름의 type 변수 재정의 불가능함.
    • 간단한 수학연산도 타입 맞아야함.

      • let 나이 :string | number;
        나이 + 1; //	에러
        //	string + 1 가능
        //	number + 1 가능
        //	sting | number + 1 안돼 : (string | number) 라는 새로운 타입이 생긴 것과 같으므로.
        
        let 변수 :unknown = 1;
        변수 + 1; //	에러
        //	아무리 변수에 숫자가 할당되어 있어도 unknown 타입이므로.

    • let 이름 :string = 'kim';
      name = 123; // 바로 에러남
      
      let 이름 :string[] = ['kim', 'park']
      //이 변수엔 string 이 담긴 array만 들어올 수 있다.
      
      let 이름 : { name? : string } = { name : 'kim' };
      //object 타입 지정
      //name? 은 name 속성은 옵션이라는 뜻 ( 들어올수도 있고 안들어올수도 있다 )
      
      let 이름 :string | number = 'kim';
      let 회원들 :(string | number)[] = [ 2, '3', 4];
      //다양한 타입이 들어올 수 있게 하려면 Union Type
      
      let 이름 :any;
      이름 = 123;
      이름 = [];
      //any 타입은 모든 자료형 허용해줌 - 일반 JS 변수로 만들고싶을 때 사용
      
      let 이름 :unknown;
      이름 = 123;
      이름 = [];
      //unknown 타입은 any랑 비슷하게 모든 자료형을 허용해줌. but any보다 안전한 이유는 
      let 변수1 :string = 이름; //any로 하면 에러안나는데 unknown으로 하면 에러남.

    • 타입은 변수에 담아 쓸 수 있음 : Type alias
      • 타입이 너무 길고 복잡할 때 사용한다. 
      • 일반 변수와 차별화 두기 위해서 첫글자 대문자 사용한다.

      • type Name = string | number
        let 이름 :Name = 123;
        
        // object type alias
        type Animal = { name : string, age : number };
        let 동물 :Animal = { name : 'kim', age : 20 };

      • type 변수 union type으로 합치기 가능 (extend 한다)

        • type Name = string;
          type Age = number;
          type Person = Name | Age;

      • & 연산자로 object type 합치기

        • type PositionX = { x : number };
          type PositionY = { y : number };
          
          type NewType = PositionX & PositionY	
          //  NewType = { x : number, y : number };

    • array에 쓸 수 있는 tuple type

      • type Member = [number, boolean];
        let john :Member = [ 123, true ]; 
        //무조건 첫째는 number, 둘째는 boolean

    • object에 타입지정해야 할 속성이 너무 많으면?

      • type Member = {
          [key : string] : string,
        }
        // 글자로 된 모든 object 속성의 타입은 string

      • //이런 식으로도 할 수 있음.
        let project :{
          member : string[],
          days : number,
          started : boolean,
        } = {
          member : ['kim', 'park'],
          days : 30,
          started : true,
        }

  • 2) 함수 타입지정 : 파라미터, 리턴값 타입 지정가능
    • void 타입 활용가능
    • 타입지정된 파라미터는 무조건 함수 호출할 때 입력해주어야함. 
    • 파라미터가 옵션일 경우 ? 사용
      • 변수? :number 는 변수 :number | undefined 과 같음.

    • function 함수(x? :number) :number {	// 타입 지정 안해주면 any 타입 자동할당
        return x*2;
      }
      
      //인자, return 값 모두 타입 지정해줄 수 있음.

  • 3) class 타입지정
    • 타입스크립트 constructor() 는 필드값에 어쩌구가 있어야 this.어쩌구 가능 

    • class User {
        name :string;
        constructor(name :string){
          this.name = name;
        }
        함수(a :string){
          console.log('안녕' + a);
        }
      }
      
      let 사람1 = new Person();
      사람1.함수('안녕');

• Narrowing : 변수의 타입이 하나로 정확하게 정해지지 않았을 때 사용
  • Narrowing 으로 판정해주는 문법들 : 그냥 현재 변수의 타입이 뭔지 특정지을 수 있기만 하면 다 인정해줌. 
  • 대표적인 방법은 typeof 연산자 사용
    • typeof(x) 하면 x의 타입을 return 해줌. 

    • function 내함수(x :number|string){
        let array :number[] = [];
        if (typeof(x) == 'number'){	//	if문 썼으면 끝까지 써야 안전하다.
          array[0] = x;
        } else {
          
        }
      }

      
      
      
  • 속성명 in 오브젝트자료
  • 인스턴스 instanceof 부모

 

• Assertion 문법 ( 타입 덮어쓰기 )

  • function 내함수(x :number|string){
      let array :number[] = [];
      array[0] = x as number;
    }
    
    내함수('123');	//  1231출력됨

  • as 문법의 용도
    • 1) Narrowing 할때 ( 타입을 변경할 때 쓰는게 아니라 여러 타입이 가능할 때 하나로 특정해야할 경우 사용 )
    • 2) 무슨 타입이 들어올지 100% 확실할 때 ( 그래서 굳이 쓸 이유가 없음 )
    • 실제로 타입을 바꿔주는 건 아님.
    • 평소에는 왠만하면 쓰지마라 

 

• Literal type 
  • 변수에 뭐가 들어올지 더 엄격하게 관리 가능
  • 자동완성 기능 사용가능

    • type Name = 'kim';
      let 이름 :Name = 'park'; 	//에러남
      
      function 함수(a :'hello) :1 | 0{
        return 1;
      }

  • Literal type 문제점

    • var 자료 = {
       name : 'kim';
      }
      
      function 내함수(a :'kim'){
      
      }
      
      내함수(자료.name);	// 에러남. 자료.name은 kim 인데 왜 에러가 날까?

    • (a :'kim') 은 kim 이라는 자료만 들어올 수 있다는 게 아니라 'kim' 이라는 타입만 들어 올 수 있다는 뜻이다.
    • 솔루션
      • 1) object 선언할때 타입 더 정확하게 지정하던지
      • 2) as 문법으로 타입 속이던지
      • 3) as const 라는 문법 사용
  • as const : 이 object는 literal type 지정 알아서 해줘
    • 효과 1) object value값을 그대로 타입으로 지정해준다.
    • 효과 2) object 속성들에 모두 readonly를 붙여준다.
    • object 자료를 완전히 잠가놓고 싶을때.

    • var 자료 = {
       name : 'kim';
      } as const
      
      function 내함수(a :'kim'){
      
      }
      
      내함수(자료.name);

 

• type alias 에 함수타입 저장해서 쓰는 법

• type 함수타입 = (a :string) => number;
  
  let 함수 :함수타입 = function (a){
    return 10;
  }	// 함수표현식 써야 된다.
  
  function 함수(){
  
  }  // 함수선언식임

• object 안에 함수 만들 수 있다

  • let 회원정보 = {
      name : 'kim',
       plusOne (x){
          return x + 1
      }
      changeName : () => {
        console.log('안녕')
      }
    }
    
    회원정보.plusOne();

 

• 타입스크립트로 HTML 변경과 조작할 때 주의할 점

  • //index.html
    <h4 id="title>안녕하세요<h4>
    <a href="naver.com" class="link">링크</a>
    <button id="button">버튼</button>
    
    //index.ts (h4안에 있는 HTML 바꾸기)
    let 제목 = document.querySelector('#title');
    if (제목 instanceof Element){	// narrowing을 잘 해야함
      제목.innerHTML = '반가워요'
    }
    
    (a 안에있는 href 링크 바꾸기)
    let 링크 = document.querySelector('.link');
    if (링크 instanceof HTMLAnchorElement){
      링크.href = 'http://kakao.com'
    }

 

• 타입스크립트에서 eventListener 부착하는 법

  • let button = document.querySelector('#button');
    버튼?addEventListener('click', function(){	//?의 역할 : 버튼에 addEventListner 가능하면 해주시고 아니면 undefined 뱉어라.
      
    })​

 

 

• JS 문법
  • 객체지향 class 문법
    • 비슷한 object 많이 만들일 있으면 class 만들어써라

    • function 기계(구멍1, 구멍2){
        this.q = 구멍1;
        this.w = 구멍2;
      }
      
      var nunu = new 기계('consume', 'snowball');
      var garen = new 기계('strike', 'courage);
      
      
      
      //2016년 이후 문법
      class Hero {
        constructor(구멍1, 구멍2){
          this.q = 구멍1;
          this.w = 구멍2;
        }
      }
      
      new Hero('a', 'b');

  • protoType
    • protoType 써도 자식 object에게 데이터 물려줄 수 있다.
    • protoType 은 유전자다.

    • function 기계(){
        this.q = 'consume';
        this.w = 'snowball';	//	여기다가 추가하면 자식들이 직접 가짐
      }
      
      기계.prototype.name = 'kim';	// prototype에 뭔가 추가하면 자식들이 사용가능
      //여기다가 추가하는 건 부모만 가짐.
      
      var nunu = new 기계();
      
      nunu.name; 	// nunu가 name을 가지고있지 않으면 nunu 부모 유전자 뒤짐(거기 name이 있으면 그거 가져옴)

    • object 에서 자료를 뽑을 때 일어나는 일
      
      • 1) 직접 자료를 가지고 있으면 그거 출력
      • 2) 없으면 부모유전자까지 뒤짐.
      • 3) 없으면 부모의 부모 유전자까지 뒤짐. (엄마 아빠 없을때까지)