[TypeScript] void와 never
·
React/TypeScript
void 타입void 타입은 아무런 값도 없음을 의미하는 타입임.보통은 다음과 같이 아무런 값도 반환하지 않는 함수의 반환값 타입을 정의할 때 사용함function func1(): void { console.log("hello");}물론 다음과 같이 변수의 타입으로도 void타입을 지정할 수 있음.그러나 void타입의 변수에는 undefined 이외의 다른 타입의 값은 담을 수 없음let a: void;a = undefined;그런데 tsconfig.json에 엄격한 null 검사 (strictNullChecks)옵션을 해제(false)로 설정하면 void타입의 변수에 null값도 담을 수 있게됨.// strictNullChecks: false 일 경우let a: void;a = undefined;a =..
[TypeScript] any와 unknown
·
React/TypeScript
📌 any와 unknownany 타입any 타입은 타입스크립으에서만 제공되는 특별한 타입으로 타입 검사를 받지않는 특수한 치트키 타입임.예를 들어 아주 범용적으로 사용되어야 하는 변수가 있다고 가정을 해보겠음let anyVar = 10;anyVar = "hello"; // 오류 발생변수 anyVar는 number타입의 값 10으로 초기화 했지만 이후에 string타입의 값을 넣는다고 가정을 했음.타입스크립트에서는 변수의 타입이 변수를 초기화할 때 초기화 하는 값을 기준으로 추론하기 때문에 number → string이 될 수가 없음.이럴 때 any를 사용함.let anyVar: any = 10;anyVar = "hello";anyVar = true;anyVar = {};anyVar.toUpperCase..
[TypeScript] 열거형 타입(enum)
·
React/TypeScript
📌 열거형 타입(enum)열거형 타입은 자바스크립트에는 존재하지 않고 타입스크립트에서만 사용할 수 있는 특별한 타입임.열거형은 다음과 같이 여러 개의 값을 나열하는 용도로 사용함enum Role { ADMIN, USER, GUEST,}3개의 등급 ADMIN, USER, GUEST를 나열한 열거형 타입을 하나 만들었음.enum의 각 멤버에는 다음과 같이 숫자를 할당할 수 있음enum Role { ADMIN = 0, USER = 1, GUEST = 2,}또 다음과 같이 enum의 멤버들의 값으로도 활용할 수 있음// enum 타입// 여러 가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입enum Role { ADMIN = 0, USER = 1, GUEST = 2,}const user1 = { nam..
[TypeScript] 타입 별칭과 인덱스 시그니처
·
React/TypeScript
📌 타입 별칭과 인덱스 시그니처타입 별칭(Type Alias)타입 별칭을 이용하면 다음과 같이 변수를 선언하듯 타입을 별도로 정의할 수 있음// 타입 별칭type User = { id: number; name: string; nickname: string; brith: string; bio: string; location: string;};type 타입이름 = 타입형태로 타입을 정의함. 위 코드 타입 이름으로는 User 그리고 타입으로는 여러 개의 프로퍼티가 있는 객체 타입을 정의했음.이렇게 만든 타입 별칭은 다음과 같이 변수의 타입을 정의할 때 타입 주석과 함께 사용할 수 있음type User = { id: number; name: string; nickname: string; birth: s..
[TypeScript] 객체
·
React/TypeScript
📌 객체object로 정의하기let user = { id: 1, name: "이도서",};user의 타입을 객체를 의미하는 object로 정의해보겠음let user: object = { id: 1, name: "이도서",};이렇게 하면 타입은 잘 정의가 됐음. 근데 문제가 생김let user: object = { id: 1, name: "이도서",};user.id;위 코드의 user.id 처럼 점 표기법으로 객체의 특정 프로퍼티에 접근하려고 하면 오류가 발생함⇒ 오류 메시지를 확인해보면 다음과 같이 object 타입에 id프로퍼티가 없다라고 뜸그럼 어떻게 해야할까?객체 리터럴 타입객체 리터럴 타입을 이용하면 해결됨let user: { id: number; name: string;} = { id..
[TypeScript] 배열과 튜플
·
React/TypeScript
📌 배열과 튜플배열타입스크립트에서는 다음과 같이 배열 타입을 정의함let numArr: number[] = [1, 2, 3];배열을 저장하는 변수의 이름 뒤에 타입 주석의 시작을 의미하는 :을 작성한다음 배열요소타입[]형식으로 배열 타입을 정의함.let strArr: string[] = ["hello", "im", "doseo"];배열 요소의 타입이 string이므로 이번에는 string[]으로 문자열 배열 타입을 정의 해봤음let boolArr: Arr = [true, false];Array형태로도 배열의 타입을 정의할 수 있음.이렇게 와 함께 타입을 작성하는 문법을 타입스크립트에서는 “제네릭”이라고 부름다양한 타입 요소를 갖는 배열 타입 정의하기만약 다음과 같이 다양한 배열 요소를 갖는 배열 타입을..
[TypeScript] 원시타입과 리터럴 타입
·
React/TypeScript
📌 원시타입과 리터럴 타입원시 타입(Primitive Type)은 동시에 한개의 값만 저장할 수 있는 타입들을 말함.예를 들어 원시 타입이 아닌 배열이나 객체 같은 비 원시 타입들은 동시에 여러개의 값들을 저장할 수 있는 반면,number, string, boolean 등의 원시 타입은 숫자면 숫자, 문자열이면 문자열 딱 하나의 값만 저장할 수 있음 원시 타입은 여러 타입들중 가장 기본이 되는 타입임number 타입// numberlet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num6: number = -Infinity..