[TypeScript] TypeScript란?(feat.기초 문법)

만분의 일·2022년 8월 19일
0

TypeScript

목록 보기
1/7
post-thumbnail

TypeScript란?

= JavaScript + Type문법

“JavaScript Superset” js 대용품 같은 언어다.

js 문법을 그대로 이용 가능한데, Type부분을 업그레이드한 js 업그레이드 버전이라고 생각하면 된다.


TypeScript를 사용하는 이유

  • js는 Dynamic Typing이 가능하다. 편리하지만, 프로젝트가 커질 수록 자유도& 유연성이 높으면 적이 된다.
    • 자유도가 높아지면 예측 불가능성도 높아진다.
    • 버그가 났을 때 어디서, 왜 났는지 찾기 더 힘들어진다.
      (의도와 다른 자료형을 변수에 집어 넣으려고 하는데도 잘 처리해 주니까)

	5 - '3' // 원래는 숫자 - 숫자만 가능하지만, js가 알아서 숫자로 바꿔줌 
js는 ‘3’이라는 문자를 숫자로 바꿔서 계산해주지만, typeScript는 엄격히 이를 검사해준다.
    
  • TypeScript는 에러 메세지가 정확하다.
    • 엄격한 Type check 덕분에 사용 가능한 부가 기능이다.
      (TypeScript는 코드 edit 부가 기능 역할로 봐도 될 듯?)

TypeScript를 공부하려고 youtube에서 search했다가 비유가 웃기고 적절해서 캡처한 캡처본🤣


간단한 문법 정리

  • 변수의 오른 쪽에 type을 지정해 변수의 type을 지정할 수 있다.

    지정된 type과 다른 type의 값이 들어오면 아래 이미지와 같은 error가 발생한다.

    변수 name의 type을 문자로 지정했기 때문에 name에는 무조건 문자만 들어올 수 있다.

💡Tip
Typescript는 기본적으로 export가 없는 파일을 legacy 취급을해서 error 표시를 하기 때문에
export{}로 아무것도 가져오지 않고 파일을 모듈로 만들어서 에러를 해결하였다.

그리고 브라우저는 js파일만 읽을 수 있기 때문에 ts파일을 js파일로 변환해야 사용 가능하다.
터미널에 tsc -w 입력하면 자동변환 됨


  • array의 type을 지정할 수 있다. 마찬가지로 array에는 문자형 type만 들어올 수 있다.
let name: string[] = ["lee", "hyejin"];

export {};

💡Tip
위와 같이 :를 이용하여 js 코드에 Type을 정의하는 방식을 “타입 표기(Type Annotation)”이라고 한다.


  • object의 type을 지정할 수 있다. 변수 name의 객체에는 문자형 type만 들어올 수 있다.
let name: { name: string } = { name: "kim" };
export {};

  • type이 불확실할 때 ?를 붙여 type의 활용도를 높일 수 있다. name이라는 속성이 들어올 수도 안들어올 수도 있다.
let name: { name?: string } = { name: "kim" };
export {};

  • Union type: 다양한 type을 사용할 수 있게 하려면 “|” 이라는 Union type을 사용하면 된다 변수 name의 type이 string, number로 둘 다 될 수 있다.
let name: string | number = 123;
export {};

  • Type Alias: 타입 별칭 특정 type이나 interface를 참조할 수 있는 타입 변수를 의미한다.
    // string 타입을 사용할 때
    const name: string = 'capt';
    
    // 타입 별칭을 사용할 때 
    type  MyName = string;
    const name: MyName = 'capt'

  • 함수에도 Type 지정이 가능하다. parameter에서 type 지정이 가능하다.

    아래의 함수는 파라미터로 number, return 값으로 number로 들어와야 error가 발생하지 않는 엄격한 함수다.

    첫번째 number는 parameter의 type. 2번째 number는 return의 type이다.

    function name (x :number) :number{
    	return x * 2
    }
    
    name('123') //error 발생한다.
    
    type Member = {
    	name:string
    }
    let john : Member = {name :123 } //error. 함수 john에는 문자형 값만 들어올 수 있다.

  • Tuple:

    튜플은 배열의 길이가 고정되고 각 요소의 Type이 지정되어 있는 배열 형식을 의미한다.

    만약 정의하지 않은 type, index로 접근할 경우 오류가 난다.

    type Member = [number, boolean] // 첫번째는 number, 두번째는 boolean
    let john:Member = [123,true]
    
    let arr: [string, number] = ['hi', 10];
    
    arr[1].concat('!'); // Error, 'number' does not have 'concat'
    arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.

  • object에 type을 지정해야 할 속성이 너무 많으면 type 키워드로 변수에 담아 사용가능합니다.
    특정 속성이 선택사항이면 물음표를 기입해서 사용하면 된다.

tyoe Member = {   //type 지정해야할 속성이 너무 많으면, 이런식으로 객체의 type을 지정하는 것이 아니라
	name : string,
	age : string,
}

type Member = {
	[key :string] : string,  // [key :string] 모든 object속성들이, :string 전부 string type을 가져야한다.
													// 즉 "글자로 된 모든 object속성의 type은 string"
}
let john : Member = {name :'kim', age: '28' }



type MyObject = {
  name? : string,	// 특정 속성이 선택사항이면 물음표를 기입해서 사용
  age : number
}
let nick :MyObject = { 
  name : 'kim',
  age : 50
}



What I learned?

✅ TypeScript를 사용 하는 이유

  • js는 자유도와 유연성 높다는 장점이 있지만, 이러한 장점으로 인해 프로젝트의 scale이 커질수록 예측 불가성 또한 높아지기 때문에 위험도가 높아진다. 이러한 단점 때문에 TypeScript를 사용한다.

✅ TypeScript의 문법

  • 변수, 함수, 객체, 배열의 오른쪽에 Type을 선언해서 Type을 지정할 수 있다.
  • Type을 미리 정하기 어려 울 때 Union Type (”|”)을 사용하면 다양한 type을 사용할 수 있다.
  • Type Alias를 사용해서 특정 Type을 참조할 수 있는 Type 변수를 만들 수 있다.
  • Tuple을 이용해서 배열의 각 요소의 Type을 지정할 수 있다.
  • : 을 사용해서 js코드의 Type을 정의하는 방식을 “타입 표기(Type Annotaion)”이라고 한다.

💭 동기님이랑 TypeScript에 대해서 얘기를 나누다가 하신 말씀. “TypeScript는 eslint 같아요”

이 말을 듣고 엄청 공감했다. eslint 같다니 어쩜 이렇게 찰떡 같은 비유를 하시는지…

역시 같이 공부하고 이해한 바에 대해서 얘기를 나누니까 더 이해가 잘 되고 지식이 2배가 되는 것 같아 즐거웠다.

profile
1/10000이 1이 될 때 까지

0개의 댓글