타입스크립트

js는 다른 언어들과 다르게 타입을 선언하지 않는다. 이로 인해 발생하는 문제점이 많고 유지보수 측면에서도 어려움을 겪는다.예를 들어console.log(1+2) => 3console.log(1 + '2') => 12console.log('1' + '2') => 12이

=> helloText는 string값만 넣을 수 있다. 만약 true인 불리언값을 넣으면 에러가 발생한다.JS에서 사용하면 데이터 타입을 선언해서 사용해보자여기서 주의해야 할 사항은 타입을 선언할 때 소문자를 써줘야 한다는 것이다.만약 string 타입을 선언하고 싶

타입스크립트에서만 사용할 수 있다. type은 type을 변수로 만들 수 있는데type NewStringType = string을 하면 NewStringType은 곧 string타입과 같게 된다.type도 객체처럼 사용할 수 있다.type과 interface와 비슷하게

Js에서는 단순히 변수에 값을 저장하는 것이다.TS는 다르다마우스를 올리면 Type이 자동적으로 설정되는 것을 볼 수 있다.let stringType:string = 'string'let booleanType:boolean = true;를 하지않아도TS가 타입을 추론해

codefactory 변수는 string타입을 받도록 자동으로 설정되어 있다. 그래서 toUpperCase는 사용가능하다반면에 testNumber는 number타입이기 때문에 upperCase가 사용할 수 없다.sampleNumber는 any타입이다.sampleNumb

유니언은 ts에서 타입을 병합 할 수 있는 수많은 방법 중 하나이다.유니온을 사용하려면 | 을 사용하면 된다.StringOrBooleanType은 string이 올 수 있고 boolean이 올 수 있게 된다.에러가 발생한다. type은 string과 boolean만 올

Union과는 반대로 And의 개념을 가진다.HumanAndContacts는 Human타입과 Contacts타입이 합쳐진 타입이 된다.만약 하나라도 없을 시 에러가 발생한다.NumberAndString은 논리적으로 존재할 수 없다.왜냐하면 number과 string은

Union타입에서 더욱 구체적인 타입으로 논리적으로 유추 할 수 있게 되는 걸 의미한다.예를 들어서numberOrString을 확인해보면 string으로 내로잉이 된것을 볼 수 있다.타입스크립트는 우리가 타입을 number | string이라고 선언을 했어도 값을 통해

이렇게 사용하지 말고TS를 사용하자왜냐하면정의한 파라미터 타입이 일치하지 않거나 개수가 맞지 않을 경우 에러가 발생하기 때문이다.파라미터에 옵셔널(?)을 사용할 수 있다.옵셔널은 y 또는 undefined라는 의미이다.그래서 multiplyOrReturn(10)이 에

이 함수를 다음과 같이 고칠 수 있다.map의 콜백 함수를 파라미터로 받고 싶다 하면 함수를 type으로 선언하면 된다.그리고 파라미터로 callback이라는 걸 넘기는데 이 때 타입을 Mapper로 정의한다.이렇게 되면 해당 시그니처함수만 callback에 넣을 수

이미 사용하려는 이름과 같은 이름을 가진 메소드가 있더라도 매개변수의 개수 또는 타입이 다르면, 같은 이름을 사용해서 메소드를 정의할 수 있다.원래라면 자바스크립트에서 오버로딩을 사용할 수 없지만 타입스크립트에서 사용가능하다.하지만 오버로딩은 웬만하면 쓰지말고 각각의

1) 문장식2) 표현식보면 함수 선언할 때마다 타입을 선언해준다. 매우 번거로운 작업이다.표현식 함수의 시그니처 타입으로 선언한 다음에 반복적으로 해주는 것이 더 깔끔하다

위코드는 input을 any타입으로 받고(어떤 값이든 받아야 함으로) number타입이면 true인지 확인하는 코드이다.여기서 type predicate를 써주자왜 이렇게 작성해야 하나?라고 의문점이 생길 수 있다.any type으로 우리가 지정을 했음에도 type

타입과 인터페이스가 중복되는 기능이 많은 이유는 타입에 안되는 기능들을 추가하고 싶어서 인터페이스가 만들어졌다. 그래서 겹치는 부분이 있다.하지만 타입은 할 수 있지만 인터페이스가 못하는게 있고인터페이스는 할 수 있지만 타입은 못하는게 존재한다.다를게 없다. 비슷하지만

인터페이스는 상속을 받을 수 있다. merging이랑 비슷하다. merging은 같은 이름이여지 머징되지만 extends는 다른 이름이여도 상관없다.Type에서 extension을 할 때에는 &기호를 사용한다.인터페이스에서 Type또한 상속 받을 수 있다. 이 때도 마

만약 any로 강제로 캐스팅 하면 TS에서 에러를 잡지 못한다. 하지만 JS로 변환 후에는 에러가 발생한다.any로 캐스팅을 해버리는 순간 어떤 함수의 파라미터에든 넣을 수 있게 된다.JS에서는 에러가 발생할 것이다.오브젝트도 마찬가지로 any로 캐스팅하지 말아야 한다

언노운 타입과 any타입이 비슷하지만 any타입 비해 덜 관대하다any타입에는 어떠한 값이든 넣을 수 있다.unknown타입도 어떠한 값이든 넣을 수 있다.any 타입으로 anyValue를 만들었었다. 이 anyValue값을 다른 변수에 할당하려고 할 때 어떠한 타입이

JS 배열 문제점은 아무타입이나 넣을 수 있다number배열안에 number타입 string타입이 들어가 있는 것을 볼 수 있다.배열을 선언할 때 string배열로 선언을 하게 되면 string타입이 아닌 타입을 넣을 때에 에러가 발생한다.배열 안에 string 또는

str2DArr는 string로 네로잉 된다.

JS에서 튜플이라는 타입은 자바스크립트에서 존재하지 않는 개념이다.string타입 배열로 선언하려면 다음과 같이하면 된다.23, '코드팩토리'이렇게 타입을 맞춰서 넣어야한다. 순서가 바뀌거나 다른타입이거나 더 많이 넣거나 안된다.하지만 push로 나중에 해당 타입을 추

실제 값을 초기화 할 때 타입을 넣으면 그 타입에 선언되어 있는대로 프로퍼티를 넣어야 하지만이미 선언이 되어있는 객체 변수를 다른 변수에다가 할당할 때 초과되는 값들이 있어도 할당이 가능하다. 일단은 기본적으로 해당 프로퍼티는 가지고 있고 초과되어야 한다.NestedP

클래스 안에서 프로퍼티를 사용할 떄 타입을 입력해주어야 한다.초기화는 생성자 함수해서 진행한다.만약 생성자 함수에 지정된 타입과 파라미터 개수등이 일치하지 않으면 에러가 발생한다.또한 클래스에 존재하지 않는 메서드를 호출할 때도 TS는 런타임전에 에러를 알려준다.프로퍼

any타입으로 받으면 value는 any타입이 된다.<>를 사용하면 함수를 실행할 때 파라미터를 넣어주는 것 처럼 type을 넣어줄 수 가 있다.정확히 <>안에 type을 넣어주면 좋지만 안 넣어줘도 자동으로 유추를 하게 된다.const는 입력한 값 자체가

yuJin의 타입은 Idol 인터페이스이다.Idol 인터페이스에 내용들을 yujin에서 구체화 해야 한다.partial타입은 서버에서 DB의 모델을 업데이트 할 때 많이 사용된다.original이 먼저 저장이 되고 updates는 그다음 저장이 되므로 updates 내

requiredDog는 에러가 나지 않는다. 왜냐하면 age, country가 optional이기 때문에 작성해도되고 안해도 되기 때문이다.반면에 requiredDog2는 name만 있을 시 에러가 난다.왜냐하면 required가 하는 것은 generic에다 넣은 ty

클래스 위에다가 데코레이터를 작성을 하면 파라미터로 데코레이팅 한 대상 클래스를 받아볼 수 있다.Idol 클래스의 데코레이터로 Test가 있다.Test라는 데코레이터가 실행이 되면서 Test 함수를 실행을 한다.이 때 constructor라는 파라미터에 Idol 클래스

Idol 클래스에 TestMethodDecorator가 데코레이터 되어 있다.그러면 const rose = new Idol('로제')를 선언하는 순간 데코레이터함수가 실행된다.그리고 rose.dance()를 하였을 때에는 데코레이터 함수인TestMethodDecorat

reflection metadata

reflection과 decorator는 주로 입력값 유효성 검사할 때 사용한다.그냥 sing입력받을 때 '신나게' '열정적으로'를 받도록 할 수 있다. 하지만 TS에서는 2개만 입력받을 수 있지만 JS에서는 아무값이든 다 받을 수 있다.그래서 if문으로 입력값을 체크

현재 사용하지 않는 기능으로 특정 관련 잇는 코드들을 하나의 모듈로 묶을 수 있는 방법이다.Idol클래스와 User클래스는 서로 연관이 없다. 그래서 모듈로 관리하고 싶다.Post namespace에서 같은 파일이여도 다른 namespace에 export되지 않는 것들

보면 export를 객체형태로 IdolModel과, number를 보내고 있다.하지만 interface인 ICat은 객체 형태로 보낼 수 없다. 그 이유는 인터페이스는 타입스크립트에 타입이기 때문이다.interface는 export default interface IC

타입을 추가로 한번 더 유추할 수 있는 기능Infer Keyword는 Condtional Type에서만 사용가능한 키워드다.즉 extends 키워드를 사용했을 때 extend 한 대상에서 타입을 한번 더 추론하는 역할지금 Flatten이라는 타입을 제너릭으로 받고 있다

유틸리티 타입(Pick)을 사용하는 예제를 알아보자이것을 코드로 나타내면 다음과 같을 것이다.상품을 인터페이스로 나타내어 서버에서 받아올 데이터 타입들을 일치시킨다.그리고 목록을 받아오니 배열로 받아주면 될 것이다.만약 목록 중 상세보기를 클릭했을 때에는 어떻게 될 것