[TS]타입스크립트 명시적 타입 선언 방법

 

챌린지 1일차 ! 

먼저, 명시적 타입 선언 방법들에 대해 알아보겠습니다.

TS 변수 선언 방식

1. 명시적 변수 선언
const (ValueName) : (Type) = (Value)
2. 암묵적 변수 선언
const (ValueName) = (Value)

 

 

---

명시적 타입 선언 방법

타입 시스템

자바스크립트는 변수를 생성 하기만 하면 되고 그 변수가 어떤 타입인지 지정해주지 않아도 됨.

하지만 자바나 C#, 타입스크립트는 모든 것의 타입을 지정해줘야한다.

let a = "hello"
a = "bye"  // a가 string이라는 것을 알고 있음.
a = 1 //error

👉 자바스크립트는 가능

let a = "hello"
let b : boolean = "x" //error
let b : boolean = false 

👉 타입스크립트 문법

let a : number[] = [1,2];
let b : string[] = ["i1", "1"];
let c : boolean[] = [true];

👉 배열 타입 선언

 

타입 오브젝트와 옵셔널(Optional)

let a : number[] = [1,2];
let b : string[] = ["i1", "1"];
let c : boolean[] = [true];

옵셔널(Optional)은 있을수도, 없을 수도 있는 변수를 저장하기 위해 있다.

⚡?를 :앞에 있는 변수에 붙이면 Optional을 사용할 수 있다.

const player = { name : "jung" } //age는 없지만 name은 항상 갖고 있는 player객체
player.name // 가능

const player = { name : string, age : number } = { name:"jung" } 
//age is missing 

const player = { name : string, age? : number } = { name:"jung" } 
//age? : number | undefined; 옵셔널(Optional)선언 

if(player.age < 10 ){} 
//❌ error! why? age가 숫자일 수 있지만, 숫자가 아닐 수 도 있기 때문!

if(player.age && player.age < 10 ){ }
//⭕ undefined일 가능성 체크

👉 TS에서 값이 없는 변수는 Undefined를 리턴한다. 따라서, 옵셔널을 사용하여 IF문을 사용할 경우 추가적인 선언이 필요하다.

 

1) Alias(별칭)으로 타입을 지정하는 방법

TS에서는 number,string,boolean 등 간단한 타입을 넘어 Alias(별칭)으로 타입을 지정해 줄 수 있다.

⚡타입 별칭 이름은 대문자로 시작한다.

const playerJun = { 
	name : string, 
	age? : number 
} = { 
	name:"jun" 
}
// ---> 이 경우에는 별칭타입을 생성할 수 있음

const playerStar = { 
	name : string, 
	age? : number 
} = { 
	name:"star" ,
	age: 12
} 

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

const jun : Player = { 
	name:"jun" 
}
const star : Player = { 
	name:"star" ,
	age: 12
} 

👉 Player라는 별칭으로 타입 객체를 만들고, const 변수 jun과 start의 타입을 지정할 수 있다.

 

별칭 타입안에 선택적 타입을 가진 것을 만드는 방법

➕ age의 타입에 대한 다른 별칭을 만들 수도 있다. (가능하다는 거지 굳이 안그래도 되긴 함)

type Age = number;
type Name = string;

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

물론, 이런식으로 과하게 재사용 하는 것은 좋지 않음~~! 코드가 깔끔 해질 때 까지만 이 작업을 하면 된다.

 

 

2) 함수의 retrun값의 타입을 지정하는 방법

TS에서는 함수의 리턴타입을 지정해줄 수 있다.

player의 object를 만들고 그 결과로 player를 반환한다.

type Age = number;
type Name = string;

type Player = {  // 반복해서 작성하지 않고 재사용 가능
	name : Name, 
	age? : Age 
}

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

const jun = playerMaker("jun") //string
jun.age = 12 // ❌ error

TS에게 playerMaker를 Player타입을 반환하고 있다고 말하고 싶다면?

현재 playerMaker는 string인 name이라는 요소만 있는 객체를 반환하고 있다.

function playerMaker(name:string) : Player{
	return {
		name
	}
}
const jun = playerMaker("jun") 
jun.age = 12 // ⭕

Ts가 playerMaker를 string타입으로 name을 받고 Player타입을 반환하는 함수로 이해하게 된다.

👉 인수(argument)인 **name의 타입(string)**과 **함수의 리턴 타입(Player)**을 지정할 수 있음

 

위 내용을 보면 거의 모든 것에 타입을 추가할 수 있고 별칭을 줄 수 있다는 것을 알 수 있다.

그렇다면 화살표 함수를 사용했을 때는 어떻게 사용할까?

type Age = number;
type Name = string;

type Player = {  // 반복해서 작성하지 않고 재사용 가능
	name : Name, 
	age? : Age 
}

function jsArrowFunc = (name:string) => ({name}) //화살표 함수

const jun = playerMaker("jun") 
jun.age = 12 // ❌ error

위 코드의 화살표 함수는 name이라는 object를 반환한다. jun.age를 작성하면 오류가 난다.

function playerMaker = (name:string) : Player => ({name}) //화살표 함수

const jun = tsArrowFunc("jun") 
jun.age = 12 // ⭕

위에서 처럼 같은 문법(:타입) 함수 리턴 타입을 작성해 주면 된다.

const jsArrowFunc = ( parameter ) => {} //JS
const tsArrowFunc = ( parameter : string ) : Player => ( { } ) //TS

/*
화살표 함수에서 return 값을 객체로 반환할 경우에
(parameter) => {}
이렇게만 쓰면 {} 부분이 함수 본문인지 객체인지 구분이 안되기 때문에
({}) 이렇게 묶어줘서 return값이 객체임을 확실히 하는 듯 하다.
*/

function playerMaker (parameter) {
}
(parameter) => {}

function playerMaker(parameter){
	return {객체}
}
(parameter) => ({객체})

 

Types of TS(기본) 요약
✅ 배열: 자료형[ ] ✅ 숫자: number ✅ 문자열: string ✅ 논리: boolean
✅ 옵셔널: optional ✅ Alias(별칭) 타입