[TypeScript] 타입스크립트 작동방식과 타입의 종류

타입스크립트 작동방식과 타입의 종류

🔎 작동방식

강력한 타입 지정 프로그래밍 : 

• TypeScript는 강력한 타입 언어로 , 컴파일 중에 타입 안전성을 제공한다.
• JavaScript로 컴파일되며, 오류가 발생하면 컴파일 실패.

타입 안전성을 위한 TypeScript:

• TypeScript는 실행 전에 타입을 확인하여 일반적이 오류를 방지함으로써 타입의 안전성 제공
• 타입 추론을 통해 TypeScript는 명시적으로 선언하지 않고도 타입을 이해하고 추론할 수 있다.

타입 주석과 추론:

• 타입은 명시적으로 주석을 달거나 TypeScript에게 추론을 맡길 수 있다. 따라서 추가 코드없이 오류 확인 제공

let a:number[] = [1,2,3]
let b:string[] = ["h","e","l","l","o"]
let c:boolean[] = ["false","true"]

 

선택적 타입(Optional type) 및 타입 별칭(Alias):

• '?'를 사용하여 선택적인 타입을 정의할 수 있다.
• 타입 별칭('type' 사용)은 재사용을 위해 만들 수 있다. 객체 타입 뿐만아니라 모든 타입에 이름을 지정할 수 있음

선택적 타입 : 변수명 뒤에 ?를 사용하면 됨.

type Age = number;
type Name = string;
type Player={
	name:Name,
	age?:Age; //이 경우 age는 number이거나 undefined이다.
}={
name:"Jin"
}

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

 

//타입 별칭으로 쉽게 관리.
type Age = number;
type Name = string;

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

const Jin: Player ={
	name:"Jin"
}

const Jay: Player ={
	name:"Jay",
	age:20
}

 

함수 타입:

• Argument type: 인수에 인수명을 적고 타입을 지정해줘도 됨.
• Return type: 타입을 return하는 함수가 됨.

type Age = number;
type Name = string;
type Player ={
	name:Name,
	//optional type : 변수명 뒤에 ?를 사용하면 됨.
	age?:Age
}

function name(): string[] {
  // function implementation here
  return ["string1", "string2"];
}

//argumanet type : 인수에 인수명을 적고 타입을 지정해줘도 됨.
function playerMaker(name:string) : Player { 
//return type : Player타입을 return하는 함수가 됨.
	return{
		name
	}
}

//arrow function 방식
const playerMaker = (name:string) : Player => ({name}) 
//이 경우 객체 타입을 returun 하는 것이기때문에 {name}밖으로 또 ()를 해주는 것이다.


const jin = playerMaker("jin")
jin.age =20 
//이렇게 바로 쓰면 틀린 문장 why? 위의 함수에서 타입을 지정해주지 않았기때문에
//하지만 함수를 지정해주고 난 뒤면 오류가 사라짐.

 

읽기 전용 속성(readonly property):

• 'readonly'를 사용하여 변경할 수 없는 속성을 만들 수 있다. TypeScript에서만 사용.

type Age = number;
type Name = string;
type Player = {
	readonly name:Name,
	age?:Age
}
const playerMaker =(name:string):Player => ({name})
const jin = playerMaker("jin")
jin.age = 20
jin.name = "las"

//또 다른 예시
const numbers: readonly number[] = [1,2,3,4]
numbers.push(1)

const names: readonly string[]=["1","2"]
names.push("3")

 

읽기 전용 튜플(readonly Tuple):

Tuple은 array를 생성할 수 있게 하는데 최소한의 길이를 가져야 하고, 특정 위치에 특정 타입이 있어야한다.

• readonly Tuple의 경우도 마찬가지로 TypeScript에만 존재

const player:[string, number, boolean] = ["Jin", 1, true]

player[0] = 1 
//이것은 오류로 뜰 것이다. 
//왜냐하면 우리는 위에서 string 다음에 number 그 다음에 boolean 타입이 오도록 지정을 해두었기때문에
//첫번째 인덱스가 숫자 1이 오는 것을 오류로 처리함. why? 첫번째 인덱스는 string 타입이어야하기 때문.

//마찬가지로 앞에 readonly가 붙으면 
const player:readonly[string,number,boolean]=["Jin", 1, true]
//player변수 안에 들어가는 것들 변경 불가.

 

---

🔎 타입의 종류

• JavaScript에도 있는 것 : undefined, null, any

let a : undefined = undefined
let b : null = null

let a = [] //let a : any[]

//any는 TypeScript로부터 빠져나오고 싶을 때 쓰는 타입. any는 말그대로 아무 타입이 될 수 있음.

 

Any타입:

Any는 TypeScript로부터 빠져 나오고 싶을 때 쓰는 타입.
말그대로 변수가 어떤 타입이든 가질 수 있다.(아무타입이 될 수 있다는 말.)
타입 안전성이 감소하므로 권장하지 않음

• TypeScript 설정에 any사용을 막기위해 추가할 수 있는 몇가지 규칙이 존재
  • any를 사용하지 않는 것을 권함.

const a : any[] = [1,2,3,4]
const b : any[] = true

a + b // 이 경우 any를 사용해서 typescript의 규칙을 비활성화 시키기때문에 오류가 안뜸.


//차라리 any없이 이렇게 쓰는 것을 권장.
const a = [1,2,3,4]
const b = true

 

Unknown타입 : ⭐️⭐️

• 변수의 타입을 미리 알지 못 할때 사용
• 어떤 타입인지 모르는 변수는 unknown이라 적어서 TypeScipt의 영향을 받도록 만든다.
• 다만, 연산전에 변수의 타입 확인이 필요하다.

let a:unknown;

let b = a + 1 //이 경우엔 a의 type이 unknown이기때문에 오류 처리됨.

//이런 경우, type checker에게 먼저 확인을 받는 것이 좋다.
if (typeof a ==='number'){
	let b = a + 1 //이 경우엔 a를 number로 인식해서 오류가 나지 않는다.
}

//반면에 이렇게만 두면 작동하지 않는다. 왜? a의 type이 unknown이니까!
a.toUpperCase()

//하지만 타입 확인작업을 하면 제대로 오류없이 로직 작동
if(typeof a === "string"){
	let b = a.toUpperCase();
}

 

Void타입:⭐️⭐️⭐️

• 아무것도 return하지 않는 함수를 대상으로 사용한다. void는 비어있음, 즉 아무것도 없는 것을 뜻함.
• void를 따로 지정해줄 필요는 없다.

function hello(){
	console.log('x')
}

const a = hello();
a.toUpperCase()

//이렇게 사용할 필요없다.
function hello():void{console.log(’x’)}

 

Never타입:

• 함수가 절대 return하지 않을 때 발생한다.
• 예를 들어, 함수에서 예외가 발생할 때 

function hello():never{
	return "X"
}
//-> 이 경우엔 오류 발생

//반면에 일부러 error를 만들면 모든게 정상적으로 작동함.
function hello():never{
	throw new Error("xxx")
}

• 타입이 두가지인 경우,

function hello(name:string|number){
	name+1 //이건 사용 불가, 왜냐고? 위에 name타입을 string 혹은 number라고 했기때문에.
}

//그렇다면 이런 경우에는 typeof로 name의 타입을 확인해주고 가야한다.
function hello(name:string|number){
	if(typeof name === "string"){
			name //string
	}else if(typeof name === "number"){
			name //number
	}else{
			name //never, 이 경우 절대로 실행되지 않아한다는 것. 
					 //위처럼 타입이 올바르게 들어온다면 절대 실행되지 않을 것임
	}
}