프로젝트를 진행하다 보면 외부 자바스크립트 파일을 이용하는 경우가 있다. import 문법으로 가져와 사용하면 되는데, 타입스크립트로 작성된 파일이 아닌, 자바스크립트로 작성된 파일이라면 타입 지정 문제로 에러가 발생할 수 있다. // data.js let a = 10; let b = { name : 'kim' } // index.js console.log(a + 1); 일반적인 경우라면 index.html 역할을 하는 곳에 두 파일을 첨부하면 된다. (index.html) // index.ts를 변환시킨 js 파일 콘솔창으로는 a + 1이 11로 잘 나오지만 타입스크립트 파일 내에서는 a가 정의되어 있지 않다는 에러가 발생한다. 타입스크립트 입장에서는 a라는 변수를 import 한 적이 없기 때문에 에..

Tuple Type? Tuple Type은 array에 붙일 수 있는 타입인데, 자료의 위치까지 정확하게 지정할 수 있는 타입이다. let anything : [string, boolean]; anything = ['test', true]; [] 괄호 안에 타입을 적으면 Tuple Type이 된다. type Num = [number, number?, number?]; let num1 :Num = [10]; let num2 :Num = [10,20]; let num3 :Num = [10,20,30]; Tuple 안에서도 물음표를 사용해서 옵션이라고 표현을 할 수 있다. type Num = [number, number?, number]; 하지만 물음표 옵션은 제일 마지막부터 순차적으로 붙일 수 있으며, 중간..

state와 reducer 만들 때 타입 지정 import { Provider } from 'react-redux'; import { createStore } from 'redux'; const 초기값 = { count: 0 }; function reducer(state = 초기값, action) { if (action.type === '증가') { return { count : state.count + 1 } } else if (action.type === '감소'){ return { count : state.count - 1 } } else { return initialState } } const store = createStore(reducer); ReactDOM.render( , document...

1. React에 TypeScript 추가하기 신규 프로젝트 npx create-react-app 프로젝트명 --template typescript 프로젝트를 만들 때 TypeScript를 자동으로 세팅해주는 명령어이다. 기존 create-react-app에 --template typescript 만 추가된 명령어다. 기존 프로젝트 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 패키지를 다운받고 js 파일을 ts, jsx 파일을 tsx 파일로 변경하고 프로젝트를 진행하면 된다. 하지만 파일을 변경하고 수정하는 작업이 오래걸려서 가능하면 신규 프로젝트를 만드는 방식이 안전하다. 2. React에서 사용하..

function func(x :unknown[]) { return x[0]; } let a = func([4,2]); console.log(a); a를 출력하면 4가 출력될 것이다. 그렇다면 a의 타입은 뭘까? a의 타입은 number 타입이 아닌, unknown 타입이다. 파라미터의 타입이 unknown[] 이기 때문에 unknown 타입이 된다. function func(x :unknown[]) { return x[0]; } let a = func([4,2]); console.log(a + 1); 또한 이렇게 연산할 경우에도 에러가 난다. 즉, 함수의 return 타입 지정을 number로 지정하기 전까지는 number타입으로 변하지 않는다. 그런데, 타입스크립트를 사용하면 파라미터로 타입을 입력할 ..

Protected private와 비슷한 키워드로, private는 자신의 class {} 안에서만 사용과 수정이 가능했다면, protected는 자신의 class {} 와 extends로 복사한 클래스까지 사용과 수정이 가능하다. class User { protected x = 10; } class NewUser extends User { addX(){ this.x = 20; } } User를 extends 하는 NewUser에서 x는 가져다가 사용할 때, x가 private 속성일 경우 에러가 나지만, x가 protected 속성일 경우엔 에러가 나지 않는다. class를 여러개 만들 때 class 끼리 공유할 수 있는 속성을 만들 때는 protected, 자신 class안에서만 사용할 수 있는 속성..

타입스크립트는 class 안에서 public & private 키워드를 사용할 수 있다. Java를 공부한 사람이라면 친숙한 키워드일 것이다. 그 키워드가 맞다. Public class User { public name: string; constructor(){ this.name = 'kim' } } let user = new User(); user.name = "Seo"; public 키워드가 붙은 속성은 자식 object들이 마음대로 사용과 수정이 가능하다. 사실 모든 class의 속성은 기본적으로 public이 붙어있다. 즉, 굳이 키워드를 넣지 않아도 name은 public 키워드가 붙어있다고 생각하면 된다. Private class User { public name :string; private..

Never Type? 함수에 붙이는 return type으로 사용을 할 수 있다. function func(): never { // ... } never type은 사용할 수 있는 조건이 특이한데, 함수가 절대 return을 하지 않아야 한다. 함수 실행이 끝나지 않아야 한다. ( 즉, endpoint가 없어야 한다. ) 두 조건이 모두 충족되어야 사용할 수 있는 타입이다. ※ 사실 같은 소리로 조건 2가 맞으면 1도 맞다... function func() { console.log("func"); } 그래서 일반적인 함수들에는 never를 붙일 수 없다. 함수가 끝나지 않는 함수여야 하는데, console을 출력 후 함수가 끝나버리기 때문이다. function func() :never { while(tr..