봉보로봉봉

필요한 패키지를 설치한다. npm i typescript @type/node @type/react @type/react-dom @type/react-router-dom // jest도 사용한다면 추가한다. npm i typescript @type/node @type/react @type/react-dom @type/react-router-dom @type/jest 파일 확장자를 변경한다. .js => .ts .jsx => .tsx tsx로 변경한 파일부터 타입 스크립트를 얹어준다. interface를 선언하여 props에 type을 정해주거나 generic을 사용해가며 에러들을 해결해준다. ref.current 에러 해결하기 jsx를 tsx로 파일 속성을 변경하면 e와 ref.current에 빨간 줄이 ..

keyof keyof를 사용하면 인터페이스의 key들을 가져올수있다. interface User { name : string; age : number; hobby : string; gender : 'm' | 'f' | 'etc'; } type Userkeys = keyof User; // name, age, hobby, gender 그리고 이렇게 사용할 수 있다. interface User { name : string; age : number; hobby : string; gender : 'm' | 'f' | 'etc'; } type Userkeys = keyof User; // Userkeys에 없기때문에 에러 const uk1 : Userkeys = ''; // Userkeys에 있기때문에 가능 co..

이렇게 함수가 인자로 받는 타입이 적으면 하나하나 적어 줄 수 있겠지만, function getSize(arr : number[] | string[]) : number { return arr.length } const arr1 = [1,2,3] const arr2 = ['1','2','3'] getSize(arr1) getSize(arr2) 여러개라면 하나하나 적어주기도 힘들고 코드가 길어져 가독성이 떨어질 것이다. function getSize(arr : number[] | string[] | boolean[] | object[]) : number { return arr.length } const arr1 = [1,2,3] const arr2 = ['1','2','3'] const arr3 = [tru..

클래스를 이렇게 선언해주면 될 것 같지만 this.color가 없다고 에러가 난다. class Car { constructor(color : string){ // 에러 this.color = color; } start() { console.log('start') } } 그럴 때는 멤버변수를 선언해주면 된다. class Car { color : string; constructor(color : string){ this.color = color; } start() { console.log('start') } } 접근 제한자나 readonly 키워드를 사용해 멤버 변수를 선언하지 않는 다른 방법도 있다. // public class Car { constructor(public color : string){ t..

이렇게 선언했을 때 user1은 타입이 Mike가 되고 user2는 string이 된다. const user1 = 'Mike'; let user2 = 'Tom'; 그래서 user2에 숫자를 할당하려고 하면 에러를 띄운다. 타입스크립트가 user2는 string이라고 추론했기 때문이다. const user1 = 'Mike'; let user2 = 'Tom'; // 에러 user2 = 1; 여러 개를 쓰고 싶을 때는 명시적으로 타입을 정해주면 된다. const user1 = 'Mike'; let user2 : string | number = 'Tom'; // 가능 user2 = 1; 리터럴 타입 리터럴 타입을 사용하면 원하는 값만 들어가게 할 수 있다. type을 선언하고 이용하면 된다. 그럼 해당 타입에서..

함수 인자의 타입 함수의 인자도 타입을 정해줄 수 있으며 ?를 사용해 옵션을 넣어줄 수 도 있다. 이렇게 적으면 return 값을 적지않아도 타입스크립트가 알아서 string으로 추론해준다. function sayHello(name? : string) { return `Hello ${name || 'world'}` } 위 함수는 이렇게 쓸 수도 있다. function sayHello(name = 'world') { return `Hello ${name}` } 인자를 여러개 받을 때도 옵션으로 넣어 줄 수 있다. function sayHello(name : string, age? : number) { if (age !== undefined) { return `Hello ${name}. you are ${a..

프로퍼티에 타입을 정해서 객체를 정의하고자 할때 인터페이스를 사용한다. 인터페이스에서 정해준 타입이 아닌 값을 넣어주려고 해도 에러가 나고, 인터페이스에 있는 모든 프로퍼티를 다 넣어주지 않아도 에러가 난다. interface User { name : string, age : number } let person : User = { name : 'mike', age : 60 } interface User { name : string, age : number } // 에러 let person1 : User = { name : 'mike', age : '60살' } // 에러 let person2 : User = { name : 'mike', } interface외에 새로운 속성을 추가하려고 하면 에러가 발생..

타입스크립트 플레이그라운드 타입 정해주기 타입은 : 을 사용해서 옆에 자료형을 적어주면 된다. 배열은 타입을 정해주는 2가지 방법이 있다. let name : string = 'bong'; let num : number = 1; let numArr : Array = [1, 2, 3]; // or let numArr : number[] = [1, 2, 3]; 튜플 (Tuple) 배열의 형태와 같지만 순서에 따라 타입을 정해 줄 수 있다. let person[string, number]; // 가능 person = ['bong', 1]; // 불가능 person = [1, 'bong']; void 함수에서 아무것도 반환하지 않을 때 사용 function sayHello () : void { console.l..