기록하는 타입스크립트 - Type

FeelingXD·2022년 11월 9일
0
post-thumbnail

타입스크립트의 변수선언과 타입추론

변수선언

타입스크립트는 일반적으로 변수선언시 뒤에 콜론과 자료형을 명시하는 방법으로 변수를 선언한다.
기본적으로 자바스크립트처럼 변수키워드 와 함께 자료형을 명시하는것으로 선언하지만 자바스크립트와 달리 변수 선언키워드(var,let,const)와 매개변수에대한 자료형은 생략할수없다.

var num :number //number
const str :string //string
let lst :Array<number> // object
function test(a,b){			// error
	
}
function test_fix(a:number,b:number){
	return a+b
}

타입추론

타입스크립트는 변수선언시 자료형을 선언하지않더라도 값을 초기화 한다면
변수를 초기화하는 값에따라 타입을 추론한다.

let num = 6 // typeof(num)=> number 
let str= 'hi' // typeof(str)=> string
let yes=true // typeof(yes) => boolean

타입스크립트 자료형

타입스크립트는 기본적으로 자바스크립트의 자료형에 추가적으로 사용할수있는 타입이 있다.

any, unknown, never

  1. any

Any자료형은 어떤것이든 올수있다. 기본 자바스크립트에서 일반적으로 사용하는 변수 처럼 사용할수있다. 타입스크립트의 강점인 자료형의 명시를 사용할수없기에 사용빈도를 줄이는게좋다.

let anytest:any
anytest=1
console.log(typeof(anytest))
anytest='1'
console.log(typeof(anytest))
  1. unknown

any처럼 어떤 타입의 value든 할당할 수 있으면서 실제로 사용할 때는 개발자로 하여금 타입을 체킹하도록 만들 수 있는 타입이 필요했다. 그래서 조금 덜 수용적인 unknown 타입을 만들게 된 것이다.

unknown 자료형은 any자료형처럼 어떤 자료형이든 올수있지만 any와 다르게 사용할때 타입을체크함으로써 예상치 못한 에러를 잡을수있음

let unknowntest:unknown
let typecheck= (x:unknown):void =>{
    if(typeof(x)=='string'){
        console.log(x.length)
    }
    else if(typeof(x)=='number'){
        console.log(x.length) // number 는 length 프로퍼티가 없기에 error
    }
}
  1. never
    타입스크립트에서 처음본 타입이다. 🤔 다른곳에서도 여러 정보를 취합해 보았지만 아직은 이해가잘 되지않는다. 실제로는 사용빈도가 크지않으며 반환값의 기본형이나. Error를 표현하기위해 사용된다

숫자 체계에 아무것도 없는 양을 나타내는 0처럼 문자 체계에도 불가능을 나타내는 타입이 필요하다.
"불가능"이라는 단어 자체는 모호하다. - toast ui-
never는 일반적으로 함수의 리턴 타입으로 사용됩니다. 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미합니다. 이는 무한 루프(loop)에 빠지는 것과 같습니다. - 타입스크립트 가이드북

// 항상 오류 발생
function invalid(message:string): never {
  throw new Error(message);
}

// never 타입을 결과 추론(Inferred)
function fail() {
  return invalid('실패');
}

// 무한 루프
function infiniteAnimate(): never {
  while ( true ) { infiniteAnimate(); }
}

Union & Intersect

1.Union type

타입은 연산자를 통해 정의할수도 있는데 이름과 같이 한 매개변수에 두가지 이상 타입에대해 정의할수있다. 이를 union type이라 정의한다.

function valuetype(value:string|number){
 if(typeof value=='string'){
 	return 'string type'
 }
 else if(typeof value=='number'){
 	return 'number type'
 } 
}

이처럼 여러가지의 자료형이 매개변수로 올수있는경우, any를 사용하는것보다 매개변수 타입을 제한 함으로써 타입스크립트만의 엄격한검사(타입가드) 를 사용한다.

2.Intersect type

union 타입이 |사용하는것으로 표현햇다면 intersect 타입은 & 로 표기한다.
파라미터로 들어간 타입들을 전부 만족하는 타입을 인터섹션 타입이라고 한다.

interface dog{
 	"name":string,
  	"age":number,
	"legs":number
}
interface bird{
	"name":string,
  	"age":number,
  	"wings":number,
}
function chimera(strange:dog&bird){
  strange.name;
  strange.age;
  strange.legs;
  strange.wings;
}

Intersect type은 union type과 달리 들어가는 매개변수타입 에대한 모든 타입을 정의해줘야한다. 매개변수의 모든자료형을 만족할수 있어야한다.

profile
tistory로 이사갑니다. :) https://feelingxd.tistory.com/

0개의 댓글