타입스크립트 타입 종류 살펴보기
The primitives
- string
- number
- boolean
// 변수 타입 표기 - 변수의 타입을 지정한다. const num: number = 1; const str: string = '문자열'; const bool: boolean = true; // 타입 추론 : 'name' 변수는 'string' 타입으로 추론된다. const name = '최개발';
any
TypeScript가 주는 장점을 모두 상쇄시켜 JavaScript를 사용하는 것과 같게 된다. any타입을 사용하는 곳에서는 TypeScript 컴파일러가 작동하지 않는다. 아래의 경우를 제외하고는 any타입을 사용하지 않는 것이 좋다.
- 특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않는 경우
- 어떤 값 혹은 데이터가 저장될지 알 수 없는 경우
any타입은 tsconfig.json에 설정된 noImplicitAny 설정 값이 true인 경우 암묵적으로 any로 간주되는 모든 경우 에러를 발생시킨다.
let anyType: any; // any타입은 어느 값을 할당하여도 에러가 발생하지 않는다. anyType = 1; anyType = '가'; anyType = true;
unknown
사용자가 어떤 값을 입력할지 모르는 경우 사용한다.
let unknownUserInput: unknwon; let userName: string; // any와 비슷하게 어떤 타입이든 에러 없이 저장이 가능하다. unknownUserInput = 1; unknownUserInput = '가'; // string 타입의 변수에 unknown 타입 값을 할당하면 에러가 발생한다. userName = unknownUserInput; // Type 'unknown' is not assignable to type 'string'. // string 타입의 변수에 any 타입 값을 할당하면 에러가 발생하지 않는다. let anyUserInput: any = 1; userName = anyUserInput; // any는 타입확인을 수행하지 않음 // unknown을 다른 변수에 할당하고 싶을 때는 타입 검사를 진행하면 된다. if (typeof unknownUserInput === 'string') userName = unknownUserInput;
Arrays
// number[] - number 타입만 허용 const nums: number[] = [1, 2, 3]; // string[] - string 타입만 허용 const strs: string[] = ['가', '나', '다']; // boolean[] - boolean 타입만 허용 const bools: boolean[] = [true, false]; // any[] - 모든 타입 허용 const anys: any[] = [1, '가', true]; // 명시한 특정 타입 허용 const specific: (number | string)[] = [1, '가'];
Tuple
아이템 순서를 지정하고, 각 아이템은 지정된 타입만 허용된다.
// 올바른 방법 let person: [string, number] = ['최개발', 28]; // Tuple과 일치하지 않는 요소가 들어간 경우 아래와 같은 에러가 발생한다. // Type '[string, number, boolean]' is not assignable to type '[string, number]'. // Source has 3 element(s) but target allows only 2. person: [string, number] = ['최개발', 28, true]; // Tuple과 일치하면 재할당도 가능하다. person = ['김개발', 24]; // OK person = [26, '이개발']; // ERROR // Tuple은 push를 예외적으로 허용되기에 에러가 발생하지 않는다. person.push('김개발'); // ['최개발', 28, '김개발'] // push를 예외적으로 허용하지만 허용한 타입이 아닌 경우 아래와 같은 에러가 발생한다. // Argument of type 'boolean' is not assignable to parameter of type 'string | number'. person.push(true);
Functions
TypeScript는 함수 입력 및 출력 타입을 지정할 수 있다. 익명 함수의 경우 함수가 어떻게 호출되는지 알아내고 매개 변수에 자동으로 타입을 부여하는 특징이 있다.
// 1. 매개변수 타입 표기 const greet = (name: string) => { console.log('Hello, ' + name); }; // 2. 반환 타입 표기 const getNumber = (): number => { return 28; }; // 3. Function 타입 표기 const add = (num1: number, num2: number) => { return num1 + num2; }; let combineValues: Function; combineValues = add; // 어떤 타입의 매개변수를 받고, 어떤 타입의 값을 반환할지 명확하게 설정할 수 있다. let addValues: (a: number, b: number) => number; // callback 함수 만들어보기 const addHandle = (num1: number, num2: number, cb: (num: number) => void) => { const result = num1 + num2; cb(result); }; addHandle(1, 2, (result) => { console.log(result); }); // 3
void
값을 반환하지 않는 함수의 반환 값을 의미한다. return문이 없거나 명시적으로 값을 반환하지 않았을 때 추론되는 타입이다.
// 타입 추론된 반환 값은 void이다. const noop = () => { return; };
Object Types
객체 타입은 프로퍼티와 각 프로퍼티 타입을 나열하면 된다. 각 프로퍼티 타입 표기는 선택 사항이며 타입을 지정하지 않을 경우 any타입으로 간주한다.
const person: { name: string; age: number; hobbies: string[]; } = { name: '최개발', age: 28, hobbies: ['Coding', 'Camping'], };
Union Types
서로 다른 두 개 이상의 타입을 |로 구분하여 타입을 지정하며, 각 타입을 멤버라고 부른다. Union 타입은 모든 멤버의 타입을 허용한다.
let id: string | number; id = 123; id = '가나다'; id = true; // ERROR
Union 타입에 메서드를 사용하기 위해서는 모든 멤버에 유효한 작업이어야 한다.
const printUpper = (str: string | string[]) => { console.log(str.toUpperCase()); // Property 'toUpperCase' does not exist on type 'string | string[]'. }; // 위 문제는 타입 검사를 통해 해결이 가능하다. const printUpper = (strs: string | string[]) => { if (typeof strs === 'string') { console.log(strs.toUpperCase()); } else { strs.forEach((str) => { console.log(str.toUpperCase()); }); } };
Type Aliases
같은 타입을 재사용하거나 이름을 붙이고 싶을 때 사용한다.
// Object 타입 별칭. 이외에도 Primitive, Union 등 모든 타입을 저장할 수 있다. type Person = { name: string; age: number; }; const greet = (person: Person) => { console.log(person.name + ' is ' + person.age + ' years old'); }; greet({ name: '최개발', age: 28 }); // "최개발 is 28 years old"
Interfaces
Interface의 대부분 기능은 type alias에서도 가능하며 이름을 부여해준다는 점이 동일하다.
interface Person { name: string; age: number; } const printPerson = (person: Person) => { console.log(person.name); console.log(person.age); }; printPerson({ name: '최개발', age: 28 });
Interface는 객체 타입에만 이름을 다는 것이 가능하지만, type alias는 모든 타입에 이름을 달 수 있다.
Type Assertions
TypeScript가 추론한 타입보다 본인이 타입에 대한 정보를 더 정확히 아는 경우 타입 단언을 통해 더 구체적으로 명시할 수 있다. 보다 구체적이거나 덜 구체적인 타입으로 변환하는 것만 허용되며, 숫자형을 문자형으로 단언하는 것은 불가능하다.
// TypeScript는 document.getElementById는 HTMLElement 중 무언가 반환된다는 것만 알고있다. // const myCanvas: HTMLElement | null로 타입 추론 const myCanvas = document.getElementById('main_canvas'); // type assertion const myCanvas2 = document.getElementById('main_canvas') as HTMLCanvasElement; // type assertion2 const myCanvas2 = <HTMLCanvasElement>document.getElementById('main_canvas');
Literal Types
구체적인 '값'을 가지는 타입이다. 예시로 boolean 타입은 실제로는 리터럴 타입으로 true | false의 type alias이다.
// const로 선언한 변수는 리터럴 타입으로 추론된다. const num = 1; // const num: 1 // Literal Type으로 지정한 값만 허용된다. const printName = (greet: string, userName: '최개발' | '김개발') => { console.log(greet + userName); }; printName('Hello, ', '최개발'); // Hello, 최개발 printName('Hello, ', '이개발'); // Argument of type '"이개발"' is not assignable to parameter of type '"최개발" | "김개발"'.
never
일반적으로 함수의 리턴 타입으로 사용되며, 리턴 타입으로 never를 사용하면 오류를 출력하고 리턴 값을 생성하지 않음을 의미한다.
const generateError = (message: string, code: number) => { throw { message: message, errCode: code }; }; generateError('에러 발생', 500);
null, undefined
빈 값, 초기화되지 않은 값을 가리키는 원시 값이다.
const nullable: null = null; const undefineable: undefined = undefined; // null, undefined는 서로 다른 타입이다. nullable = undefined; // ERROR undefineable = null; // ERROR
tsconfig.json의 strictNullChecks 값에 따라서 동작 방식이 달라진다.
strictNullChecks: true
// 1. 모든 데이터 타입은 null 값을 할당할 수 없다. let name: string = null; // ERROR! string 타입에 null 타입 할당 // null 값을 할당하기 위해서는 any, union 타입을 활용한다. let name: string | null = null; // 2. `null` 혹은 `undefined`의 값을 가졌을 때 해당 값을 테스트해야 한다. const printName = (str: string | undefined) => { if (str === undefined) { ... } else { ... } };
strictNullChecks: false
// `null` 혹은 `undefined`의 값을 가져도 해당 값에 평소와 같이 접근할 수 있다. // Null 검사의 부재는 버그의 주요 원인이 되며 해당 옵션을 설정하는 것을 권장한다. let name: string = null;
Non-null Assertion 연산자
명시적인 검사를 하지 않고 null, undefined를 제거할 수 있는 구문으로 !연산자를 표현식 뒤에 붙여서 해당 값이 null, undefined가 아님을 단언한다.
const validate = (e?: Entity) => { // 'e'는 null 혹은 유효한 값 }; const process = (e?: Entity) => { validate(e); const s = e!.name; // 'e'는 null이 아님을 단언하여 접근 가능하게 함. };
Enums
멤버라고 불리는 명명된 값의 집합을 이루는 자료형이다. 숫자로 표현되지만 사람이 읽기 쉽도록 라벨링 하는 개념이며 해당 라벨들은 0부터 시작하는 숫자로 변환된다. 사용자 지정 타입이므로 첫 글자는 대문자로 입력하는 컨벤션을 지킨다.
// Numeric enums enum Direction { Up, // 0 Down, // 1 Left, // 2 Right, // 3 } console.log(Direction.Up); // 0 // Numeric enums 값 할당 가능. 값이 할당되지 않은 멤버는 이전 멤버 +1된 값이 할당된다. enum Direction { Up = 10, // 10 Down, // 11 Left = 100, // 100 Right, // 101 } console.log(Direction[101]); // "Right" // String enums - 각 멤버는 문자열 리터럴 또는 다른 문자열 열거형 멤버로 상수 초기화 해야 한다. enum Direction { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT', }
Enums를 사용하는 이유
1. 역할을 부여하는 코드를 작성했다고 가정해본다.
// 0 : DEVELOPER // 1 : ADMIN // 2 : GUEST const person = { name: '최개발', role: 0, };
2. 해당 숫자 '0'만으로는 개발자, 관리자, 게스트 중 어떤 역할을 수행하고 있는지 이해하기 어려우며, 문자로된 식별자인 'DEVELOPER'가 더욱 이해하기 쉬울 것이다.
const person = { name: '최개발', role: 'DEVELOPER', };
3. 다만 문자로된 식별자는 if문으로 권한을 확인할 때 'DEVELOPER'로 작성했는지 'developer'로 작성했는지 확신하기 어렵다. 문자열을 어떻게 작성했는지 정확하게 기억해야 한다는 단점이 있다.
if (person.role === 'DEVELOPER') {...} // O if (person.role === 'developer') {...} // X
4. 3 번의 경우 보통 전역 상수를 선언하여 해결하곤 한다.
const DEVELOPER = 0; const ADMIN = 1; const GUEST = 2; if (person.role === DEVELOPER) {...}
5. 전역 상수로 선언한 경우 role은 number 타입으로 추론되어 입력하지 않은 모든 숫자가 저장될 수 있다. 또한 전역 상수를 선언하여 상수들을 정의하고 관리해야 하는 어려움이 있다. 이러한 문제를 Enum을 통해 해결이 가능하다.
enum Role { DEVELOPER, // 0 ADMIN, // 1 GUEST, // 2 } const person = { name: '최개발', role: Role.DEVELOPER, }; if (person.role === Role.DEVELOPER) {...}
Ref
'⭐️ Language > TypeScript' 카테고리의 다른 글
| 타입스크립트(TypeScript)란? (0) | 2022.08.18 |
|---|
댓글을 사용할 수 없습니다.