TypeScript 12

[TS]함수에 사용하는 never 타입도 있긴 합니다

Never type 을 알아보자 함수에 붙이는 return type으로 사용가능합니다. 근데 좀 특이합니다. function 함수() :never{ } 어떤 함수가 조건 1) 절대 return을 하지 않아야하고 조건 2) 함수 실행이 끝나지 않아야합니다 (전문용어로 endpoint가 없어야합니다) 그런 함수에 붙일 수 있는 타입니다. 실은 조건1, 2는 같은 소리인데 모든 자바스크립트 함수 맨 밑엔 return undefined 라는 숨겨진 코드를 가지고 있습니다. 그래서 조건2가 맞으면 1도 맞음 function 함수(){ console.log(123) } 이런 함수들에 never를 붙일 순 없습니다. 왜냐면 조건 1번은 만족하지만 2번은 만족하지 않습니다. 2번 조건은 함수 내부 코드 실행이 끝나지 ..

TypeScript 2022.11.07

[TS]Narrowing 할 수 있는 방법 더 알아보기

null & undefined 체크하는 법 실제로 개발할 때 어떤 변수나 함수파라미터에 null, undefined가 들어올 경우 어떻게 대처할지 if문으로 코드짜는 경우가 매우 많을 겁니다. if (저 변수가 undefined일 경우) 어쩌구~ 이런 코드 많이 짤 텐데 왜냐면 저런 상황을 미리 방어하는게 언제나 좋기 때문입니다. 근데&& 스킬을 쓰면 저런 if문을 생략할 수 있습니다. 그러기 위해서 && 연산자에 관련한 내용을 알아봅시다. && 연산자의 다른기능 원래 && 이건 조건식 2개가 참이면 전부 참으로 판정해주세요~ 라는 논리연산자인데 여러개를 사용하면 이상한 현상이 있습니다. && 기호로 비교할 때 true와 false를 넣는게 아니라 자료형을 넣으면 && 사이에서 처음 등장하는 falsy ..

TypeScript 2022.11.07

[TS]함수 rest 파라미터, destructuring 할 때 타입지정

rest 파라미터 타입지정은 function 전부더하기(...a :number[]){ console.log(a) } 전부더하기(1,2,3,4,5) rest 파라미터는 항상 [ ] 안에 담겨오기 때문에 타입지정도 array처럼 해주시면 됩니다. 끝 Destructuring 문법도 함수 파라미터에 사용가능 왜냐면 함수 파라미터 작명하는 것도 변수만드는 문법과 똑같아서 그렇습니다 변수만들 때 기존 object에 있던 자료를 파라미터로 집어넣고 싶으면 let person = { student : true, age : 20 } function 함수(a, b){ console.log(a, b) } 함수(person.student, person.age) 기존 object에 있던걸 person.student 이렇게 각..

TypeScript 2022.11.07

[TS]Object에 타입지정하려면 interface도 있음

type 키워드를 이용해서 타입을 변수처럼 저장해서 쓰는 건 앞에서 해봤죠? 근데 더 좋은 방법이 있습니다. Object에 쓸 수 있는 interface 문법 interface 문법을 쓰시면 object 자료형의 타입을 보다 편리하게 지정가능합니다. 예를 들어서 { color : 'red', width : 100 } 이런 object를 만들고 싶은데 type을 미리 정의하고 싶으면 interface 키워드를 이렇게 만들어봅시다. interface Square { color :string, width :number, } let 네모 :Square = { color : 'red', width : 100 } interface는 object랑 비슷한 모습으로 작성하면 됩니다. type alias와 용도와 기능이..

TypeScript 2022.11.07

[TS]필드값 타입지정

class 내부에는 모든 자식 object들이 사용가능한 속성같은걸 만들 수 있습니다. 예를 들어서 모든 Person 클래스의 자식들에게 data 라는 속성을 부여해주고 싶으면 class Person { data = 0; } let john = new Person(); let kim = new Person(); console.log(john.data); console.log(kim.data); 그냥 class 중괄호 안에다가 변수처럼 만들면 됩니다. (var let 키워드 안씀) 그럼 Person이 출산한 모든 자식에게 data = 0을 하나씩 복사해줍니다. 당연히 자식들은 object 자료형이니 점찍고 data 쓰면 됩니다. class 안에 저렇게 대충 만드는 속성을 필드라고 합니다. 근데 타입이 없군..

TypeScript 2022.11.07

[TS]함수와 methods에 type alias 지정하기

function type 도 저장가능 함수에 들어갈 파라미터와 return으로 뱉을 값들을 타입지정할 수 있다고 배워봤습니다. 함수 타입도 type alias로 저장해서 쓸 수 있습니다. 예를 들어서 1. 숫자 두개를 파라미터로 입력할 수 있고 2. 숫자를 return 하는 함수를 별명을 지어서 사용하려면 type NumOut = (x : number, y : number ) => number ; 이런 식입니다. 이걸 함수 만들 때 사용하려면 function 함수이름 :NumOut (){} 이런 식은 불가능합니다. function 키워드에는 () 이거 내부랑 오른쪽에만 타입지정이 가능해서요. 그래서 이렇게 합니다. 함수 표현식으로 말이죠. type NumOut = (x : number, y : numbe..

TypeScript 2022.11.07

[TS]Types로 만드는 const 변수 유사품

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

TypeScript 2022.11.07

[TS]타입이 너무 길면 Type Aliases, readonly, type extend 등

타입 정의가 너무 길면 Type Aliases (별칭) 코드 짜다보면 let 동물 :string | number | undefined; 매우 길고 복잡하게 타입을 나열하는 경우가 많습니다. 1. 이게 길고 보기싫으면 2. 나중에 또 사용하고 싶으면 변수에 담아쓰십시오. 변수만드는 것 처럼 type 이라는 키워드를 쓰면 됩니다. type 키워드 쓰는걸 type alias 라고 합니다. alias를 번역하자면 별칭인데 저는 그냥 쉽게 변수라고 부르겠습니다. type Animal = string | number | undefined; let 동물 :Animal; type 타입변수명 = 타입종류 타입을 변수처럼 만들어서 쓰는 alias 문법입니다. 관습적으로 대문자로 시작합니다. 일반 자바스크립트 변수랑 차별을..

TypeScript 2022.11.07

[TS]타입 확정하기 Narrowing & Assertion

저번 포스팅에 만든 함수에 숫자 또는 문자를 집어넣으면 + 1 해주는 함수입니다. 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..

TypeScript 2022.10.21

[TS]함수에 타입 지정하는 법 & void 타입

함수에 타입지정하려면 2곳 가능 그래서 함수는 총 두 군데 타입지정이 가능합니다. 1. 함수로 들어오는 자료 (파라미터) 2. 함수에서 나가는 자료 (return) function 내함수(x :number) :number { return x * 2 } 1. 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 적으면 됩니다. 2. 함수가 실행된 후 남는 값 (return 우측에 있는 값) 타입지정하고 싶으면 함수명() 우측에 적으면 됩니다. 함수에 멋있게 타입 실드를 장착했기 때문에 이제 파라미터와 리턴값이 이상해지면 자동으로 혼내줍니다. - 파라미터에 타입을 지정하면 필수 파라미터가 됩니다. 함수는 void 타입이 있음 함수는 특이하게도 void라는 타입을 사용가능합니다. '아무것도 없이 공허함'을 뜻하는..

TypeScript 2022.10.21