Typescript 16

[Typescript] 인터페이스의 확장(상속), 타입 별칭

인터페이스의 확장 인터페이스는 확장이 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // 인터페이스 확장 interface Person { name: string; age: number; } // interface Developer { // name: string; // age: number; // language: string; // } // 상속을 통한 확장 interface Developer extends Person { language: string; } var Captain: Developer = { language: "TS", age: 100, name: "캡틴", }; Colored by Color Scripter cs Per..

Typescript 2022.07.11

[Typescript] 인터페이스와 배열, 딕셔너리

배열의 인덱싱 인터페이스를 사용해 인덱싱을 설정할 수 있다. 1 2 3 4 5 6 7 8 9 // 인덱싱 interface StringArray { [index: number]: string // 인덱스를 숫자로 접근할 수 있다 // Array의 요소들은 string형식만 입력받는다 } var arr: StringArray = ['a', 'b', 'c']; arr[0] = 10; // string이 아닌 number를 입력했기 때문에 에러가 생성된다 cs interface에서 배열의 인덱싱을 설정할 수 있다. 위 코드의 StringArray는 숫자로 인덱스를 설정했다. 그래서 StringArray 인터페이스로 만든 arr에 [0]으로 각 요소에 접근할 수 있다. 접근한 값은 string으로 설정되었으므로..

Typescript 2022.07.11

[Typescript] 인터페이스(interface)

인터페이스(interface) 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 참고(https://joshua1988.github.io/ts/guide/interfaces.html#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4) 인터페이스 사용 예시는 아래와 같다. 1 2 3 4 5 6 7 8 9 10 // 반복되는 타입을 하나의 인터페이스로 간단하게 표현할 수 있다. interface User { age: number; name: string; ..

Typescript 2022.07.11

[Typescript] Typescript의 기본 타입

Typescript에서 타입 지정은 기본적으로 변수의 오른쪽에 명시된다. 기본 타입의 선언 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 // TS 문자열 선언 let str: string = "hello"; // TS 숫자 let num: number = 10; // TS 배열 let arr: Array = [1, 2, 3]; let heros: Array = ["Capt", "Thor"]; let items: number[] = [2, 3, 4]; // TS 튜플 // 특정 위치(인덱스)의 타입을 따로 지정할 수 있다 let address: [string, number] = ["gangnam", 11]; // TS 객체 let o..

Typescript 2022.07.11

[Typescript] Typescript 시작하기

Typescript 시작하기 TS파일은 컴파일 과정을 거쳐 JS파일로 변환해야 브라우저에서 사용할 수 있다. 콘솔에서 npm 명령어를 통해 typescript를 다운받는다. npm i typescript -g typescript로 코딩한 후, 아래 명령어로 컴파일한다. tsc index.ts (파일 이름이 index.ts 인 경우) 위 명령어를 입력하면 index.js라는 파일이 만들어진다. 아래 사이트에서 컴파일 후의 JS파일을 확인해 볼 수 있다. https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write Type..

Typescript 2022.07.11

[Typescript] Typescript란? Typescript의 장점

Typescript란? Javascript에 타입을 부여한 언어. 브라우저에서 실행하려면 JS로 바꿔주는 과정을 거쳐야 한다. 이 과정을 컴파일이라고 한다. Typescript의 장점 에러를 사전에 방지할 수 있다. 개발 생산성을 향상시킬 수 있다.(코드 가이드 및 자동 완성 기능) 사전 에러 방지 console.log를 사용해 브라우저에서 확인했어야 하는 정보들을 미리 알 수 있다.(property 이름, 형식) 오탈자에 대한 부분을 개발자에게 알려준다 -> 에러를 사전에 방지함 TS사용하지 않는다면 JSDoc으로 미리 타입을 명시해줘야 한다. /** */ 사이에 내용을 적어야하며 가독성이 떨어지고 코드가 길어지는데 TS로는 더 간결하게 타입을 명시할 수 있다. 함수를 생성할 때 입력받는 값의 타입 지..

Typescript 2022.07.11