[ TypeScript ] TypeScript 의 기본 타입, Optional Chaining, Alias, 함수에서 사용법

 

 

TypeScript 는 JavaScript 에 추가적으로 구문을 더해서 에디터와 단단한 통합을 지원한다.

런타임 에러가 아닌 에디터에서 초기 오류를 잡기가 가능하다.

 

TypeScript 코드는 JavaScript 가 실행되는 모든 곳에서 작성한 TypeScript 의 코드가 JavaScript 로 변환된다.

( 컴파일 시 TypeScript 코드 → JavaScript 코드 로 변환 )

 

또한, TypeScript 는 JavaScript 를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공한다.

 

 

✅ 명시적 정의 (변수 선언 시 타입 정의)

const a : boolean = "x"
// error : boolean 타입에 string 타입 할당 불가 알림

위는 명시적 정의 (변수 선언 시 타입 정의)인데 이미 const a 는 boolean 타입이라고 명시를 해두었기 때문에 뒤에 string 타입이 들어오면 할당이 불가능하다고 알려준다.

 

✅  타입 추론

const b = "hello"
b= 1
// error : string 타입에 number 타입 할당 불가 알림

위는 타입 추론으로, 변수만 생성해서 타입 스크립트가 알아서 타입을 추론해주는 것이다.

const b = "hello" 라고 선언하며 b 는 string 타입이라고 추론하고,
아래에서 b에 number 를 할당하면 위에서 추론한 string 타입에 number가 들어올 수 없다고 알려준다.

 

✅ 기본 타입의 형태

const a : number = 1
const b : string = "a"
const c : boolean = true
const d : number[] = [1,2,3]
const e : string[] = [a,b,c]
const f : boolean[] = [true]

 

✅ Optional Chaining

// person의 age가 선택적인 항목일때 ?를 붙이면 optional
const person : {	
    name : string,
    age? : number
    } = {
    name : "jude"
    }

// X : person.age 가 undefined 일 가능성 알림

if (person.age < 10) {

}

 

// O : person.age 가 undefined 일 가능성 체크

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

}

 

✅ Alias 타입 (별칭)

// Alias 타입을 통해 중복되는 코드를 깔끔하게 변경 가능.

type Person = {
	name : string,
    age : number
    }
    
cosnt person : Person = {
	name : "jude"
    }

 

✅ 함수에서의 타입 사용법

type Person = {
	name : string,
    age : number
    }
    
// 일반 함수
function personMaker(name : string) : Person {
	return {
    	name
        }
}

// 화살표 함수
const personMaker = (name : string) : Person => ({name})

const jude = personMaker("jude")
jude.age = 20
// 에러가 안나고 성공