타입스크립트 기본 타입
- Boolean
let str: string = 'hi'- Number
let num: number = 10;- String
let isLogginIn: boolean = false;- Object
- Array
let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3]- Tuple : 배열은 0부터 여러 개의 단일 타입 객체를 포함할 수 있다. typescript는 다양한 타입을 포함하고, 색인 되는 순서가 중요한 배열을 특별하게 분석할 수 있다. 튜플은 일부 데이터에 연결하기 위한 방법으로 생각할 수 있으나, 키로 구성되는 객체보다 구문을 덜 가진다. 배열의 순서가 중요하지 않을 때, 모든 인덱스에 있는 요소는 문자열 또는 숫자가 될 수 있다. 하지만 튜플에서는 순서와 길이가 보장된다.
01)
const failingResponse = ["not found", 404];
// 배열 ((string | number)[])
const passingResponse = [string, number] = ["{}", 200];
// 튜플 ([string, number])02)
if(passingResponse[1] === 200){
const localInfo = JSON.parse(passingResponse[0]);
console.log(localInfo)
}03)
passingResponse[2];
// Errors in code
// Tuple type '[string, number]' of length '2' has no element at index '2'.
// ts가 올바른 인덱스에 올바른 타입을 제공하고, 선언되지 않은 인덱스에 있는 객체에 접근하면 에러가 발생한다는 것을 의미한다. 04)
type StaffAccount = [number, string, string, string?];
const staff: StaffAccount[] = [
[0, "Adankwo", "adankwo.e@"]
[1, "Kanokwan", "kanokwan.s@"]
[2, "Aneurin", "aneurin.s@", "Supervisor"]
]
// 튜플은 적은 양의 연결된 데이터
// 또는 고정된 데이터 타입을 위한 좋은 패턴처럼 느껴질 수 있다. 05)
type PayStubs = [StaffAccount, ...number[]]
const payStubs : PayStubs[] = [
[staff[0], 250],
[staff[1], 250, 260],
[staff[0], 300, 300, 300],
]
const monthOnePayments = payStubs[0][1] + payStubs[1][1] + payStubs[2][1];
const monthTwoPayments = payStubs[1][2] + payStubs[2][2];
const monthThreePayments = payStubs[2][2];
// 튜플에서 시작 타입은 알지만 길이에 대해 알 수 없을 때 전개 연산자를 사용해 길이에 상관없이 나머지를 특정한 타입으로 나타낼 수 있다. 06)
//튜플을 사용하면 개수를 알 수 없는 매개변수 타입을 선언할 수 있다.
declare function calculatePayForEmployee(id: number, ...args: [...number[]]): number;
calculatePayForEmployee(staff[0][0], payStubs[0][1]);
calculatePayForEmployee(staff[1][0], payStubs[1][1], payStubs[1][2]);- Enum : 열거형으로 이름이 있는 상수들의 집합을 정의할 수 있다. 열거형을 사용하면 의도를 문서화하거나 구분되는 사례 집합을 더 쉽게 만들 수 있다.
1) 숫자 열거형
enum Direction {
Up = 1,
Down,
Left,
Right,
}
// 밑에 값을 차례로 2, 3, 4, 값을 갖는다.
enum Direction {
Up,
Down,
Left,
Right,
}
// 여기서 값을 0,1,2,3의 값을 갖는다. enum UserResponse {
No = 0,
Yes = 1,
}
function respond(recipent: string, message: UserResponse): void {
//...
}
respond("Princess Caroline", UserResponse.Yes);
//열거형을 사용하는 것은 간단하다. 그냥 열거형 자체에서 프로퍼티로 모든 멤버에 접근하며 열거형의 이름을 사용해 타입을 선언한다. enum E {
A = getSomeValue(),
B, //오류다 앞에 나온 A가 계산된 멤버이므로 초기화가 필요하다. enum member must have initializer.
}2) 문자열 열거형 : 문자열 열거형에서 각 멤버들은 문자열 리터럴 또는 다른 문자열 열거형의 멤버로 상수 초기화 해야 한다. 숫자 열거형처럼 자동 증가하는 기능은 없지만, 문자열 열거형을 이용하면 코드를 실행할 때, 열거형 멤버에 지정된 이름과는 무관하게 유의미하고 읽기 좋은 값을 이용해 실행할 수 있다.
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}enum ShapeKind{
Circle,
Square,
}
interface Circle{
kind: ShapeKind.Circle;
radius: number;
}
interface Square{
kind: ShapeKind.Square;
sideLength: number;
}
let c: Circle = {
kind: ShapeKind.Square, // 오류! 'ShapeKind.Circle' 타입에 'ShapeKind.Square' 타입을 할당할 수 없다.
radius:100,
}- Any : 기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입이다. 단어 의미 그대로 모든 타입에 대해 허용한다는 의미를 갖고 있다.
let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true]- Void : 변수에는 undefined와 null만 할당하고, 하수에는 반환 값을 설정할 수 없는 타입입니다.
let unuseful: void = undefined;
function notuse(): void{
console.log('sth')
}- Null
- Undefinend
- Never : 함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입이다.
function neverEnd(): never {
while (true){
}
}참고 사이트
https://joshua1988.github.io/ts/guide/basic-types.html#enum
https://www.typescriptlang.org/ko/play?#code/PTAEh9xwMHsQAnB5xwdDtIBh7Avo4AXHQAZABvYBkXSA3o4DftogODWAa4wLABQIogF03iiADC4KHjoguDWAtM4D6dogN8uALVcAGq6EAYQ6EAR44FahwBNNgE6aAdDToAVAJ4AHAKYBlAMYAnAJaaALoBSm0PMCJo4B1Vlq0Ai4wMGANVcAHNQBoVYQJMDgB7joIAYLVaAOEOAOIOAADWggIiTgCljDqgugJ1LgCM9boAxNaCAIb2AuIOiEjIKytS+oIAu43yAOUuAMKsVgD7tHqDYgKGdJaB1LuDYoIAOzRW4gAujoIAPo4ANNW6ADHWggCDjduWAlD2AqT0IoIC7A4CANYVSgAOTgDOdXqCAJQuIgDa1gIyDoZxcgC898qBngBzdLoA6zaBRgIuTJTTlAFIAQwAbgCDCZzORkChHi9QIAagcAlWNuAidWoudYXHbFeQALl+1H0AHsAHYAZzMoAAZgDjAAbYzEgDmACVtKTNCTSdpQABeUAAbQARAA5QkUgBihIArsSACaCo4AFkwioAugBufF0QAIbQ46iM2KBAASDgA7RiqgQAiq-EsXIlPiiWSKZoAaTSQyWWyOWTtDiBeSTEyjsSpQBbABG2kMqt5AsFAG8AL4K0AAJkwmA1WrAgAUW0CAAZ6JBVACGdI0AHGuAEJ7AC6rt0ALl3lVCgAAUTf97tAAB9QMHw5GAJT86O9wA-Naim36zAHGUHQxGo6Be1RaGBABQzFUACBMuQA-PeIpLbSvWUJDIjEEm5dqBAFKjLkAMq0+JegQAVXYADltAAUAjs2AEqGRpIrPFADGDVhPIACePQtqViANRDQExIABC07tipR0Ge+yokMEThBEgACY6AgAcdRUMS3IApeOAJQtPxlNQxiUk2zquu6rLspy2j8gAjNGPJsam6a9qAcY0KAoAOuSoC0oS+gArSACSxKUoSMZ-LoADywqKM6hhco21FukydFely-IZr2mrUHxAmErS2iKMJjKNsJokSVJhIGTQCZZpUVgaDoYKmGYMSADRjgAoPYAHp2vp+Iz+UFbAuIAOBOAK81nh3nQprBOeF4YO+X5SFY3AjIAiBOAD+1bh1veQxEDEgA4PesdjyFYgDBNS45CAB-dgCWq6RNAabRnoMfyKaZmRdB1Bg0AYDYkITIAOC39IM5RgaAHiAKgT40DPgEVzA4gDRExggAUy4ALIuABkzgA-7aAgAJTYAL3WABOTcF7viZhaNyuhmAClKUgAgvoRIyhSfL8t2s5HK2gagH9U4AxO7oAPw9TQAkUuSD2Ur6d2wy9b3EmYA4xvyvECpgRyCk9soAsSADWADuhLJoKAL40TpOKNoAACgqqnefHMTjADSBOEiTBPk4TnPc8SiikgzTOY11ONPcS2hSgG5ME9LAZCwzOO6FKOiGECxikoShiM3eEP3vqESgIAO0OAInjjgYIAMqMHPFYC4SMgAAzZWoBWzugBjoze5SACATpBjIADQNAXwiIuw7oCAIMDgAAte7FTlIAGQ2ABxdux8Cks0OGwaxx8wgA9DRdCh4mR106KAAAKALqHdUphqS6MI49SPSijRyKC332RgOBtQ6AzoV2YVekr6Ze9-3aOfWLMOPXpTOpgArBmzPjrDzHTymc9HCmABs8-j-dk-z6AADM6ZHEf2OH+movUJ3nIUiGJJmAAFvJUtDyG2gozXfI95X1dT8voAAGpu7lx-qSZe-8gHfz7r-bqy9DJdzvijB+qhSav3fmYT+wDh6-xYl1aMkCQHQLAbA7q8Cb6gEQY-VQD9DDaG0Ggj+MYoEjxIQbPqaJ4RIhrGQMQfA3YSHdhYcogATztIAWRwLhTQ2nzviWU2h9C0gBLQqkMp9BmGMCSfiYl9BSkUWYeh5dJSGAAKIhk0MJdQdDGzGFlL6Nuhhm4tyUYyAeAoW6KHsR3XsdiZyRkMpDbRuiAT6KHkY0x5jCSWO0I2CelI-772Yb-DMy9HIEkCXogx6gwlmIsVY2J4CEmEJHrgliRxElgNwd1VJvhygPzMGYTQA8QDExaYoIubIjBeUUUyRQOtGTAFlCJUkwAH4E1lGGQkXNgC0LMi6bQABaYkYo2TAHaaSTp5h5kH3mZgRQdSQy0gAMR93MWyeZDJ5m0PJPMlSAI376NUvMsZ8z2S0MpvM7QAAPTQVy3SclqfUxpOIQAAilI-XZRIQzADDJZVZN11ngjMFsj53zhKTnmScsypIMUPwWTKQmSzibEgxTdYANAgA
