Typescript 기초 배우기

타입스크립트란?

• 자바스크립트의 타입부분을 업그레이드해서 사용하고 싶을 때 설치해서 쓰는 자바스크립트 대용품이다...

개발자 채용 공고만 봐도 타입스크립트를 써 본 경험을 물어보기 때문에 배워야 할 필요성이 있다😂

자바스크립트는 타입에 관대하다?

자바스크립트를 배우면서 학교에서 자바나 C언어를 배울 때 처럼 int형이나 string형 등 변수나 함수를 선언할 때 앞에 타입을 정해본 적이 없는 것 같다!

console.log(10 - "5") // 5

숫자형에서 문자형을 빼는 오류가 있는 코드지만 자바스크립트는 알아서 타입을 바꿔버리기 때문에 아무런 제지가 없다

📌 타입 스크립트는 이런 점을 전부 에러로 잡아준다!!!

어차피 알아서 고쳐주는 데 이게 필요할까?

• 에러메세지의 퀄리티가 높아진다.
• 남이 짠 코드를 수정할 때 이런 타입부분에서의 버그가 자주 발생할텐데 그때 매우 유용하다!!!
  • 결론은 써봐야 알 것 같다...

타입스크립트 설치

1. Node js 최신버전
2. VScode 터미널에 아래 코드 입력

npm install -g typescript

3. 작업폴더 생성 후 Open Folder

4. .ts로 끝나는 파일 만들고 사용!!

   ts 파일은 js 파일과 똑같이 사용가능하지만 웹브라우저는 ts 파일을 인식하지 못하기 때문에 js 파일로의 변환 작업이 필요하다.

5. tsconfig.json 파일 생성

   이 파일은 ts -> js로 컴파일 할 때 옵션들을 정의하는 파일이다!

6. 변환

• 터미널에 tsc -w 입력 -> ts 파일을 자동으로 js 파일로 근처에 변환해준다.
• HTML 파일에서 스크립트를 사용할 땐 꼭 js 파일로 사용하자!

React나 Vue에선?

React

• React 프로젝트에서 Typescript 사용할 경우
  • 이미 있는 React 프로젝트에 설치

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

• React 프로젝트를 새로 만들기

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

Vue

• 터미널에 vue add typescript 입력하면 라이브러리가 설치된다.
• vue 파일에서 타입스크립트를 쓰려면

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

이렇게 lang 옵션을 켜두고 쓰면 잘 된다!

Vue 프로젝트 내에서도 tsconfig.json 파일 만들어서 자유롭게 설정 가능하다.

타입스크립트 문법

• 변수명 옆에 타입지정
  • 아래 변수엔 무조건 문자 타입의 값만 들어올 수 있다.

const name :string = 'jeong'

// names라는 배열엔 문자열 값만 들어올 수 있다.
const names: string[] = ["jeong", "park"]

// names라는 객체에 name 속성엔 string 값만 들어올 수 있다.
const names: { name: string } = { name: "jeong" }

// ?를 하면 속성이 있든 없든 오류가 나지 않는다.
const names: { name?: string } = {}

// OR(|) 기호를 사용해 string, number 둘 다 가능하도록 처리
const names :string | number = 123

• 타입이 너무 길면?

// 이렇게 선언해서 변수로 따로 빼는 것도 가능하다
type Types = string | number

const names :Types = 123

// 매개변수 타입지정과 return 타입지정
function add(x : number) :number{
    return x + 1
}

// array tuple 타입지정
type Member = [number, boolean]
const answer :Member = [100,true]

// object도 
type Member = {
	name: string
}
const answer: Member = { name: "jeong" }

// object의 속성이 너무 많다면??
type Member = {
	[key : string] :string
}
const answer: Member = { name: "jeong" }


// 클래스도 가능!!
class Member { 
    name : string
    constructor(name :string){
        this.name = name
    }
}

any를 이용하면 모든 타입이 들어오는 것을 허용한다! 타입해제나 비슷하기 때문에 주의하자..!
unknown any와 비슷하지만

let name :any
name = 123
name = 'string'
name = {} // 갑자기 객체?
let result :string = name

위 코드와 같은 상황에서 any는 허용이 되버리지만 unknown은 에러로 잡아준다!

tsconfig.json

• es5로 셋팅 시 es5 버전 자바스크립트로 컴파일(변환)
• 신버전 es2016, esnext
• 'module'은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정함
  • commonjs는 require 문법
  • es2015, esnext는 import 문법 사용

{
 "compilerOptions": {

  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거 

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "noImplicitAny": true, //any타입 금지 여부
  "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
  "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
  "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
 }
}

팁!

가장 좋은 Union type 사용 -> "이 변수엔 string 또는 number가 들어올 수 있다!" 라고 타입정의를 하고싶으면 | 연산자를 쓴다. 이런 타입을 전문용어로 Union type 이라고 부른다 😀

let nums :string|number = 1
let answer: (number | string)[] = [1,'string',100]
let result: {data : (number | string) } = { data : '123' }

주의할 점

fuction result(x : number | string){
	return x + 1
}

• 위 코드는 에러가 발생한다.
• string | number와 같은 union type은 일반적으로 조작을 못하도록 엄격하게 막아놓기 때문이다.
• 타입을 Narrowing 해주거나 Assertion 해줘야 한다.

Narrowing

• if와 typeof 키워드로 타입별로 코드를 짜준다.

Narrowing으로 판정해주는 문법들

• typeof 변수
• 속성명 in 오브젝트자료
• 인스턴스(자식) instanceof 부모

fuction result(x : number | string){
	if(typeof x === 'number'){
    	return x + 1
    }else if(typeof x === 'string'){
    	return x + 1
    }else{
    	return -1  
    }
}

함수 안에서 if문을 쓸 때 마지막에 else {} 가 없으면 에러가 난다.
return 하지않는 조건문이 있다면 나중에 버그가 생길 수 있어서 에러를 내주는 것인데 tsconfig.js 에 "noImplicitReturns": false, 추가하면 되지만 더 엄격한 검사가 이루어지기 위해 생략하자!

assertion(타입 덮어쓰기)

• as
• Narrowing 할 때 사용
  • 타입을 a에서 b로 변경하는 게 아니다!!!
• 무슨 타입이 들어올지 100% 확실할 때!!
• 비상용으로 쓰자..🙄

function reuslt(x : number | string){

    const array :number[] = []
    
    array[0] = x as number //assertion
    
}

타입이 너무 길 땐

Type Aliases (별칭) -> 변수로 정의

let result :string | number | undefined

• 위 코드처럼 타입이 너무 길고 재사용을 하고 싶다면

type Animal = string | number | undefined

let result : Animal

readonly

• object 속성 바뀌지 않게 만들기
• 타입스크립트 에러는 에디터와 터미널에서만 존재하기 때문에 실제 js 파일에서는 동작이 된다..

type Animal = {
    readonly name : string
}

const result : Animal = {
    name : 'lion'
}

result.name = 'tiger' // 오류 Cannot assign to 'name' because it is a read-only property.

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

object에 지정한 타입의 경우 &(AND) 기호를 통해 합치기(extend)도 가능하다. Type alias & Type alias 만 가능한게 아니라 Type alias & { name : string } 이런 것도 가능

📌 type 키워드는 재정의가 불가능하다!!