지영이의 개발 블로그

어떤 변수는 1이라는 값만 가질 수 있게 제한하고 싶으면 어쩌죠. 자바스크립트 const 변수 쓰면 되겠군요. 근데 1 또는 0만 가질 수 있게 제한하고 싶으면 어쩌죠. 그 변수에 number 이런 식으로 타입을 지정하면 너무 광범위하지않습니까. 그럴 땐 Literal type을 선언하도록 합시다. 어떤 변수가 미리 골라놓은 데이터만 가질 수 있게 도와줍니다. Literal Type 만드는 법 string, number 이런 것만 타입이 될 수 있는게 아닙니다.일반 글자같은 것도 타입이 될 수 있습니다. let john :'대머리'; let kim :'솔로'; '대머리', '솔로'라는 타입을 만들었습니다 마음대로 변수나 함수에 할당 가능합니다. 그럼 신기하게도 john이라는 변수는 이제 '대머리' 라는 ..

타입 정의가 너무 길면 Type Aliases let 동물 :string | number | undefined; 코드 열심히 짜다보면 매우 길고 복잡하게 타입을 나열하는 경우가 많습니다. 이게 길고 보기싫고 나중에 또 사용하고 싶으면 변수에 담아쓰십시오. 변수만드는 것 처럼 type 이라는 키워드를 쓰면 됩니다. type 키워드 쓰는걸 type alias 라고 합니다. type Animal = string | number | undefined; let 동물 :Animal; type 타입변수명 = 타입종류 타입을 변수처럼 만들어서 쓰는 alias 문법입니다. 관습적으로 대문자로 시작합니다. 일반 자바스크립트 변수랑 차별을 두기 위해 AnimalType 이런 식으로 작명하는게 좋을거 같네요 object 타입..

function 내함수(x :number | string){ return x + 1 //에러남 } Operator '+' cannot be applied to types 'string | number' and 'number' 라는 에러가 납니다. string | number 같은 union type 에는 일반적으로 조작을 못하게 막아놔서 그렇습니다. 이런 메세지를 보면 1. 타입을 하나로 Narrowing 해주거나 2. Assert 해주거나 둘 중 하나 해주면 됩니다. Type Narrowing if문 등으로 타입을 하나로 정해주는 것을 뜻합니다. function 내함수(x :number | string){ if (typeof x === 'number') { return x + 1 } else if (t..

함수에 타입지정 그래서 함수는 총 두 군데 타입지정이 가능합니다. 1. 함수로 들어오는 자료 (파라미터) 2. 함수에서 나가는 자료 (return) function 내함수(x :number) :number { return x * 2 } 1. 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 적으면 됩니다. 2. 함수가 실행된 후 남는 값 (return 우측에 있는 값) 타입지정하고 싶으면 함수명() 우측에 적으면 됩니다. - 파라미터에 타입을 지정하면 필수 파라미터가 됩니다. void 타입 함수는 특이하게도 void라는 타입을 사용가능합니다. '아무것도 없이 공허함'을 뜻하는 타입인데 return할 자료가 없는 함수의 타입으로 사용가능합니다. function 내함수(x :number) :void { re..

Union type 사용 "이 변수엔 string 또는 number가 들어올 수 있습니다~" 라고 타입정의를 하고싶으면 | 연산자를 씁시다. OR 연산자 같은 느낌인데 이런 타입을 전문용어로 Union type 이라고 부릅니다. let 이름: string | number = 'kim'; let 나이: (string | number) = 100; 괄호를 해주면 됩니다. name, age 변수엔 string 또는 number만 들어올 수 있습니다. 그리고 할당하는 순간 타입은 string 또는 number 중 하나로 변합니다. 그럼 array, object 자료 만들 때 union type (OR 연산자) 쓰려면 어떻게 할까요 var 어레이: number[] = [1,'2',3] var 오브젝트: {data..

타입스크립트 쓰는 이유 타입스크립트는 자바스크립트의 타입부분을 업그레이드해서 사용하고싶을 때 설치해서 쓰는 일종의 자바스크립트의 대용품입니다. TS도 결국엔 JS이다 . 결과론 적으로 보면 TS은 JS의 상위 확장이다. Javascript + Type = TypeScript 자바스크립트에 타입에 대한 내용을 확장시킨 것이 TS이다. 타입스크립트는 컴파일 이후에 자바스크립트가 된다. 완전 다른 언어는 아니라 자바스크립트 문법 그대로 이용가능한데 타입문법을 업그레이드해서 쓸 수 있습니다. 자바스크립트는 타입에 관대합니다. 5 - '3' 이렇게 숫자와 문자를 연산해도 parseInt([1,2,3]) 숫자로 바꿔주는 함수에 뭔가 이상한걸 넣어도 아무런 제지가 없습니다. 왜냐면 자바스크립트는 Dynamic typ..