1. TS 기본 타입
JS의 타입 종류
Primitive: number, string, boolean, bigint, symbol, null, undefinedObject: function, array…
TS의 기본 타입 종류
- number, string, boolean, undefined, null
- unknown, any, void, never, object
- array, tuple
1.1 Type Annotation(타입 표기)
💡 타입 표기(Type Annotation)과 타입 추론(Type inference)
- 타입 표기(Type Annotation)
:를 이용하여 자바스크립트 코드에 타입을 정의하는 방식변수명:타입이렇게 정하면 됩니다.- 개발자가 타입을 타입스크립트에게 직접 말해주는 것
- 타입 추론(Type inference)
- 타입스크립트가 알아서 타입을 추론하는 것
1// 타입 표기2const age : number : 5; // 개발자가 타입을 타입스크립트에게 직접 표기34// 타입 추론5const rate = 5; // TS가 알아서 rate가 number 타입이라고 추론해줌
2. 기본타입
2.1 number, string, boolean, undefined, null
1// 📝 number, string, boolean -------------------------2let 이름: string = '메시'3let 나이: number = 364let 결혼: boolean = true56// 📝 undefined -------------------------------------💩7let 이름2: undefined8let 나이2: number | undefined // number 또는 undefined 타입 할당 가능9나이2 = undefined10나이2 = 11112// 📝 null -------------------------------------------💩13let person: null14let person2: string | null
null, undefined타입도 있지만, 굳이 사용하지 않습니다.
undefined: 값이 있는지 없는지 모름- 데이터 타입이 있거나 결정되지 않았을 때 사용
null: 값이 없음
cf. 💩는 가급적 사용하지 않기
2.2 unknown, any, void, never, object
1// 📝 unknown ------------------------------------------------------------------2// 무슨 타입인지 알 수 없는 (JS 연동을 위해 있음) 💩3let 타입몰라: unknown = 04타입몰라 = 'he'5타입몰라 = true67// 📝 any ----------------------------------------------------------------------8// 무엇이든 할당 가능 (JS 연동을 위해 있음) 💩9let 타입전부가능: any = 010타입전부가능 = 'hello'1112// 📝 void : 함수에서 아무 것도 반환하지 않을 때 사용 ------------------------13// undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입14// 이 함수는 뭔가를 return하려고 하면 에러남15// void : 아무것도 없이 공허함, 비어있는16// 생략 가능17function print(): void {18console.log('hello')19return20}21let unusable: void = undefined // 💩2223// 📝 never : 에러를 반환하거나 영원히 끝나지 않는 함수의 타입으로 사용 -------24// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미25// 리턴하지 않는 함수일 떄, 이를 감안하고 코딩하라고 알려줄 떄26function throwError(message: string): never {27// message -> server (log)28throw new Error(message)29while (true) {}30}31let neverEnding: never // 💩3233// 📝 objet ---------------------------------------------------------------------34// 어떠한 object(객체) 타입이든 받을 수 있음35let 학생명: object // 💩36function acceptSomeObject(학생명: object) {}37acceptSomeObject({ name: 'kim' })38acceptSomeObject({ animal: 'dog' })3940// 타입 객체41const person: { age: number; name: string } = {42age: 100,43name: 'Capt',44}45person.age = 101
2.3 array, tuple
1// 📝 Array : 같은 타입의 배열을 담을 수 있는 타입2const 과일: string[] = ['🍅', '🍌']3const 점수판: Array<number> = [1, 3, 4]45// 📝 Tuple : 서로 다른 타입의 배열을 담을 수 있는 타입6let 학생정보: [string, number]7학생정보 = ['메시', 123]8학생정보[0] // 메시9학생정보[1] // 12310const [학생명, 학생나이] = 학생정보
튜플은 사용하는 것을 권장하지 않습니다.
- 데이터 접근할 떄, 인덱스로 접근하는 것은 가독성이 떨어짐
- 튜플을 사용할 수 있는 곳에서는 대신에 interface, type alias, class 등을 사용하기
- c.f. React의 useState의 API 정의를 보면 튜플임
3. 함수 타입
3.1 함수에서 타입 이용 가능
함수는 총 두 군데 타입지정이 가능합니다.
함수로 들어오는 자료(파라미터): 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 작성함수에서 나가는 자료 (return): return 값 타입지정하고 싶으면 함수명() 우측에
1function add(num1: number, num2: number): number {2return num1 + num23}45function fetchNum(id: string): Promise<number> {6return new Promise((resolve, reject) => {7resolve(100)8})9}
3.2 optional, default, rest
1// 1. Optional parameter --------------------------------------------2// 전달하려는 값이 있을 수도 있고, 없을 수도 있을 경우 ? 사용3function printName(firstName: string, lastName?: string) {4console.log(firstName)5console.log(lastName) // undefined6}7printName('메시', '리오넬')8printName('음바페')9printName('홀란드')1011// 2. Default parameter -----------------------------------------------12function printMessage(message: string = '기본 값임') {13console.log(message)14}15printMessage()1617// 3. Rest parameter --------------------------------------------------18function addNumbers(...numbers: number[]): number {19return numbers.reduce((a, b) => a + b)20}21console.log(addNumbers(1, 2))22console.log(addNumbers(1, 2, 3, 4))23console.log(addNumbers(1, 2, 3, 4, 5, 0))
4. Type Alias(타입 별칭)
Type Aliases = 새로운 타입을 정의할 수 있는 것
1// Text라는 새로운 타입 정의 -----------------------------------------------2type str = string //3const 이름: str = '메시'4const 집주소: str = '아르헨티나'56// Student라는 새로운 타입 정의 ---------------------------------------------7// 여기 정의된 데이터만 넣을 수 있음8type Student = {9name: string10age: number11}12const student: Student = {13name: '메시',14age: 36,15}1617// String Literal Types : 타입을 특정 문자열로 지정하는 것 --------------------18type 축구선수 = '호날두'19let 네이마르: 축구선수20네이마르 = 'name' // Error: 다른 문자열을 할당할 수 없고, '호날두'이라는 문자열 값만 사용 가능2122type 제이슨 = 'json'23const json: 제이슨 = 'json'2425type Boal = true
5. Type Inference(타입 추론)
Type Inference : 타입이 값을 통해 알 수 있는 경우 타입을 생략하는 법
- TS가 자동으로 타입을 추론해주지만,
- 프로젝트 크기가 커지면 타입을 알 수 없기 때문에 정확하게 타입을 명시해주는 것이 좋음
- cf. Inference = 추론, 추측, 추리
1let text = 'hello' // 'hello'가 문자열 타입이니, TS가 :string을 추론해서 생략 가능2function print(message = 'hello') {3console.log(message)4}5print('hello')67function add(x: number, y: number): number {8return x + y9}10const result = add(1, 2)