프론트엔드/TypeScript
TypeScript 사용 이유와 기본 타입
alswlfl
2023. 1. 3. 13:54
타입스크립트: js+type 문법(엄격한 타입 체크)
→ 자바스크립트 업그레이드 언어(문법은 유사함)
[장점]
- 엄격한 타입 체크로 자바스크립트의 문제점 해결
- 에러 메시지가 명확함(어디서 오류가 생겼는지, 오타교정)
function sum(a: number, b: number) {
return a + b;
}
[특징]
- 우리가 사용하는 브라우저들은 TS를 이해하지 못하기 때문에, TS를 JS로 변환해야 함
- JS(동적언어): 런타임에 타입 결정/오류 발견
- TS(정적언어): 컴파일 타임에 타입 결정/오류발견
- 도저히 무슨 타입인지 모르는 경우에는 any를 사용하지만, 가급적이면 사용하지 않는 것을 권장
- 타입명시방법: 변수:타입
기본 타입
- 배열 사용 시
function showItem(arr:number[]){
arr.forEach((item)=>{
console.log(item);
});
}
showItem([1,2,3])
- 기본 자료형
let age:number=30;
let isAudlt:boolean=true;
let a:number[]=[1,2,3]
let a2:Array<number>=[1,2,3];
let week1:string[]=['mon','tue','wed'];
let week2:Array<String>=['mon','tue','wed'];
- 튜플
let b:[string, number];
b=['z',1].
// b=[1,'z']; 오류
b[0].toLowerCase();
// b[1].toLowerCase(); 오류
- void, never
function sayHello():void{
console.log('hello');
}
//void는 함수에서 아무것도 반환하지 않는 경우 사용
function showError():never{
throw new Error();
}
function inFloop():never{
while(true){
//do something...
}
}
// never는 에러를 반환하거나 영원히 끝나지 않는 함수에서 사용
- enum
// 비슷한 값들끼리 묶어줌, 자바스크립트에는 없는 타입
enum Os{
Window,
Ios,
Android
}
//enum에 수동으로 값을 주지 않는 경우, 자동으로 0부터 할당
//enum에 숫자 입력하면 양방향 컴파일 가능
//enum에 문자형을 입력하면 단방향으로만 컴파일 가능
//특정 값만 입력할 수 있도록 강조하고 싶을 경우 사용
- null, undefined
let a:null=null;
let b:undefined=undefined;