참고
TypeScript
NOTE
javaScript를 기반으로 하는 프로그래밍 언어이며, 정적타이핑을 지원한다!
•
TypeScript는 브라우저에서 실행되지 않으므로, JavaScirpt로 컴파일 해야하고 컴파일 과정에서 모든 유형주석이 제거된다.
◦
설치 : npm install || yarn add typescript
◦
컴파일러 호출 : tsc || npx tsc(로컬 설치시)
타입 선언
NOTE
타입 | 특징 |
Boolean | 단순한 참(true)/거짓(false) 값 |
Number | 모든 부동 소수점 값을 사용 가능 |
String | 작은따옴표('), 큰따옴표(") 뿐만 아니라 ES6의 템플릿 문자열도 지원 |
Array | 순차적으로 값을 가지는 일반 배열로 string[], Array<string> 두가지 방법으로 선언 |
Tuple | 정해진 타입의 고정된 길이(length) 배열을 표현, 각 요소의 타입이 지정되어 있는 배열 형식 |
Enum | 열거형, 숫자 혹은 문자열 값 집합에 이름(Member)을 부여, 값의 종류가 일정한 범위로 정해져 있는 경우 유용, 기본적으로 0부터 시작하며 값은 1씩 증가, 특정 값들의 집합을 의미하는 자료형 |
Any | 모든 타입, 일반적인 자바스크립트 변수와 동일하게 어떤 타입의 값도 할당 가능, 외부 자원을 활용해 개발할 때 불가피하게 타입을 단언할 수 없는 경우, 유용 |
Unknown | 알 수 없는 타입, Unknown에는 어떤 타입의 값도 할당할 수 있지만, Unknown을 다른 타입에는 할당할 수 없음 |
Object | typeof 연산자가 "object"로 반환하는 모든 타입, 여러 타입의 상위 타입이기 때문에 그다지 유용하지 않음, 반복적인 사용을 원하는 경우, interface나 type을 사용하는 것을 추천 |
Null과 Undefined | 모든 타입의 하위 타입, 서로의 타입에도 할당 가능 |
Void | 일반적으로 값을 반환하지 않는 함수에서 사용 |
Never | 절대 발생하지 않을 값, 어떠한 타입도 적용할 수 없음 |
Union | 2개 이상의 타입을 허용하는 경우 ❗️ Union 타입 장점 - any 보다는 명시적임 : 타입가드시 메소드 등장 |
Intersection | 2개 이상의 타입을 조합하는 경우 |
Function | 화살표 함수를 이용해 타입을 지정 |
유니온 타입
NOTE
파이프 기호(|)를 이용하여 다른 유형을 추가할 수 있다!
// Union 타입
let course2: string | number = "React - The Complete Guide"
course2 = 12341; // 유니온 타입으로 지정되서 숫자도 들어감
TypeScript
복사
타입 추론
NOTE
명시적으로 타입 선언이 되어있지 않은 경우, 타입스크립트는 타입을 추론한다!
// 예시
let age = 12;
age = "12"; // => Error! 타입을 추론해서 number타입을 사용했기때문에 오류발생
let age: number = 12; // => 중복이기 때문에 불필요하게 유형을 지정할 필요없다
TypeScript
복사
age에 12를 할당해서 자동으로 number타입으로 인식함
타입 가드
NOTE
특정 타입으로 타입의 범위를 좁혀나가는 과정
function isNumber(val: string | number): val is number {
return typeof val === 'number';
}
TypeScript
복사
NAME is TYPE 형태의 타입 술부(Predicate)를 반환 타입으로 명시
타입 별칭
NOTE
type 키워드를 사용하여 타입의 새로운 이름을 생성한다.
// type 키워드 사용
type Person = {
name: string;
age: number;
};
let person2: Person = {
name: 'Max',
age: 32
}
TypeScript
복사
타입을 직접 정의할수도 있다!
인터페이스
NOTE
여러 객체를 정의하는 일종의 규칙이며 구조이다!
interface IUser {
name: string,
age: number,
isAdult: boolean
}
TypeScript
복사
타입 별칭과 인터페이스 차이점
•
타입의 확장(extends) 가능 / 불가능 여부
•
인터페이스는 확장이 가능한데, 타입 별칭은 확장이 불가능
•
따라서, 가능한 type보다는 interface로 선언해서 사용하는 것을 추천!
제네릭 타입
NOTE
파라미터의 타입이 정해지지 않은 경우 제네릭을 사용해 담기는 값에 따라 유추가 가능하다!
function insertAtBeginning<T>(array: T[], value: T){
const newArray = [value, ...array];
return newArray;
}
const demoArray = [1, 2, 3];
const updatedArray = insertAtBeginning(demoArray, -1); // [-1,1,2,3]
const stringArray = insertAtBeginning(['a','b','c'], 'd');
stringArray[0].split('');
TypeScript
복사
Optional Parameter
NOTE
옵셔널 타입을 지정하는 방식!
!
•
앞의 값이 확실히 null이나 undefined가 아니라는걸 알린다.
?
function makeUser2(name: stirng, age?: number) {
console.log(name);
if (age) {
console.log(age);
}
}
makeUser2('deemmun', 100) // deemmun 100
makeUser2('deemmun') // deemmun
TypeScript
복사
•
| undefined 를 추가하는 것과 동일
React with TypeScript
NOTE
이제 React에서 TypeScrip를 사용해보자!
•
설치
◦
npx create-react-app 프로젝트 이름 --template typescript
•
React에서는 jsx문법을 사용하기 때문에 타입스크립트를 사용할 때 확장명을 ts가 아닌, tsx로 사용한다.( 컴포넌트를 생성하는게 아니라면 ts로 작성해도 된다.)
React.FC
NOTE
props의 타입을 Generic으로 넣어서 사용한다!
•
React.FC를 사용하면 props에 기본적으로 children이 들어가있고, 컴포넌트의 defaultProps, propTypes, contextType를 설정 할 때 자동완성이 가능하다!
const NewTodo: React.FC<{ onAddTodo: (text: string) => void }> = (props) => {
const todoTextInputRef = useRef<HTMLInputElement>(null);
const submitHandler = (event: React.FormEvent) => {
event.preventDefault();
const enteredText = todoTextInputRef.current!.value
if (enteredText.trim().length === 0) {
// throw an error
return;
}
props.onAddTodo(enteredText);
}
return (<form onSubmit={submitHandler} className={classes.form}>
<label htmlFor='text'>Todo text</label>
<input type="text" id='text' ref={todoTextInputRef}/>
<button>Add Todo</button>
</form>
)
}
export default NewTodo;
TypeScript
복사
제네릭 타입에 실제로 들어오는 타입을 적어준다!