diff --git "a/\353\260\225\354\212\271\355\233\210/220715.md" "b/\353\260\225\354\212\271\355\233\210/220715.md" new file mode 100644 index 0000000..0ce9b7f --- /dev/null +++ "b/\353\260\225\354\212\271\355\233\210/220715.md" @@ -0,0 +1,257 @@ +# TypeScript 기초 + + + +## 기본 타입 + +### 문자열, 숫자, 진위값 + +```ts +const str: string = 'hello'; +const num: number = 10; +const show: boolean = true; +``` + +
+ +### 배열 + +```ts +const arr: Array = [1, 2, 3]; +const heroes: Array = ['Capt', 'Thor', 'Hulk']; + +const items: number[] = [1, 2, 3]; +``` + +- 대문자 Array를 사용하고, 각괄호 안에 내부 요소들의 type을 지정 + +- **literal** 방식으로 `[]` 자체가 Array를 의미 +- 내부 요소의 type을 `[]` 앞에 표시 + +
+ +### 튜플 + +> 튜플: 배열의 특정 인덱스의 타입을 명시 + +모든 인덱스의 type이 각각 정의 + +```ts +const address: [string, number] = ['gangnam', 100]; +``` + +
+ +### 객체 + +```ts +const obj: object = {}; + +const person: {name: string, age: number} = { + name: 'thor', + age: 1000, +}; +``` + +- Array와 달리 object 소문자로 type 정의 +- 객체 내부의 특정 속성의 type을 지정 가능 + +
+ +## 함수 타입 + +### params와 return값의 type 정의 + +```ts +function sum(a: number, b: number): number { + return a + b; +} +``` + +- return 값의 type 명시가 된다면 return의 type 뿐만 아니라 return의 유무도 확인 +- return이 없다면 오류 발생 + +
+ +### 반환값이 없는 함수인 경우 + +```ts +function log(): void { + console.log('hello'); +} +``` + +- return type을 **void**로 둔다. + +
+ +### params의 엄격한 제한 + +> JS의 경우 params의 인자 개수에 대한 유연함이 존재 + +```js +function sum(a, b) { + return a + b; +} + +sum(10, 20, 30, 40, 50) // 30 +``` + +
+ +> TS로 params의 type이 정의되면 이런 유연함을 불허 + +```ts +function sum(a: number, b: number): number { + return a + b; +} + +sum(10, 20, 30, 40); // 2개의 인수가 필요한데 4개를 가져왔습니다. +``` + +30, 40 인자에 대해 오류 발생 + +
+ +### optional parameter + +> 여러 params를 쓸 때도 있고, 안 쓸 때도 있는 경우에 사용 + +인자의 type을 미리 정의한 후, 필요한 경우 인자 생략을 허용 + +```ts +function log(a: string, b?: string): string { + +} + +log('hello world'); +log('hello ts', 'abc'); +``` + +- '?'를 params 옆에 바로 붙여 표시 +- 만약 해당 param이 있다면 type은 ~~라는 의미 + +
+ +## 인터페이스 + +### 인터페이스의 목적 + +> object의 속성들의 구체적인 type(스펙)의 반복 제거 + +- 앞에서 object의 스펙이 복잡하면 복잡할수록 코드가 지저분해진다. +- 반복이 많으면 많을수록 더 곤란 +- 때문에 한 번만 정의하고, 이를 가져다 쓰는 방식 +- 깔끔한 코드 및 유지보수, 협업에 유리 + +
+ +### 변수 정의 + +```ts +interface User { + age: number; + name: string; +} + +const seho: User = { + age: 33, + name: '세호' +} +``` + +
+ +### 함수 인자 정의 + +```ts +function getUser(user: User): void { + console.log(user); +} +getUser(seho); +``` + +
+ +### 함수 구조 정의 + +> 함수 스펙(구조)에 인터페이스 활용 + +```ts +interface SumFunction { + (a: number, b: number): number; +} + +let sum: SumFunction; +sum = function(a, b) { + return a + b; +} +``` + +- 함수 인자나 return 값의 type을 interface에 미리 정의 +- 함수 선언에서 interface를 지정 +- 인자의 수가 적고 구조가 간단한 경우 interface보다는 인자에 바로 지정하는 것을 권장 + +
+ +### 인덱싱 방식 정의 + +```ts +interface StringArray { + [index: number]: string; +} + +const arr: StringArray = ['a', 'b', 'c']; +arr[0]; // 'a' +``` + +- 인덱스에 숫자 type만 입력하도록 제한 +- 인덱싱으로 뽑힌 결과는 문자 type이어야 한다는 의미 + +
+ +### 인터페이스 딕셔너리 패턴 + +```ts +interface StringRegexDictionary { + [key: string]: RegExp; +} + +const obj: StringRegexDictionary = { + // sth: /abc/, + cssFile: /\.css$/, // css 확장자를 가지는 모든 파일을 들고오는 정규표현식 + jsFile: /\.js$/, +} +``` + +- RegExp: Regex Expression(정규 표현식)의 약자 +- 딕셔너리에서 key의 type은 string, value의 type은 RegExp가 되도록 제한하는 인터페이스 + +
+ +### 인터페이스 확장(상속) + +```ts +interface Person { + name: string; + age: number; +} + +// interface Developer { +// name: string; +// age: number; +// language: string; +// } + +interface Developer extends Person { + language: string; +} + +const capt: Developer = { + name: '캡틴', + age: 100, + language: '타입스크립트' +} +``` + +- **interface 자식인터페이스 extends 부모인터페이스**로 인터페이스 상속 \ No newline at end of file