TypeScript의 목적, 사용법에 대해서 알아보자.
자바스크립트에 타입을 부여한 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 변환해주어야한다.
//js코드
function sum(a, b) {
return a + b;
}
sum('10', '20') //1020
//ts코드
function sum(a: number, b: number) {
return a + b;
}
let total = sum('10', '20') //Error: '10'은 number에 할당될 수 없습니다.
브라우저에서 바로 실행시키면 ts파일을 인식하지못하기때문에 js파일로 컴파일하는 과정이 필요하다.
//TS 문자
let str: string = 'hello';
// TS 숫자
let num: number = 10;
// TS 배열
let arr: Array<number> = [1,2,3];
let fruit: Array<string> = ['banana', 'orange'];
// or
let items: number[] = [1,2,3];
// TS 토플
let info: [string, number] = ['mong', 13];
// TS 객체
let person: object = { name: "Jessy", age: 30 };
let person2: { name: string; age: number } = {
name: "Merry",
age: 20,
};
//TS Boolean값
let show: boolean = true;
any
는 단어 의미 그대로 모든 타입에 대해서 허용한다.void
는 변수에는 undefined와 null만 할당하고, 값을 반환하지 않는 함수의 반환 유형으로 사용된다.enum
은 특정 값(상수)들의 집합을 의미한다. // TS any
let list: any[] = [1, true, "sky"];
list[1] = 100;
// TS void
function deleteTodo(index: number):void {
todoItems.splice(index, 1);
}
// TS enum
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;
//인덱스로 접근
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers[0];
// 함수의 파라미터에 타입을 정의하는 방식
function add(a: number, b: number) {
return a + b;
}
add(1, 2);
// 함수의 반환 값에 타입을 정의하는 방식
function sum(): number {
return 10;
}
//함수에 타입을 정의하는 방식
function add2(a: number, b: number): number {
return a + b;
}
function throwError(errorMsg: string): never {
throw new Error(errorMsg);
}
function keepProcessing(): never {
while (true) {
console.log('I always does something and never ends.')
}
}
?
를 이용해 표현한다.//함수의 옵셔널 파라미터
function log(a: string, b?: string) {}
log("hello world");
log("hello ts", "hi");