본문 바로가기

TypeScript/기초27

[TypeScript] object index signatures object 자료에 타입을 미리 만들어주고 싶은데, 어떤 속성들이 들어올 수 있는지 모르거나, 타입 지정할 속성이 너무 많은 경우에는 index signatures를 사용하면 편하게 가능하다. index signatures interface stringOnly { [key :string] :string } let obj :stringOnly = { name :'kim', age :'20', location :'seoul' } StringOnly라는 interface를 만들었다. 특이한 점으로 속성으로 [ key :string] : string 이라고 정의가 되어있다. 이렇게 정의하면 " 모든 string으로 들어오는 key값에 할당되는 value는 string이어야 한다. " 라는 타입이 된다. 즉, {.. 2022. 9. 8.
[TypeScript] implements 키워드 interface는 object 타입을 지정할 때 사용하는 키워드이다. 하지만 용도가 하나 더 있는데, class 타입을 확인하고 싶은 경우에도 interface 문법을 사용한다. 이때 추가로 필요한 게 implements 키워드이다. interface & implements class Car { model :string; price :number = 10000; constructor(a :string) { this.model = a; } } let myCar = new Car("morning"); class Car를 통해 생성되는 object들은 model과 price 속성을 가지고 있다. 근데, class가 model과 price 속성을 가지고 있는지 타입으로 확인하고 싶은 경우에 interface와.. 2022. 7. 13.
[TypeScript] d.ts TypeScript로 프로젝트를 진행하다 보면 d.ts 파일을 보게 된다. d.ts 파일은 타입만 저장할 수 있는 파일 형식이다. 사용하는 이유는 타입 정의만 따로 저장해서 import 하기 위해서 프로젝트에서 사용하는 타입을 쭉 정리하는 레퍼런스용으로 사용 타입만 모아서 정의하는 d.ts 파일명.d.ts라고 작성한 파일은 type 키워드, interface 같은 타입 정의만 넣을 수 있다. 함수의 경우엔 { } 중괄호 붙이는 게 불가능하고 파라미터 & return 타입만 지정 가능하다. export type Age = number; export type multuply = (x :number, y :number) => number export interface Person { name :string }.. 2022. 7. 12.
[TypeScript] Declare & Ambient Module 프로젝트를 진행하다 보면 외부 자바스크립트 파일을 이용하는 경우가 있다. import 문법으로 가져와 사용하면 되는데, 타입스크립트로 작성된 파일이 아닌, 자바스크립트로 작성된 파일이라면 타입 지정 문제로 에러가 발생할 수 있다. // data.js let a = 10; let b = { name : 'kim' } // index.js console.log(a + 1); 일반적인 경우라면 index.html 역할을 하는 곳에 두 파일을 첨부하면 된다. (index.html) // index.ts를 변환시킨 js 파일 콘솔창으로는 a + 1이 11로 잘 나오지만 타입스크립트 파일 내에서는 a가 정의되어 있지 않다는 에러가 발생한다. 타입스크립트 입장에서는 a라는 변수를 import 한 적이 없기 때문에 에.. 2022. 7. 11.
[TypeScript] Tuple Type Tuple Type? Tuple Type은 array에 붙일 수 있는 타입인데, 자료의 위치까지 정확하게 지정할 수 있는 타입이다. let anything : [string, boolean]; anything = ['test', true]; [] 괄호 안에 타입을 적으면 Tuple Type이 된다. type Num = [number, number?, number?]; let num1 :Num = [10]; let num2 :Num = [10,20]; let num3 :Num = [10,20,30]; Tuple 안에서도 물음표를 사용해서 옵션이라고 표현을 할 수 있다. type Num = [number, number?, number]; 하지만 물음표 옵션은 제일 마지막부터 순차적으로 붙일 수 있으며, 중간.. 2022. 7. 10.
[TypeScript] React에서 사용하기_2편 state와 reducer 만들 때 타입 지정 import { Provider } from 'react-redux'; import { createStore } from 'redux'; const 초기값 = { count: 0 }; function reducer(state = 초기값, action) { if (action.type === '증가') { return { count : state.count + 1 } } else if (action.type === '감소'){ return { count : state.count - 1 } } else { return initialState } } const store = createStore(reducer); ReactDOM.render( , document... 2022. 7. 10.
[TypeScript] React에서 사용하기_1편 1. React에 TypeScript 추가하기 신규 프로젝트 npx create-react-app 프로젝트명 --template typescript 프로젝트를 만들 때 TypeScript를 자동으로 세팅해주는 명령어이다. 기존 create-react-app에 --template typescript 만 추가된 명령어다. 기존 프로젝트 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 패키지를 다운받고 js 파일을 ts, jsx 파일을 tsx 파일로 변경하고 프로젝트를 진행하면 된다. 하지만 파일을 변경하고 수정하는 작업이 오래걸려서 가능하면 신규 프로젝트를 만드는 방식이 안전하다. 2. React에서 사용하.. 2022. 7. 9.
[TypeScript] Generic function func(x :unknown[]) { return x[0]; } let a = func([4,2]); console.log(a); a를 출력하면 4가 출력될 것이다. 그렇다면 a의 타입은 뭘까? a의 타입은 number 타입이 아닌, unknown 타입이다. 파라미터의 타입이 unknown[] 이기 때문에 unknown 타입이 된다. function func(x :unknown[]) { return x[0]; } let a = func([4,2]); console.log(a + 1); 또한 이렇게 연산할 경우에도 에러가 난다. 즉, 함수의 return 타입 지정을 number로 지정하기 전까지는 number타입으로 변하지 않는다. 그런데, 타입스크립트를 사용하면 파라미터로 타입을 입력할 .. 2022. 7. 8.
[TypeScript] Protected & Static Protected private와 비슷한 키워드로, private는 자신의 class {} 안에서만 사용과 수정이 가능했다면, protected는 자신의 class {} 와 extends로 복사한 클래스까지 사용과 수정이 가능하다. class User { protected x = 10; } class NewUser extends User { addX(){ this.x = 20; } } User를 extends 하는 NewUser에서 x는 가져다가 사용할 때, x가 private 속성일 경우 에러가 나지만, x가 protected 속성일 경우엔 에러가 나지 않는다. class를 여러개 만들 때 class 끼리 공유할 수 있는 속성을 만들 때는 protected, 자신 class안에서만 사용할 수 있는 속성.. 2022. 7. 7.
반응형

티스토리툴바