Typescript 기초

Typescript object 타입 명시 기초

const user : {
  	name: string,
	age: number
	// age?: number // ?를 붙이게 되면 age: number | undefined와 같은 의미
} = {
  name: “hong”
  // 여기서 age를 선택적이게 하고 싶다면 위의 age에 ?를 추가하면 된다 // ?는 선택적 타입 명시
}

If(user.age && user.age < 10) 
// 이렇게 하는 이유는 typescript는 age가 undefined일수도 있다는 걸 알기때문에 
// user.age 이게 없으면 오류발생

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

같은 내용을 반복으로 쓰게 될 경우 (Alias 타입(Alice))

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

로 적어주고

const hong : User = {
  name: “hong”
}

쓰면 된다

추가로 정의해서 사용하는 방법

type. Age = number;
type Name = string;
type User = {
	name: Name,
	age?: Age
} 

함수에 타입 사용하는 방법

function UserWelcome(name: string) : User {
  return {
    name
  }
}
// ()뒤에 타입을 입력해주면 된다
// 이렇게 하게 되면 
Const hong = UserWelcome(“hong”)
hong.age = 12 // 에서 오류가 안난다 왜냐 Player에 age 타입이 지정되어있기 때문에

화살표 함수 시 사용방법

const userWelcome = (name:string) : User => ({name}) 

배운 내용 정리

1. age? : Age 선택적 타입을 다루는 방법
2. type User = {}을 통해서 Alias타입을 생성하는 방법
3. (name: string) 함수 인자 argument 타입을 지정하는 방법
4. function UserWelcome(name: string) : UserWelcome 함수 return값의 타입을 지정하는 방법

---

Read Only 속성

type Age = number;
type Name = string;
type User = {
	readonly name:Name
  	// 이제 User의 name을 수정하려고하면 typescript가 읽기전용이라고 수정을 못하게 막는다
  	age?: Age
}

const userWelcome = (name:string) : User => ({name})
const hong = userWelcome("hong")
hong.age = 20
// hong.name = 'kim' // 오류발생 
// hong은 User타입이라는게 명시되어있고, User의 name은 readonly이기 때문이다

const numbers: readonly number[] = [1,2,3,4]
// numbers.push(1) // readonly이므로 push진행이 되지 않는다.
// readonly를 삭제하면 numbers.push(1)은 정상적으로 작동한다

const names: readonly string[] = ["1", "2"]
// names.push("3") 작동하지 않는다
// 단 names.filter 이나 names.map은 작동한다. 왜냐하면 배열을 바꾸지 않기때문에
// 즉, readonly로 인해 immutability 불변성을 가지게 된다

하나의 배열에 각각 다른 타입이 들어올 경우

const user: [string, number, boolean] = ["hong", 1, true]
// 이걸로 인해 user라는 배열 안에는 3개의 요소들이 있어야 하며, 순서대로 string, number, boolean이 있어야함을 알 수 있다
// user[0] = 1 이것은 오류가 난다. user배열의 첫번째 요소는 string으로 지정되어 있기 때문에

const user: readonly [string, number, boolean] = ["hong", 1, true]
// readonly를 사용할때의 방식

다른 타입들

undefined, null

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

any

let a = []
// 위와 같은 코드를 작성하면 ts는 기본적으로 a를 any의 array라고 생각한다

any란?
Typescript로부터 빠져나오고 싶을때 쓰는 타입이다 ts의 보호장치들로부터 빠져나오고 싶다면 사용하면 된다
any는 말그대로 아무 타입이나 될 수 있다.

배운 내용 정리

1. readonly 속성
2. 하나의 배열에 각각 다른 속성
3. undefined, null, any 속성

---

typescript에서만 사용하는 type

unknown

어떤 타입일지 모르는 경우에 사용할 수 있는 type

let a : unknown;
// 이렇게 해두면 ts로부터 일종의 보호를 받게 된다

// let b = a + 1; 이 코드는 오류가 난다 왜? a는 unknown이기 때문에
if(typeof a === 'number'){
	let b = a + 1;
}

// let b = a.toUpperCase(); 이 코드는 오류가 난다. 왜? a는 unknown이기 때문에
if(typeof a === 'string'){
	let b = a.toUpperCase();
}

void

void는 아무것도 return하지않는 함수를 대상으로 사용한다
void는 따로 지정해줄 필요가 없다
왜? ts는 hello함수가 아무것도 return하지 않는다는 것을 자동으로 인식하기 때문이다

function hello(){
	console.log('x');
}
// hello함수는 function hello(): void로 설정되어있다

never

never은 함수가 절대 return하지 않을때 발생한다
함수에서 exception(예외)이 발생할때

function hello(): never{
	// return "X"; // 오류가 난다
 	// 왜? never 타입이기 때문에
	throw new Error("xxx");
   	// 이건 작동한다. 오류를 발생시키면 정상적으로 작동하기 때문에
}

또한 never는 타입이 두가지 일수도 있는 상황에 발생할 수 있다

function hello(name:string|number){
	// name + 1; // 이건 오류가 난다 왜? name은 string일수도 있으니까
  	if(typeof name === 'string'){
		name // string 값이다
    }else if(typeof name === 'number'){
		name // number 값이다
	}else{ // 이 코드는 실행되지 않아야한다는 의미
		name; // never 값이다
    }
}

배운 내용 정리

1.unknown
2. void
3. never