typescript
기본타입
// Boolean
let a:bollean = true;
// number
let b:number = 1;
// string
let c: string = "hello";
// 표현식도 포함가능
let fullName: string = `bilberry`;
let age: number = 999;
let sentence: string = `Hello, my name is ${ fullName }.
I'm ${ age + 1 } years old.`;
// array
let d:number[] = [1,2,3,4,5];
OR
// 제네릭 배열 타입
let d2:Array<number> = [1,2,3,4,5];
// tuple
// 요소의 타입과 개수가 고정된 배열을 표현 가능
let e:[string, number];
e = ["yes", 1]; // 성공
e = [1, "yes"]; // 에러
console.log(e[0].substring(1)); // 성공
console.log(e[1].substring(1)); // 에러, 'number'에는 'substring' ㄴㄴ
// 정해진 인덱스 외에 다른 인덱스에 있는 요소에 접근하면 에러 발생
e[3] = "world"; // 에러, '[string, number]' 타입에는 프로퍼티 '3'이 ㄴㄴ
console.log(e[5].toString()); // '[string, number]' 타입에는 프로퍼티 '5'가 ㄴㄴ
// enum
enum Color {Red, Green, Blue}
let f: Color = Color.Green;
// 기본적으로, enum은 0부터 시작하여 멤버들의 번호를 매김
// 멤버 중 하나의 값을 수동으로 설정하여 번호를 바꿀 수 있음
// 예를 들어, 위 예제를 0대신 1부터 시작해 번호를 매기도록 바꿀 수 있음
enum Color {Red = 1, Green, Blue}
let f: Color = Color.Green;
// 또는, 모든 값을 수동으로 설정 가능
enum Color {Red = 1, Green = 2, Blue = 4}
let f: Color = Color.Green;
// enum의 유용한 기능 중 하나는 매겨진 값을 사용해
// enum 멤버의 이름을 알아낼 수 있음
// 예를 들어, 위의 예제에서 2라는 값이
// 위의 어떤 Color enum 멤버와 매칭되는지 알 수 없을 때,
// 이에 일치하는 이름을 알아낼 수 있음
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
console.log(colorName); // 값이 2인 'Green'이 출력
// void
// void는 어떤 타입도 존재할 수 없음을 나타내기 때문에,
// void는 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰이는 것을 볼 수 있음
function g():void {
console.log(123);
}
// void를 타입 변수로 선언하는 것은 유용하지 않은데,
// 왜냐하면 그 변수에는 null 또는 undefined 만 할당할 수 있기 때문
let unusable: void = undefined;
unusable = null; // 성공
// null이랑 undefined
let h: undefined = undefined;
let i: null = null;
// 기본적으로 null과 undefined는 모든 타입들의 하위타입
// 그 말은 즉 number타입에 null 이나 undefined를 할당 가능
// 하지만 컴파일시에 --strictNullChecks을 사용하면
// null과 undefined는 오직 void 및 해당 유형에만 할당할 수 있음
// null, undefined 또는 다른 타입을 지정하고 싶다면 유니언 타입 사용
let i: string | undefined | null;
i = "Hello World";
i = null;
i = undefined;
i = 3; // 에러표현식이란 값으로 이행하는 임의의 유효한 코드 단위를 말합니다.
구문적으로 유효한 표현식은 모두 어떤 값으로 이행하지만, 개념적으로는 두 가지로 나뉩니다.
하나는 부수 효과가 있는(예시: 변수에 값을 할당) 표현식이고,
다른 하나는 평가하면 어떤 값으로 이행하는 표현식입니다.
x = 7은 앞의 범주에 포함됩니다.
이 표현식은 = 연산자를 사용해서 값 7을 x 변수에 할당합니다. 표현식 자체도 7로 평가됩니다.
3 + 4는 뒤쪽 범주로 들어갑니다.
이 표현식은 + 연산자를 사용해서 3과 4를 더하지만, 결과인 7을 변수에 할당하지는 않습니다.
Debouncing
연속으로 호출되는 함수들 중 마지막으로 호출된 함수만 실행되도록 하는 것
(만얀 유료API를 사용한다면 비용이 어마어마)
보통 사람들은 타자를 연달아 침
입력이 다 끝난 후에 요청을 보내면 됨
즉 타자를 칠 때(input 이벤트 발생)마다 타이머를 설정
n초동안 입력이 없으면 입력이 끝난 것으로 침
n초 이전에 타자 입력이 발생하면 이전 타이머는 취소하고 새로운 타이머를 다시 설정
Throttling
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
물론 ajax 검색은 디바운싱으로 처리하는 게 더 나아보임
하지만 중간 중간 검색 결과도 보여주고 싶다면 쓰로틀링도 괜찮은 옵션인 것 같슴
setTimeout 함수를 사용할 때, 넘기는 함수는 실행시키는 상태가 아닌 참조 상태로 넘겨야 함
실행시키는 상태로 전달할 경우, 함수 실행 결과가 전달된다. 즉, 리턴값이 전달되는데, 리턴값이 없을 경우 setTimeout은 스케줄링 대상을 찾지 못하기 때문에 코드가 다르게 동작할 것이다.
clearTimeout으로 스케줄링 취소하기
setTimeout을 호출하면 '타이머 식별자(timer identifier)'가 반환됩니다. 스케줄링을 취소하고 싶을 땐 이 식별자(아래 예시에서 timerId)를 사용하면 됩니다.
let timerId = setTimeout(() => alert("아무런 일도 일어나지 않습니다."), 1000);
alert(timerId); // 타이머 식별자
clearTimeout(timerId);
alert(timerId); // 위 타이머 식별자와 동일함 (취소 후에도 식별자의 값은 null이 되지 않습니다.)
예시를 실행하면 alert 창이 2개가 뜨는데, 이 얼럿 창을 통해 브라우저 환경에선 타이머 식별자가 숫자라는 걸 알 수 있습니다. 다른 호스트 환경에선 타이머 식별자가 숫자형 이외의 자료형일 수 있습니다. 참고로 Node.js에서 setTimeout을 실행하면 타이머 객체가 반환합니다.
