-
[TypeScript] TypeScript의 Type들TypeScript 2023. 2. 20. 18:06
타입스크립트에 변수를 생성한다면 어떤 타입인지 정해줘야 한다!
👇🏻 TypeChecker와 소통하는 방법 👇🏻
name이 string이라는 걸 알려주면 된다 ➡️ : type (요런 형식으로 타입스크립트에게 타입을 알려주면 된다)let name : string = "kanghee"
타입을 따로 정해주지 않으면 타입스크립트는 타입을 추론한다
일명 타난 ... (타입스크립트 + 코난) 👓
✅ 타입스크립트는 타입을 추론하여 다른 타입을 작성하였을 때 hey 너 잘못했어 라고 경고를 날린다TypeScript의 경고 let kangheeAge = 33 // number 재할당 해준 경우 no error kangheeAge = 31 // string 재할당 해준 경우 error // ⛔️ Type 'string' is not assignable to type 'number'. kangheeAge = "33 떡볶이"
➡️ 타입스크립트에게 타입을 구체적으로 명시해주는 것 보다는 타난으로 하는게 더 낫다
WHY? 코드 치는 것을 줄일 수 있기 때문이다TypeScript의 Type들
1. Basic Type
// string let name : string = "kanghee" // number let kangheeAge : number = 33 // 각각의 array let kangheeLie : boolean[] = [true, false, false] // undefined let u : undefined = undefined // null let n : null = null
2. Optional Type
?을 붙이면 Optional parameter (선택적 변수)를 지정할 수 있다// Alias type : 많은 타입을 재사용할 수 있게 한다 // 과하게 재사용하는건 ❌ -> 코드가 깔끔하고 명확해질 때까지만 사용하도록 하자! type Age = number type Lover = { name : string, // type은 number or undefined age? : Age, } const lover : Lover = { name : "kangehee", } // age가 undefined일 수도 있으니 lover.age가 존재하는지 확인을 거쳐야 한다 if(lover.age && lover.age < 33) { console.log("이강희는 33 떡볶이라구!"); }
3. any
비어있는 값들을 쓰면 기본 값이 any가 된다
아무 타입이나 될 수 있고 모든 것을 비활성화 시킨다
✅ TypeScript로 부터 빠져나오고 싶을 때 쓰는 type❓ 여기서 의문점
값을 구체적으로 명시해주지 않으면 기본 값이 any가 되는 것인데
왜 타난으로 타입스크립트가 타입을 추론하도록 하는 것이 좋은 것인지 ...?
값이 할당되어 있으면 타입스크립트가 type을 추론해서 해당 type인 것을 아는 것이고
비어있는 값이면 any가 되는 것인가 ...?
함수의 return 타입 정하는 방법- 인수의 type 지정하기 ➡️ : type (= 변수에 type 할당하는 방법이랑 같다)
- return type 지정하기 ➡️ 인수 옆에 : type 요렇게 지정하면 된다!
function playerMaker(name : string) : Lover { return { name } } // 화살표 함수 const playerMaker = (name : string) : Lover => ({name})
readonly 지정하는 방법- readonly만 앞에 붙여주면 된다 ➡️ 수정할려고 하면 TypeScript에서 보호해줄거다
- 기존 array를 바꾸지 않는 map, filter는 가능 ⭕️ / array를 직접적으로 수정하는 push, pop 같은건 불가능 ❌
Tuple- 다양한 type의 값을 갖는 배열을 생성한다
- 최소한의 길이를 가져야 하고 특정 위치에 특정 타입이 있어야 한다
- readonly랑 같이 사용할 수 있다
const player : readonly [string, number, boolean] = ["kanghee", 33, true] // readonly는 수정이 불가능하다 ❌ player[0] = "dasom"
TypeScript에만 존재하는 Type들
1. unknown
어떤 타입인지 모르거나 변수의 타입을 미리 알지 못할 때 사용한다
일종의 보호를 받게된다 (날 보호해주다니 멋있어 TypeScript ... 💙)
➡️ 어떤 작업을 하려면 변수의 타입을 먼저 확인해야 하는 방식 (타입 확인 작업을 강제로 시킨다)let data : unknown; // 이 범위 안에서는 age type === number -> number인지 확인 후, 코드 실행 if(typeof data === "number") { let age = data + 1 }
2. void
아무것도 return 하지 않는 함수를 대상으로 사용한다 (비어 있는 것)// 보통 void 라고 사용 ❌ // 함수가 아무것도 return 하지 않는다는 것을 자동으로 인식한다 function hello() { console.log("난 아무것토 리턴하지 않아효") }
3. never
함수가 절대 return 하지 않을 때 발생한다 (= 함수에서 exception 발생할 때)// return 하지않고 오류를 발생시키는 함수 이럴 때 never을 사용한다 function bye() : never { throw new Error("XXX") } // 타입이 2가지 일 수도 있는 상황에서 발생할 수 있다 // name type이 string | number일 경우 else 코드는 절대 실행되지 않는다 // 함수 실행이 종료함을 의미한다 요것이 never function twoType(name : string | number) { if(typeof name === "string") { name } else if(typeof name === "number") { name } else { name } }
⏯️ 참고강의
https://nomadcoders.co/typescript-for-beginners/lobbyTypescript로 블록체인 만들기 – 노마드 코더 Nomad Coders
Typescript for Beginners
nomadcoders.co
never에 대해서는 아직 이해가 정확히 되지는 않아서 관련해서 좀 더 알아봐야겠다! 🧐
'TypeScript' 카테고리의 다른 글
[TypeScript] CLASSES AND INTERFACES (2) 2023.02.28 [TypeScript] FUNCTIONS (0) 2023.02.23 [TypeScript] TypeScript를 쓰는 이유 (5) 2023.02.14