TypeScript -1-

Photo by Clementina Toso on Unsplash

노마드코더의 Typescript로 블록체인 만들기 강의를 듣고 정리한 내용입니다. 일부 내용이 다를수도 있습니다

JavaScript vs TypeScript

에러에 관대한 JavaScript

case1

[1, 2, 3, 4] + false
//'1,2,3,false'

• 배열에 bool을 더하려하지만 경고 x

function divide(a, b) {
	return a / b
}
divied(2,3)
//0.66666666666
divide("xxxxxx")
//NaN

• 두개의 인자가 필요하지만 한개의 인자만 보냄
• 실행에 필요한 타입이 잘못됨
• 함수가 올바르게 작동하도록 강요 x

case2

• 런타임 에러

const abcd = { name:"abcd"}
abcd.hello();
//Uncaught TypeError: abcd.hello is not a function

• 코드가 실행되기 전에 막을 수 있는 에러임에도 막지 않음
• 유저가 코드를 실행시켜야지만 알게 됨

에러를 미연에 방지하는 TypeScript

case1

• 코드가 실행되기 전에 인수가 두개 필요하고 숫자타입의 값이 필요하다는걸 알려줌

case2

• 코드가 실행되기 전에 hello()란 함수는 없고, 런타임 에러가 일어날 것이라 경고

TypeScript의 보호장치

• 강타입 언어

• 브라우저 -> JavaScript만 인식 -> TS를 JS로 컴파일 후 인식

• Node.JS -> JS, TS 둘다 인식

• JS로 변환되기 전 에러를 확인해줌

• 에러가 있을시 JS로 변환(컴파일) 불가

타입스크립트 <-- | --> 변환된 자바스크립트

• hello라는 함수가 없다는 걸 알려줌

• 숫자에 불리언을 더할 수 없음을 컴파일 전에 알려줌

• x, y의 타입이 정해져 있지 않음을 경고
• 두개의 인자를 받아야하지만 한개의 인자만 받았음을 알려줌

Type 지정하기

• 컴파일러에게 숫자라면 숫자 문자열이라면 문자열이라고 알려줘야 함
• 혹은 TS가 추론하도록 할 수 있음
• 상황에 따라 사용, 보통은 TS가 타입을 추론하도록 만들어서 사용함

타입 추론 (묵시적)

• let a = "hello" "hello"로 인해서 a의 type이 string으로 인식
• "bye" 도 문자열임으로 에러 x
• 1은 숫자임으로 에러

• spongeBob의 nickname은 문자열로 지정되어있어서 숫자로 변경 불가
• hello()란 함수도 없으므로 실행불가

타입 지정 (명시적)

• let b : boolean b 는 boolean 타입으로 지정

• "x"는 string임으로 에러

• let b : boolean = false (o)

• let b = false 도 가능

• 숫자들로만 이루어진 배열
  
  

명시적 방식이 필요한 경우

• 숫자들로만 이루어진 배열이 비어있어야 할때
  • 이렇게 되면 문자열이 들어감
    
    
  • 이렇게 하면 숫자만 들어감
    

let a : number[] = [1,2,3,4,5]
let b : string[] = ['a','b1','123']
let c : boolean[] = [true]  

let a = [1,2];
let b = ['a','b1','123'];
let c = [true]

선택적으로 타입지정하기 (optional type)

어떤 객체가 프로퍼티를 가지고 있거나 가지고 있지 않을 경우

const player = {
  name : "Spongebob"
}

const player1 = {
  name : "Patrick",
  age : 7
}

모든 player는 name을 가지고 있지만 age는 선택적으로 가지고 싶을 때

• 변수의 타입을 지정 X
  

• object의 타입을 지정 O

const player : {} = {}

2. 프로퍼티타입지정 (name과 age의 실제값이 없기 때문에 에러가 뜸)

const player1 : {
    name:string,
    age:number
} = {}

3. name값 지정 (age값을 지정해주지 않았기 때문에 여전히 에러가 뜬다)

const player1 : {
    name:string,
    age:number
} = {
    name:"Spongebob"
}

4. age값을 선택적으로 지정하기 (옵셔널체이닝처럼 age프로퍼티 key에 ?를 붙여준다)

const player1 : {
    name:string,
    age?:number
} = {
    name:"Spongebob"
}

첫번재 경우(x)	두번째 경우(o)

객체 사용해보기

• 타입이 undefined 일 수도 있음을 경고

• player가 있을때만 이라는 조건을 명시하면 에러x
  

alias 이용해 재사용하기

• player가 여러명 있을때 이렇게 쓴다면 너무 귀찮음

const player1 : {
    name:string,
    age?:number
} = {
    name:"Spongebob"
}

const player2 : {
    name:string,
    age?:number
} = {
    name:"Patrick"
}

const player3 : {
    name:string,
    age?:number
} = {
    name:"Squidward"
}

• alias 이용하면 단축할 수 있음

// class처럼 대문자
type Player = {
    name:string,
    age?:number
}

const squarePants : Player = {
    name:"Spongebob"
}

const star : Player = {
    name:"Patrick"
}

const tentacles : Player = {
    name:"Squidward"
}

좀더 오버해서 name과 age에도 적용해보기

type Name = string;
type Age = number;

type Player = {
    name:Name,
    age?:Age
}

const squarePants : Player = {
    name:"Spongebob",
    age:7
}

const star : Player = {
    name:"Patrick"
}

const tantacles : Player = {
    name:"Squidward"
}

• 코드가 명확해질때까지만 과하지 않게 alias를 사용하면됨

함수 return값의 타입 지정하기

1. arguments(인수) 타입 지정하기

function plyaerMaker(name:string)

2. player object 만들고 return 하기

type Name = string;
type Age = number;

type Player = {
    name:Name,
    age?:Age
}

function plyaerMaker(name:string){
    return {
      //name:name
        name
    }
}

• ts에서 string을 가진 name을 인수로 받아서 타입이 string인 name프로퍼티를 가진 object를 반환함을 알고 있음

• bob을 만들때 반환타입이 지정되지 않은 age를 넣는다면 (반환타입이 지정되지 않은 프로퍼티를 반환하라 했을때)

const bob = plyaerMaker("bob")
bob.age = 7

• 함수 인수뒤에 Player alias를 사용

function plyaerMaker(name:string) : Player {
    return {
        name:name,
    }
}

const bob = plyaerMaker("bob")
bob.age = 7

• alias를 붙여줌으로서 ts가 이 함수가 string타입으로 name을 받고 Player타입을 return하는 함수임을 인식

화살표함수에서 타입 지정하기

type Name = string;
type Age = number;

type Player = {
    name:Name,
    age?:Age
}

const playerMaker = (name:string) : Player => ({name})

const bob = playerMaker("bob")
bob.age = 7

정리:

타입을 지정할 수 있는 곳

• 변수 let x : boolean = true
• 인수 function playerMaker(name:string) {}
• 함수 인수 뒤 function playerMaker(name:string) : Player {}

타입 지정하는 방법

• 선택적 타입 사용법
• alias 사용법
• arguments 타입을 지정하는 방법
• 함수(&화살표함수) return값 타입 지정하기