TypeScript 학습

타입스크립트란 자바스크립트의 타입부분을 업그레이드해서 사용할수있는 언어 즉 자바스크립트의 대용품이다. 완전 다른 언어는 아니라 자바스크립트 문법 그대로 이용 가능한데 타입 문법을 업그레이드 해서 사용할 수 있다.js는 Dynamic Typing이 가능하기 때문에 위처럼

JS 문법 그대로 TS에서 사용가능하다. 위 내용들이 준비된후 코드를 작성하자.저번에 간단하게 학습했듯이 변수에 타입이 지정 가능하다. 이런식으로 변수에 타입을 지정하면 string타입만 이름이라는 변수에 들어갈수있다.만약 string값이 아닌 number값을 넣으려

문자 or 숫자 들어올수 있는 변수는 어떻게 만드나? 이런식으로 지정해주면 되는데 이걸 Union Type이라고 정한다. 타입을 2개 이상 합친 새로운 타입이다. Union Type 으로 지정을 하고 값을 넣게 되면 회원이라는것은 더 이상 number 또는 str

함수를 만들때도 타입 지정이 가능하다! ts에서는 변수를 만들면 타입을 지정하는것을 권유한다.이렇게 변수 let s; 라고만 선언해두면 any타입이 들어가게 되는데 전 블로그에서도 언급했듯이 any 타입은 ts를 안쓰겟다 라고 하는것과 동일하다.이런식으로 x 변수에 대

Type이 아직 하나로 확정되지 않았을 경우 Type Narrowing을 사용해야한다.이런식으로 if문을 사용하여 변수의 타입이 string이면 number이면 이라는 확실한 타입을 Narrowing해줘야한다. Narrowing 이라는 단어를 DeepL에 번역해보면 좁

타입이 너무 길고 복잡하면 변수에 담아서 사용할수 있다. type alias 만드는 법 이렇게 type이라는 문법에 내가 원하는 타입을 저장해 놓고 변수에 저장한 타입을 넣어주는 방식이다. 이렇게 타입키워드로 변수를 만드는것을 type alias이라고 한다. 번역하면

변수를 만들때는 let 이름 : string; 이런식으로 작성했었는데. 이보다 더 엄격한 타입을 지정할수있다.예를 들어 위 변수에 모든 문자가 아니라 정확히 내가 사전에 등록했던 문자만 들어올수있게 타입을 지정할수 있다.그런 엄격한 타입을 지정하는걸 Literal Ty

함수도 타입 지정이 가능하다고 배웠다. 변수의 타입 리턴값의 타입을 지정할수있는데 너무 길어지면 type alias 를 사용해서 넣을수 있다. 하지만 type alias에 함수 type을 저장해서 사용할수도 있다.위 이미지 처럼 사용할수있는데 type문법을 사용해서 변

자바스크립트의 원래 목적은 html 조작과 변경이다. 그래서 타입스크립트를 써도 html 조작이 가능한데 일반 js를 쓸때와는 다른 점이 존재한다. 그부분에 대해서 알아보도록 하자.알아보기 전 tsconfig.json 파일에 위 내용을 추가하자 strictNullChe

이번에는 객체지향문법에 대해 알아보자. 실용적인 용도로 사용가능한!어떠한 정보를 오브젝트 형식에 담을때 위 사진처럼 정리를 해준다. 하지만 내용이 비슷한 오브젝트를 여러개 만들면 코드가 복잡해지고 지저분해진다. 비슷한 오브젝트를 많이 만들일이 있다면 class를 만들어

지난 학습에서 class , prototype 에 대해 학습했다. ES6 문법에서는 위처럼 사용할수있는데 복사된 object에다가 기본속성 같은것을 채워넣고 싶으면 ES6에서는 constructor() 이라는 문법이 있는데 그 안에 넣고 싶은 내용을 넣어두면 사람1과

타입을 변수에 담아서 사용하고 싶을때는 type 키워드를 사용해서 타입변수를 생성했었다. object같은 경우에는 두가지 선택을 할수있다. type키워드를 사용해도 되고 interface라는 키워드를 사용해도 된다. 이런식으로 type키워드를 사용해도 상관없지만 아래

함수에 rest parameter타입 지정이 가능하다. 위 함수에서 변수를 받으려 하는 상황에서 몇개의 변수 즉 몇개의 파라미터가 들어올지 모르는 상황일때 변수를 무한이 a,b,c,이런식으로 붙이는게 아니라 ... 을 붙여주면 rest parameter가 되는것이다.하

Narrowing 하면서 코드를 구성하는것도 힘든데 특히 undefined 타입일 경우 처리하는것 복잡한 object 자료들 narrowing 하는것 이것들이 가장 잦고 귀찮다. 이것을 쉽게 하는 법을 알아보자.null & undefined 타입체크하는 경우가 매우

사용 빈도는 적지만 Never type 을 알아보자.function에 붙이는 return type으로 사용가능하다. 근데 좀 특이하다. 어떤 함수가 있을때 아래 조건을 만족해야한다. 조건1 ) 절대 return을 하지 않아야 한다. 조건2 ) 함수 실행이 끝나지 않아야

타입스크립트를 쓰면 자바스크립트에 없는 문법도 사용가능 하다.객체 지향 언어에서 제공하는 public , private , static , protected 이런 키워드를 사용가능한데 이걸 사용시의 장점은 객체지향으로 코드를 구성할때 일명 class를 많이 만들어서 코

잠깐 JS문법 시간을 가져보자.간혹 Class를 만들고 복사해서 또 다른 Class를 만들어야 할때가 있는데 그때 처음 부터 Class를 새로 만들던가 extends를 사용하면된다.이렇게 extends를 사용하면 User안에있는 내용이 그대로 복사외어 NewUser에

타입스크립트에서도 다른 파일에서 만든 타입변수를 다른 파일에서 사용하고 싶은 경우 js 의 import export문법 그대로 사용이 가능하다. 오른쪽에 있는 이름이라는 변수를 export를 통해서 내보내고 왼쪽 index.ts에서 사용할수 있다.이런식으로 타입도 ex

우리가 함수를 만들때 ( ) 이 부분에 파라미터를 입력한다. 그런데 TS를 사용하면 파라미터로 타입을 입력할수도 있다. < > 이부분에 집어 넣으면 된다. 위 코드가 있을때 a의 타입은 unknown으로 나올것이다. 이유는 x는 unknown으로 지정했기 때문이다

기존 프로젝트에 TS같은것을 도입하려면 무조건 따라 사용하지말고 이득을 따져보아야 한다. 프로젝트 사이즈가 큰가 협업시 다른 사람이 짠 코드를 참조할 일이 많은가 장기적으로 유지보수에 도움이 되는가 추후 팀원이 더 필요해도 인력수급이 쉽게 가능한다 팀원들 학습에 필요한

redux를 왜 사용하냐면! state를 한곳에서 관리할 수 있어서 컴포넌트들이 props없이 state를 다루기 쉽다. 수정방법을 미리 reducer라는 함수로 정의해놔서 state 수정시 발생하는 버그를 줄일 수 있다. 그 외엔 사용할 일이 없다 코드만 길어진

array 자료에 타입을 지정하고 싶으면 string\[] 이렇게 기입하라고 했다.하지만 보다 구체적으로 타입지정하고싶을 때가 있다."첫 자료는 무조건 string, 둘째 자료는 무조건 number인 array"이런 것도 가능하다. tuple 타입 쓰면 된다. tupl

코드를 짜다보면 외부 자바스크립트 파일을 이용하는 경우가 있다. import문법으로 가져가져다가 사용하면 되는데 안타깝게도 그 파일이 ts로 작성된게 아니라 js로 작성된 파일이면 무수한 에러가 기다리고 있을것이다. 왜냐 당연히 타입이 지정이 안되어 있기 때문이다. 예

declare 키워드를 배웠으면 이제 d.ts 파일도 이해가 갈것이다. 코드를 짜다보면 어디선 d.ts파일이 등장한다. 이 파일은 타입만 저장할 수 있는 파일형식이다. (그래서 defintion의 약자인 d가 들어감) 그리고 js로 컴파일 되지 않는다.그럼 어디에 사용

interface는 object 타입지정할 때 사용한다고 배웠다. 하지만 용도가 하나 더 있는데 class타입을 확인하고 싶을 때도 interface 문법도 사용할 수 있다. 근데 implements키워드도 필요하다.class를 하나 만들었다. class Car로부터

object 자료에 타입을 미리 만들어 주고 싶은데 다음 경우들 같을때 index signatures를 사용하면 편리하다.1\. object 자료에 어떤 속성들이 들어올 수 있는지 아직 모르는 경우2\. 타입지정할 속성이 너무 많은 경우즉 object 타입 지정을 한번

타입을 프로그래밍스럽게 만들수 있다. 가끔 object를 다른 타입으로 변환하고 싶을 때가 있다.모든 속성들에 문자가 들어오는 타입을 갑자기 숫자가 들어오도록 바꾸고 싶을때 말이다 그럴 땐 처음부터 타입을 다시 작성하는 것이 아니라 mapping을 이용하면 된다.key

타입만들 때 초보처럼 type Age = string 이렇게 하드코딩하는 법만 배워봤다. 근데 if 조건문처럼 " 조건에 따라서 이럴 경우 string , 저럴 경우 number " 이런 식으로 타입지정도 가능하다.하지만 자주 쓰는 내용은 아니기 때문에 이런게 있다고