JS가 다른 언어들에 비해 변수를 선언할 때 변수의 타입을 지정하지 않고 let이나 const를 이용해서만 가능하다는 특징이 있다. 이게 처음에는 편한데, 규모가 점점 커지게 되면 타입을 지정하지 않는 점이 오히려 지뢰가 될 수 있다. 타입을 지정하지 않는 것을 동적 타입이라고 하는데, 오류 발견의 위험서이 커진다.
이를 보완해서 나온 언어가 '타입스크립트'다. 이는 정적 타입의 컴파일 언어라서 동적 타입의 인터프리터 언어인 js의 반대 성격을 가진다.
처음에는 코드 작성할 때 타입을 전부 명시해야해서 번거롭고 어려운데, 오류를 미리 확인할 수 있고 미리 타입을 결정할 수 있어 실행 속도가 매우 빠르다는 장점이 있다.
코드를 보면 위에가 바닐라 js, 밑에가 string으로 타입을 지정한 타입스크립트 형식이다.
a처럼 문자열로 지정했다가 숫자로 바꾸는 것이 향후 문제가 매우 많아 이를 사전에 방지하기 위해 타입스크립트에서는 타입 지정을 할 수 있다.
let a="hello";
a=123;
let aaa:string="hello";
aaa=123; //타입스크립트의 경우 이부분 에러->안전타입 종류
- 기본 타입
Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never 등등
let str: string = 'hi';
let num: number = 100;
let arr: Array = [1, 2, 3];
let arr2: number[] = [1, 2, 3];
//object는 여러 타입의 상위 타입이기 때문에 좋은 방법이 아님
let obj: object = {};
let obj2: { name: string, age: number} = {
name: 'hoho',
age: 22
};- 객체-인터페이스
이때 object는 여러 타입의 상위 타입이라 쓰면 안되는건 아닌데 적합하지 않다. 그래서 '나만의 타입' 즉 interface로 객체 타입을 만들어서 지정한다.
//따라서, 객체는 나만의 타입을 만들어서 작성하기
interface IProfile{
name:string,
age:number,
}
let profile:IProfile={name:"철수",age:13}
일반적으로 인터페이스 이름은 맨 앞에 대문자 I를 붙이고 그 뒤에 객체 이름을 넣는다. 이때 객체 변수는 인터페이스를 준수해야한다.(value 타입에 지정되지 않은 타입을 넣으면 안된다)
- 함수
const sum=(money1:number,money2:number,unit:string):string=>{
return money1+money2+unit
}
const result=sum(1000,2000,"원")함수는 위와 같이 매개변수의 타입지정, 리턴 타입 지정 모두 필요하다.
nubmer에 string을 더하면 string이므로 여기서는 리턴 타입이 string이다.
타입 추론
let aaa="안녕하세요"
aaa=3
//오류사실 이렇게만 해도 타입스크립트에서 오류가 발생한다. 타입을 지정하지 않았는데도 오류가 나다니.. 왜그럴까?
타입스크립트에서는 타입 추론을 지원한다. 그래서 명시하지 않아도 에러가 발생하지 않고 실행은 정상적으로 된다. 다만 eslint로 코드를 검사할 때 문제가 되고 위험 가능성이 없는 좋은 코드를 작성하기 위해 타입에 대해 이해하고 타입을 지정하는 것은 중요하다.
Event 타입
event는 타입을 리액트에서 제공해준다.
예를 들어 input value가 변하는 이벤트 핸들러 함수에 대해 이벤트 타입을 지정해야 할 경우 매개변수 event뒤에 ChangeEvent를 붙인다.
const onHandler=(event:ChangeEvent<HTMLInputElement>)=>{
}