TypeScript Study 01

노마드코더 타입스크립트 강의 정리

Implicit vs Explicit

1. Implicit Types(암시적 타입)

• TypeScript가 자동으로 타입을 추론
• 타입을 명시하지 않아도, 병수 값에 따라 타입이 정해짐

let message = "Hello, TypeScript!";
let age = 25;
let isDone = false;

ts가 자동으로 타입을 추론, 다른 타입을 할당하면 에러

age = "five";		// 오류 : age는 number 타입

함수도 리턴 타입 추론 가능

function add(x: number, y: number){
  return x + y;		// 자동으로 number 타입으로 추론됨

2. Explicit Types(명시적 타입)

• 변수 선언 시 직접 타입을 지정
• 개발자가 명확하게 타입을 지정

let message: string = "Hello, TypeScript!";
let age: number = 25;
let isDone: boolean = false;

타입을 직접 지정했기 때문에, 타입 추론 없이 바로 적용
함수에서 명시적으로 리턴 타입을 지정할 수 있음

function add(x: number, y: number): number{
  return x + y;		// 리턴 타입이 number로 명확하게 지정
}

방식	장점	단점	사용예시
Implicit(암시적)	코드가 간결하고 직관적	타입을 명확히 알기 어려울 수 있음	간단한 변수 선언, 추론이 명확한 경우
Explicit(명시적)	코드 가독성이 좋고 오류 예방	코드가 길어질 수 있음	함수 매개변수, 복잡한 객체 타입

const player : {
  name:string,
  age:number
} = {
	name:"nico"  
}  		// 에러! age가 있어야 하는 상황

const player : {
  name:string,
  age?:number
} = {
	name:"nico"  
}		// age가 없어도 된다.

// age? 인 상황에서
if(player.age<10){
  
}		// 에러! Object is possibly 'undefined' age가 없을 수도 있어서

if(player.age && player.age < 10){

}		// 으로 있는지부터 체크

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

const player2 : {
    name:string,
    age?:number
} = {
    name: "player2",
    age: 12
}
// 오브젝트 타입이 중복 -> 타입으로 만들어서 관리가 가능

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

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

const player2 : Player = {
    name: "player2",
    age: 12
}

// 이렇게도 가능
type Age = number;
type Player = {
    name:string,
    age?:Age
}

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

const player2 : Player = {
    name: "player2",
    age: 12
}

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

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

const iuj = playerMaker("iuj")
iuj.age = 12        // 에러 : playerMaker는 age가 없음

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

const iuj = playerMaker("iuj")
iuj.age = 12		// 타입스크립트에 playMaker가 Player를 반환함을 알려주면 해결

//짧게 작성
const playerMaker = (name:string) : Player => ({name})

type Age = number;
type Name = string;
type Player = {
    readonly name:Name,
    age?:Age
}

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

const iuj = playerMaker("iuj")
iuj.age = 12 
iuj.name = "inwoo";		// 에러! readonly로 수정 불가

map, filter, sort도 사용 불가

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

a + b

any: 타입 검사를 무력화

Type of TS

unknown

• 뭐가 들어올지 모르는 상황

let a: unknown;

let b = a + 1;		// 에러! a가 뭐가 될 지 모른다.

// 해결
if(typeof a === 'number'){
    let b = a + 1;
}

if(typeof a === "string"){
    let b = a.toUpperCase();
}

void

• 리턴하지 않음

never

• 절대 발생하지 않는 값. 어떤 값도 가질 수 없는 타입.

function hello(name:string|number){
    if(typeof name === "string"){
    	//여기서는 string    
    }else if(typeof name === "number"){
		//여기서는 number
    }else{
        name	//여기서는 never
    }
}

1. 함수가 절대 반환되지 않을 때(throw를 던지는 함수 등)

function throwError(message: string): never {
  throw new Error(message);
}  

// throwError는 항상 예외를 던지므로 절대 정상적으로 반환 x

2. 끝나지 않는 함수(무한 루프)

function infiniteLoop(): never {
  while(true){
    console.log("Never Ending Function");
  }
}


// 무한 루프라서 반환값이 존재하지 않음 -> never 타입

3. never를 이용한 타입 검사
   • 모든 가능한 경우를 처리하는 switch문에서 사용 예

type Shape = "circle" | "square" | "triangle";

function getShapeName(shape: Shape){
    switch(shape){
        case "circle":
            return "원";
        case "square":
            return "사각형";
        case "triangle":
            return "삼각형";
        default:
            const _exhaustiveCheck: never = shape;      //컴파일 에러
            throw new Error("Unhandled case : " + shape);    
    }
}

• 만약 shape 타입에 새로운 값이 추가되었는데, switch문에서 처리하지 않으면 컴파일 에러 발생

never :
이 함수는 절대 정상 종료되지 않는다는 것을 의미
타입 안정성을 높이고 버그를 방지