Typescript 문법 1

타입스크립트는 왜 사용할까? 🤔

컴파일러를 통해 자바스크립트 코드를 타입스크립트로 변환할 때 오류를 미리 발견할 수 있음.
브라우저는 자바스크립트 코드만 이해하기 때문에 런타임 시에만 오류를 발견할 수 있다.
따라서 타입스크립트를 사용하면 오류를 빨리 발견할 수 있다.

간단한 타입

let a : number = 1;
let b : string = "lia"
let c : boolean = "true" // ❌ 이렇게 작성하면 오류가 발생. boolean 타입으로 지정되어야 함
let c : boolean[] = [true] // ✅

하지만 아래처럼 타입스크립트가 자동으로 추론하게 코드를 작성하는 것이 좋음

let a = 1;
let b = "lia"
let c = "true"
let c = [1,2,3] // ✅

암시적 유형, 명시적 유형

암시적

let a = "hello"
a = "bye"
a = 1 // ❌ 에러

let c = [1,2,3]
c.push("1") // ❌ 에러

const player = {
name: "lia"
}

player.name = 1 // ❌ 에러 
player.hello = 1 // ❌ 에러 

-> 타입스크립트가 알아서 추론 

명시적

let a = "hello"
let b : boolean = "x" // ❌ 변수 b는 boolean 이어야 함. 

배열에 값이 없는 경우는 명시적 표현을 사용
let c : number[] = []

선택적 변수 지정

• age를 선택하게 하고싶어.

const player : {
	name:string,
	age?:number
} = {
	name: "lia"
}

// 아래와 같이 작성 시 에러 -> age는 undefined 일수있어요~
if(player.age < 10) { 
}

// 아래와 같이 작성해야함.
if(player.age && player.age < 10) { 
}

정말 많은 플레이어가 있다면 ?

너무나 지저분.

const playera : {
	name:string,
	age?:number
} = {
	name: "lia"
}

const playerb : {
	name:string,
	age?:number
} = {
	name: "b"
}

const playerc : {
	name:string,
	age?:number
} = {
	name: "c"
}

아래와 같이 Alias생성

type player = {
	name: string,
    age?: number
}

const a : player = {
	name: "lia"
}

const b : playerr = {
	name: "b",
	age: 100
} 

함수 리턴 타입

function playerMaker(name: string) {
	return {
    	name: name   
    }
}
const lia = playerMaker("lia")
lia.age = 22 // ❌ string인 name 요소만 있는 object를 return 하고 있기 때문

따라서 아래와같이 사용해야함.Player타입을 넣어줘야함

function playerMaker(name : string) : Player {
	return {
    	name: name   
    }
}

const lia = playerMaker("lia")
lia.age = 22