typescript 핸드북 학습내용 정리
https://typescript-kr.github.io/pages/the-handbook.html
기본타입
불리언 (Boolean)
참/거짓(true/false)
let isDone: boolean = false;
숫자 (Number)
모든 숫자는 부동 소수 값임.
let decimal: number = 6; // 10진수
let hex: number = 0xf00d; // 16진수
let binary: number = 0b1010; //2진수
let octal: number = 0o744; // 8진수
문자열 (String)
let color: string = "blue";
color = 'red';
템플릿 문자열
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;
배열 (Array)
배열 요소들을 나타내는 타입 뒤에 []를 쓰는 방법
let list: number[] = [1, 2, 3];
제네릭 배열 타입을 쓰는 방법. Array<elemType>:
let list: Array<number> = [1, 2, 3];
튜플 (Tuple)
튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있음.
단 요소들의 타입이 모두 같을 필요는 없음.
number, string 이 쌍으로 있는 값을 나타내기
// 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 성공
// 잘못된 초기화
x = [10, "hello"]; // 오류
정해진 인덱스에 위치한 요소에 접근하면 해당 타입이 나타납니다.
console.log(x[0].substring(1)); // 성공
console.log(x[1].substring(1)); // 오류, 'number'에는 'substring' 이 없습니다.
정해진 인덱스 외에 다른 인덱스에 있는 요소에 접근하면, 오류가 발생하며 실패합니다.
x[3] = "world"; // 오류, '[string, number]' 타입에는 프로퍼티 '3'이 없습니다.
console.log(x[5].toString()); // '[string, number]' 타입에는 프로퍼티 '5'가 없습니다.
열거 (Enum)
enum의 값은 문자열로 쓰자.
참고 : https://techblog.woowahan.com/9804/
enum Color {
Red = 'F00',
Green = '0F0',
Blue = '00F'}
Any
쓰지말자
Unknown
any 타입의 값은 어느 타입의 변수에도 할당될 수 있으나, unknown 타입의 값은 any와 unknown 타입을 제외한 타입의 변수에는 할당이 불가능하다.
let notSure: unknown;
notSure = 1;
notSure = "maybe a string instead";
// any type에는 unknown 타입 할당 가능
let anyType: any;
anyType = notSure;
// any, unknown 이외의 type에는 unknown 타입 할당 불가능
let numberType: number;
numberType = notSure; // compile error!
unknown을 사용해야 할 상황
들어오는 값의 타입을 모를때
const isNil = (param: unknown): boolean => param === null || param === undefined
여러 타입을 받아서 처리하는 경우
function prettyPrint(x: unknown): string {
if (Array.isArray(x)) {
return "[" + x.map(prettyPrint).join(", ") + "]"
}
if (typeof x === "string") {
return `"${x}"`
}
if (typeof x === "number") {
return String(x)
}
return "etc."
}
Void
함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰임
function warnUser(): void {
console.log("This is my warning message");
}
void를 타입 변수를 선언하는 것은 유용하지 않은데, 왜냐하면 그 변수에는 null 또는 undefined 만 할당할 수 있기 때문
let unusable: void = undefined;
unusable = null; // 성공 `--strictNullChecks` 을 사용하지 않을때만
Null and Undefined
TypeScript는 undefined 과 null 둘 다 각각 자신의 타입 이름으로 undefined , null로 사용함
// 이 밖에 이 변수들에 할당할 수 있는 값이 없습니다!
let u: undefined = undefined;
let n: null = null;
-
기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입니다. 이건, null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 의미함.
-
–strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능합니다. (예외적으로 undefined는 void에 할당 가능합니다) 이건 많은 일반적인 에러를 방지하는 데 도움을 줍니다.
이 경우, string 또는 null 또는 undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefined를 사용할 수 있음.
🤔 기본적으로 쓴다 생각해야할듯
Never
- never 타입은 절대 발생할 수 없는 타입임.
- 예를 들어, never는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰임.
- 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 될 수 있음.
never타입은 모든 타입에 할당 가능한 하위 타입입니다. 하지만 어떤 타입도 never에 할당할 수 있거나, 하위 타입이 아닙니다.(never 자신은 제외) 심지어 any 도 never에 할당할 수 없습니다.
//never를 반환하는 몇 가지 예제
// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
throw new Error(message);
}
// 반환 타입이 never로 추론된다.
function fail() {
return error("Something failed");
}
// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
while (true) {
}
}
객체 (Object)
- object는 원시 타입이 아닌 타입.
- 예를 들어, number, string, boolean, bigint, symbol, null, 또는 undefined 가 아닌 나머지를 의미합니다.
- object 타입을 쓰면, Object.create 같은 API 가 더 잘 나타남
declare function create(o: object | null): void;
create({ prop: 0 }); // 성공
create(null); // 성공
create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류
타입 단언 (Type assertions)
- “angle-bracket” 문법
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
- as 문법
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
angle-bracket은 jsx랑 호환안됨. 왠만하면 as를 쓰셈.
let에 관하여
var말고 let 쓰셈 😲
'공부공부 > TS' 카테고리의 다른 글
[typescript 핸드북] 06. 열거형 (0) | 2024.02.19 |
---|---|
[typescript 핸드북] 05. 유니언과 교차 타입 (0) | 2024.02.19 |
[typescript 핸드북] 04. 리터럴 타입 (0) | 2024.02.19 |
[typescript 핸드북] 03. 함수 (0) | 2024.02.19 |
[typescript 핸드북] 02. 인터페이스 (0) | 2024.02.19 |