typescript

#배경

javascript는 클라이언트 측 언어로 도입되었는대 node.js개발로 인해서 서버측 기술로도 활용하기 위해 만들었음
그러나 소스코드가 더 복잡해 지고 유지관리 및 재사용이 힘들며 type검사 및 컴파일 시 오류 검사의 기능을
수용하지 못하는 단점이 발생하여 typescript가 제시 됨

#typescript란?
-자바스크립트에 타입을 부여한 언어(자바스크립트의 확장된 언어)
-타입스크립트를 브라우저에서 실행하기 위해 자바스크립트로 컴파일(파일변환) 해주어야 함

#type system
-개발환경에서 에러를 잡을 수 있음(오직 개발환경에서만 활성화 됨)
-type annotations를 사용해서 코드를 분석할 수 있음(변수나 상수의 생성 시 데이터 타입을 지정해주는 것)
 *변수명, 함수명, 객체 속성명 뒤에 : type 을 써서 데이터 타입을 지정
 *JavaScript의 primitive type(number, string, boolean)을 사용 가능

예)
// 변수에 타입 지정하기
let age: number = 32; // number variable
let name: string = "John";// string variable
let isUpdated: boolean = true;// Boolean variable

// 함수 파라미터에 타입 지정하기
function display(id:number, name:string)
{
    console.log(`Id = ${id}, Name = ${name}`);
}

// 객체 속성에 타입 지정하기
let employee : { 
    id: number; 
    name: string; 
}; 

employee = { 
  id: 100, 
  name : "John"
}
출처:https://www.tutorialsteacher.com/typescript/type-annotation
-타입 스크립트와 성능 향상과는 관계가 없음

#typescript를 사용하는 이유

-자바스크립트 코드를 단순화 하여 더 쉽게 읽고 디버그 할 수 있음
-코드 유형 검사를 통해 자바스크립트를 작성 할 때 버그를 피하는대 도움이 될 수 있음
-타입스크립트는 오픈소스
-타입스크립트를 쓰면 코드를 더 쉽게 읽고 이해 할 수 있음
-타입스크립트를 쓰면 자바스크립트보다 크게 개선 할 수 있음
-ES6의 모든 이점과 더 많은 생산성을 제공함

  
  #타입스크립트
  타입이란 그 value가 가지고 있는 프로퍼티나 함수를 추론할 수 있는 방법
  
  예) apple
  string 문자열
  이것은 value인대 문자열이 가지는 프로퍼티,메소드를 가지고 있는 value 이다
  
  let text:string;
  
  //프로퍼티 
  text.length //문자열의 속성인 문자열의 길이를 제공, text자체는 아무것도 반환하지않음
  
   
  //메소드
  text.toLowerCase()는 문자열을 소문자로 변환, 문자열에 작업을 수행한 다음 반환함

  
  #type

  ***자바스크립트에서 제공하는 타입***
  1)Primitive types
  string,number,boolean,null,undefined,symbol,void
  
  null = null이라는 값 하나를 가짐
  undefined = 초기화 되지 않은 변수의 기본값
  symbol = 고유한 상수 값
  
  2)Object types
  function,array,classes,object
  
  const getNumber = (i:number):void => {
   console.log(i);
  }
  const arr:string[] = ['a','b','c'];
  
  class Music{}
  let music:Music = new Music();
  
  let point:{x:number;y:number} = {x:20,y:10}
  
 

반응형

  ***타입스크립트에서 제공하는 타입***

-Tuple (터플) 

: 각 인덱스에 대해 미리 정의된 길이와 유형 이 있는 유형이 지정된 배열 / 순서가 중요함

let book__name_price:[string, number] = ['카밍 시그널', 13320];

// [오류]
// [ts] '[number, string]' 형식은 '[string, number]' 형식에 할당할 수 없습니다.
//      'number' 형식은 'string' 형식에 할당할 수 없습니다.
// let book__name_price: [string, number]
book__name_price = [13320, '카밍 시그널'];

// [오류]
// [ts] 'false' 형식의 인수는 'string | number' 형식의 매개 변수에 할당될 수 없습니다.

출처 : https://yamoo9.gitbook.io/typescript/types/tuple

book__name_price.push(false);

-Enum (이넘)

 : enumerated type(열거형),집합을 명명하고 이를 사용하도록 만듬
기본적으로 열거된 PrintMedia의 별도의 값이 없을경우 숫자형으로 시작함(0부터 시작)
  
  enum PrintMedia{
   News,  //0
   book,  //1
   letter //2
  }

 //이렇게 사용가능
 let mediaType:number = PrintMedia.book //1임
  
+할당할경우
 enum PrintMedia{
   News = 1,  
   book = 2,  
   letter //3 , 이전값 +1이 됨
  }

 let type:string = PrintMedia[3] //letter, 숫자값을 통해 값으로 도달할수 있음 
enum을 쓰면 집합을 만들때도 사용할 수 있음
enum자체가 객체이므로 Object.keys(PrintMedia),Object.values(PrintMedia) 로도 사용가능

+enum과 객체의 차이점
객체는 코드내에서 새로운 속성을 추가할수 있지만 enum은 선언 후 변경할 수 없음
객체의 속성값은 js가 허용하는 모든 타입이 올수 있지만 enum은 string,number만 허용됨

 -any: 잘 모르는 타입이거나 컴파일시 검사를 통과하길 원할때 , 이타입은 최대한 최대한 쓰지않는게 좋음, 객체에 여러형태의 값이 있을때 쓰임
 -void : 데이터가 없는 경우 void 사용, 주로 함수의 리턴이 없을때 사용(undefinded가 찍힘),any와 반대의 의미를 가짐
 -never : 절대 발생하지 않을 값, 함수의 리턴값에 사용됨(항상 오류를 리턴하거나 리턴값을 절대로 내보내지 않음을 의미/ 무한루프)
 
+never과 void 차이점 : void유형은 null이나 undefined값을 가질수 있지만 never은 어떠한 값도 가질수 없음

 -Union (유니온)

 : 변수또는 함수 매개변수에 대해 둘이상의 데이터 유형을 사용하는것 let code :(string|number);

#type annotation(뜻은 주석, : 를 사용하여 타입을 명시주는것), type inference(타입 유형 추론, 타입스크립트가 알아서 타입을 추론하는것)
-타입 어노테이션은 변수나 상수의 생성 시 데이터 타입을 지정해주는 것, 추론은 지정 안해주는 것.
-타입 추론 사용시에는 꼭 초깃값 지정해주기! 

const rate:number = 5 //number 타입지정
const rate = 5 // 변수선언과 동시에 초기화 할 경우 타입을 알아서 추론한다


*타입을 추론하지 못해서 타입 annotation을 꼭 해줘야 하는경우
1)any 타입을 리턴하는 경우 : JSON.parse(json) = 제이슨을 객체로 바꿔줄때 return이 any로 되므로 타입을 직접 지정 해주어야함
2)변수에 대입될 값이 일정치 못할 경우: 여러 타입이 지정되어야 할때에는 | (or)을 사용하여 여러타입을 어노테이션 해준다.

#type assetion (타입표명 = 타입 어설션)
-TypeScript 컴파일러가 타입을 실제 런타임에 존재할 변수의 타입과 다르게 추론하거나 너무 보수적으로 추론하는 경우에 
프로그래머가 수동으로 컴파일러한테 특정 변수에 대해 타입을 지시하는것

# <Type> vs as Type
-리액트 사용시 jsx문법으로 인하여 <Type>보다는 as Type를 추천한다.

#출처 및 도움

https://www.typescriptlang.org/

https://seolhee2750.tistory.com/19

https://hyunseob.github.io/2017/12/12/typescript-type-inteference-and-type-assertion/

 

#함수형 코드 정리

Bad:

function createMenu(title: string, body: string, buttonText: string, cancellable: boolean) {
  // ...
}

createMenu('Foo', 'Bar', 'Baz', true);

Good:

function createMenu(options: { title: string, body: string, buttonText: string, cancellable: boolean }) {
  // ...
}

createMenu({
  title: 'Foo',
  body: 'Bar',
  buttonText: 'Baz',
  cancellable: true
});

타입 앨리어스를 사용해서 가독성을 더 높일 수 있습니다:

type MenuOptions = { title: string, body: string, buttonText: string, cancellable: boolean };

function createMenu(options: MenuOptions) {
  // ...
}

createMenu({
  title: 'Foo',
  body: 'Bar',
  buttonText: 'Baz',
  cancellable: true
});

 

도움받은곳 : https://738.github.io/clean-code-typescript/