반응형
회사에서 다음 프로젝트로 리액트를 사용하기로 했는데... 오잉 타입스크립트를 함께 사용한다.
타입스크립트가 무엇인지는 5~6년 전에 얕게 흩어보아 잘알고 있다.
리액트에서 사용할 때 큰 문제가 없도록 간단하게 공부하고 메모를 남긴다.
1. Class
티스트토리 코딩 첨부하기에 TypeScript가 생기다니 이런 좋은일이~~~
자바와 별반 다르지 않다. 다만 this 를 반드시 써야 에러가 안난다.
interface IUser{
name:string;
age:number;
sayHello:()=> string; //인수 없이 문자열 반환
}
class User implements IUser{
name: string;
age: number;
constructor(){
this.name = '';
this.age = 0;
}
sayHello(): string {
return `안녕하세요 저는 ${this.name} 이고 나이는 ${this.age} 입니다.`;
}
}
const user = new User();
user.name = 'Hana';
user.age = 30;
console.log(user.sayHello());
2. Enum 타입 열거형
Enum 역시 자바와 유사하다.
수치 기반 이외에 문자열 기반의 Enum을 사용할 때는 각 멤버를 특정한 문자열의 상수로 초기화해야 한다.
enum Direction2{
up,
Down,
Left,
Right
}
let direction: Direction2 = Direction2.Left;
//2 라는 숫자가 출력된다.
console.log(direction);
//문자사용시는 상수를 초기화한다.
enum Direction{
up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right ='RIGHT'
}
// 예를 들어, API의 파라미터로 문자열이 전달된 경우를 가정한다.
const value = 'DOWN';
// 문자열에서 Enum 타입으로 변환한다.
const enumValue = value as Direction;
if(enumValue === Direction.Down){
console.log('Down is selected');
}
반응형
'Web Front 개발공부 > React.js' 카테고리의 다른 글
컴포넌트 props 간단예제 (0) | 2024.07.14 |
---|---|
타입스크립트 배열과 제네릭 (1) | 2024.07.14 |
리액트 타입스크립트 다국어 설정 i18next (0) | 2024.06.25 |
React Context 사용해보기 (0) | 2024.06.01 |
리액트 훅 , 생명주기 (0) | 2024.05.25 |
댓글