[Typescript] 기본 정리와 필수문법

🤔개요

타입스크립트를 쓰는 이유?

일반적인 자바스크립트는 다이나믹 타입을 지원하는 언어이다. 이래서 장점도 많을 수 있지만 1줄 2줄 3줄,,,, 늘어가는 코드의 줄에 따라 개발자의 영혼가출량은 비례한다. 그렇게 타입에 따른 오류가 많이 발생하곤 하는데, 이를 잡아줄 수 있는 언어로 등장한 것이 바로 타입 스크립트!

심지어 오탈자 지적도 해줌

 

🌐개발환경

vscode
node js 최신버전(언제나)

 

👣 타입스크립트를 사용하려면?

1. 일반 프로젝트일 경우
프로젝트 폴더에 

npm install -g typescript

타입스크립트를 짠 후에는 컴파일 필수! 컴파일이 된 js 파일을 참조해야 한다.

2. 리액트 프로젝트일 경우
2-1. 이미 진행중인 프로젝트

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

2-2. 새 프로젝트

npx create-react-app my-app --template typescript

3. 뷰 프로젝트일 경우

vue add typescript

vue 파일에서 타입스크립트를 쓸 때 아래와 같이 lang 옵션을 설정해줌

<script lang="ts">
  
</script>

 

👣 타입스크립트 기본 문법 정리

1. 변수를 만들 때 타입지정이 가능( 변수명 : 타입명 )

let 이름 :string = 'kim'
let 이름 :string[] = ['kim', 'park'] // array
let 나이 :{ age : number } = { age : number } // object
let 이름 :string | number = 'kim'; // 여러개의 형

타입으로 쓸 수 있는 것들은 string, number, boolean, bigint, null, undefined,[], {} 등이 있음. 타입을 지정해놓으면 타입이 다를 경우 에러메세지를 띄워줌. 추가로 이 변수에 여러가지 타입의 데이터가 들어올 수 있다면 | 기호를 이용해 or 연산자를 표현가능하다. 

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

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

// 나만의 타입을 만들 수도 있음
// literal type 이라고도 함
type NameType = 'kim' | 'park'; // 이름이라는 변수엔 앞으로 'kim' 또는 'park'만 들어올 수 있음
let 이름 :NameType = 'kim';

 3. 함수

// 함수는 파라미터와 return 값 타입을 지정할 수 있음
function 함수명(x :number) :number{
  return x * 2
}

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

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

타입스크립트는 지금 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없음. 항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야 허락함

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

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

5. object 타입도 정의가 너무 길 때는 type 키워드로 변수에 담자

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


type MyObject = {
  [key :string] : number, //object안에 어떤 속성이 들어갈지 아직 모를 때? ->index signature
}
let 철수 :MyObject = { 
  age : 50,
  weight : 100,
}

type 키워드 대신 비교적 최근에 나온 interface 키워드도 사용 가능하다.

6. class의 타입 설정

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

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

 

* 참고 : 애플코딩 ( https://www.youtube.com/watch?v=xkpcNolC270&t=785s )