Web/TypeScript 8

[TS] 함수, 함수 타입 표현식과 호출 시그니처

함수 타입💡함수를 설명하는 가장 좋은 방법 JS - 어떤 매개변수를 받고 어떤 결과값을 반환하는 지 이야기 TS - 어떤 [타입의] 매개변수를 받고, 어떤 [타입의] 결과값을 반환하는 지 이야기// 함수 타입 정의function func(a: number, b: number): number { // 반환값의 타입은 없어도 추론 가능 return a + b;}// 화살표 함수의 타입을 정의하는 방법const add = (a: number, b: number): number => a + b; 1️⃣함수의 매개변수function introduce1(name = "안수이", tall: number) { console.log(`name: ${name}`); console.log(`tall: ${tall}..

Web/TypeScript 2024.11.19

[TS] 타입스크립트 이해하기 - 타입 단언, 타입 좁히기, 서로소 유니온 타입

타입 단언❗타입 단언을 사용하면 타입 체크를 할 수 없다.타입 선언은 할당되는 값이 해당 인터페이스를 만족하는 검사하는데, 타입 단언은 강제로 타입을 지정했으니 타입 체커에게 오류를 무시하라고 하는 것 → 타입 단언(as Type)보다는 타입 선언(: Type)을 사용하기// 타입 단언 (Type assertion)type Person = { name: string; age: number;};// name, age가 없어서 오류 발생let person1: Person = {};person1.name = "안수이";person1.age = 24;let person2 = {} as Person;type Dog = { name: string; color: string;};let dog: Dog = {..

Web/TypeScript 2024.11.17

[TS] 타입스크립트 이해하기 - 대수 타입, 타입 추론

대수 타입여러 개의 타입을 합성해서 새롭게 만들어낸 타입.합집합 타입과 교집합 타입이 존재한다. 1️⃣ 합집합 타입 (Union 타입)// 합집합 타입 (Union 타입)let a: string | number | boolean; // 추가할 수 있는 타입의 개수는 무한대a = 1;a = "hello";let arr: (number | string | boolean)[] = [1, "hello", true];type Dog = { name: string; color: string;};type Person = { name: string; language: string;};type Union1 = Dog | Person;let union1: Union1 = { name: "", color: "",..

Web/TypeScript 2024.11.14

[TS] 타입스크립트 이해하기 - 타입 계층도, 타입 호환성

타입은 집합이다❗타입은 동일한 속성과 특징을 갖는 집합이다. 1️⃣수퍼타입(부모타입) ⊃서브타입(자식타입) 타입은 값들을 포함하는 집합이고 서로 부모와 자식 관계를 지니며 계층도로 만들어 표현 가능하다. 예) number Type ⊃ number  literal Type 🔄타입 호환성어떤 타입을 다른 타입으로 취급해도 괜찮은 지 판단하는 것 ⭕업캐스팅: 서브타입(작은 타입)을 슈퍼타입(더 큰 타입)에 넣는 것 → 가능❌다운 캐스팅: 슈퍼타입(더 큰 타입)을 서브타입(작은 타입)에 넣는 것 → 불가능let num1: number = 10; // number 타입let num2: 10 = 10; // literal 타입num1 = num2; // 업캐스팅(가능)num2 = num1; // 다운캐스팅(불가능..

Web/TypeScript 2024.11.11

[TS] any 타입, unknown 타입, void 타입, never 타입

any 타입특정 변수의 타입을 우리가 확실히 모를 때 어떤 타입이던지 넣을 수 있다.모든 타입의 값을 할당 받을 수 있고 모든 타입의 변수에 넣을 수 있다. // any 타입let anyVar: any = 10;anyVar = "hello";anyVar = true;anyVar = {};anyVar = () => {};anyVar.toUpperCase(); // 런타임 시 오류 발생하므로 최대한 사용하지 않는 것이 좋다.anyVar.toFixed();let num: number = 10;num = anyVar;unknown 타입any 타입과 비슷하지만 함수, 연산이 불가능하고 변수에 넣는 것을 불가능하다.// unknown 타입let unknownVar: unknown;unknownVar = "hello..

Web/TypeScript 2024.11.07

[TS] 타입 별칭과 인덱스 시그니처, Enum 타입

타입 별칭과 인덱스 시그니처1️⃣ 타입 별칭반복에 사용하기 좋다.tsc로 컴파일 해보면 js파일에서 타입은 모두 사라진다.// 타입 별칭type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};// 중복 이름 안됨 - 오류 발생type User = {}// 함수 안과 밖은 별개의 타입이므로 중복 이름 가능function func() { type User = {};}let user1: User = { id: 1, name: "안수이", nickname: "수1", birth: "2001.02.18", bio: "안녕", location: "서울시",};l..

Web/TypeScript 2024.11.07

[TS] 원시 타입, 리터럴 타입, 배열과 튜플, 객체

원시 타입: 하나의 값만 저장하는 타입➡ number, string, boolean, null, undefined 1️⃣ number 타입: number 주석을 사용한다 (annotation)❗number 타입에 string 관련 함수를 사용할 수 없다.// 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;let num7: number = NaN;num1.toFixed(); // number 타입에 적용 가능하면 ok/* 오류 발생 */num1 = "hello";num..

Web/TypeScript 2024.11.05

[TS] 타입스크립트 환경 기본 설정

기본 설정⚙ 실습 시작 전 기본 설정1️⃣npm을 초기화하여 모두 기본으로 세팅한다. → package.json이 생성된다.npm init 2️⃣types/node 설치npm i @types/node 3️⃣컴파일러 옵션 설정 → tsconfig.json을 생성한다.{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "moduleDetection": "force" }, "ts-node": { "esm": true }, "include": ["src"]} "include": ["src"] 자동으로 배열안의 경로에 있는 모든 파일을 컴파일한다. 예)..

Web/TypeScript 2024.11.05