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..

0. 들어가면서 Narrowing을 할 때 typeof 연산자를 많이 사용한다. 하지만 Narrowing을 해야 하는데, typeof 연산자 외에 다른 방법을 사용할 필요가 있을 경우도 있다. 1. in 연산자로 object 자료 Narrowing 파라미터로 Object가 2개 들어올 수 있다고 타입을 지정했을 때 사용할 수 있다. 예를 들어, 하나의 Object는 { a : 'Kim' }, 다른 하나의 Object는 { b : "Seo" } 이렇게 서로 다른 유니크한 속성을 가진다면 " if (이 파라미터가 a라는 속성을 안에 가지고 있냐) " 같은 Narrowing이 가능하다. if( 키값 in object 자료형 ) 방식으로 쓰면 된다. type Fish = { swim : string }; typ..

rest 파라미터에 타입지정 여러 개의 파라미터를 받기 위해서 사용하는 rest 파라미터에도 역시 타입을 지정할 수 있다. function addAll(...num : number[]){ console.log(num); } addAll(1,2,3,4,5); rest 파라미터는 항상 [] 안에 담겨오기 때문에 타입 지정도 array처럼 해주면 된다. Destructuring 문법에 타입 지정 마찬가지로 객체의 값을 쉽게 뺄 수 있게 해주는 Destructuring 문법도 타입을 지정할 수 있다. let person = { name : "abc", age: 13 } function consoleData({ name, age} :{name : string, age : number}){ console.log(n..

Object에서 쓸 수 있는 interface 문법 interface 문법을 쓰면 object 자료형의 타입을 편하게 지정할 수 있다. interface Square { color :string, width :number, } let 네모 :Square = { color : 'red', width : 100 } 1. 대문자로 작명하고, 2. { } 안에 타입을 명시해주는 방식이 전에 사용한 type alias 하고 용도랑 기능이 비슷해 보인다. 사실 똑같다. 그렇다면 interface와 type의 차이점은 무엇일까? extends 기능 interface는 class와 유사하게 extends 기능이 있다. interface Person { name :string; age :number } interface..