Typescript
-
Object타입 변환기 만들기, 조건문이용과 inferTypescript 2022. 6. 18. 08:21
먼저, keyof 연산자를 알아보자. let obj = {name : 'Kim'} Object.keys(obj) //키 값 가져옴 원래는 이렇게 쓰는데 key값을 가져오는데 keyof를 사용할 수 있다. interface Person { age: number; name: string; } type PersonKeys = keyof Person; //"age" | "name" 타입됩니다 let a :PersonKeys = 'age'; //가능 let b :PersonKeys = 'ageeee'; //불가능 이렇게 interface에 사용하면 key인 age | name이 남게된다. 이제, 타입변환기 (mapping)를 보면, type Car = { color: boolean, model : boolean,..
-
object의 index signaturesTypescript 2022. 6. 18. 02:40
오브젝트에 타입지정할 속성이 너무 많거나 어떤 속성이 들어올 수 있는지 아직 모르는 경우 index signatures를 사용하면 편리하다. interface StringOnly { [key: string]: string } let obj :StringOnly = { name : 'kim', age : '20', location : 'seoul' } 이렇게 적으면 모든 string타입의 키의 value값들은 string타입을 가진다가 된다. 또한 interface MyType { 'font-size' : { 'font-size' : { 'font-size' : number } } } let obj = { 'font-size' : { 'font-size' : { 'font-size' : 14 } } } 이..
-
implements키워드Typescript 2022. 6. 18. 02:18
interface는 object의 타입을 지정할 때 쓰는데, 용도가 하나 더 있다. 바로 class의 타입을 확인하고 싶을 때도 사용하는데, 이때 implements키워드도 필요하다. 클래스를 하나 만들어보면, class Car { model : string; price : number = 1000; constructor(a :string){ this.model = a } } let 붕붕이 = new Car('morning'); 여기 class Car로 부터 생산되는 object는 model과 price를 속성으로 가지게 되는데, 이 속성을 가지고 있는지 타입으로 확인하려면 interface + implements키워드를 사용한다. interface CarType { model : string, pric..
-
d.ts파일 이용하기Typescript 2022. 6. 18. 01:53
타입스크립트를 쓰다보면, test.d.ts라는 d.ts파일이 있을텐데 그 파일은 타입정의 보관용 파일이다. export type Age = number; export type multiply = (x :number ,y :number) => number export interface Person { name : string } 이런 식으로 파일이 있고, 다른 파일에서 import해서 사용하면 된다. tsconfig.json파일에서 "declaration" : true하면 ts파일마다 d.ts파일이 자동생성된다. 이렇게 만들어진 파일은 자동으로 글로벌 모듈이 아닌데, tsconfig.json파일에서 "typeRoots" : ["./types] 라고 쓰면 폴더가 만들어지는데 거기에 common이란 폴더를 하..
-
외부파일 이용시 declare & ambient moduleTypescript 2022. 6. 17. 16:52
.js에 있는 변수를 .ts에서 이용하고 싶을 때, declare를 사용한다. html css js파일은 그냥 를 이용하면 된다. 근데, 그러고 쓰면 에러가 뜬다 그래서 declare를 사용하는데, (data.js) var a = 10; var b = {name :'kim'}; (index.ts) declare let a :number; console.log(a + 1); 이렇게, declare로 a라는 변수가 어딘가에 있는데, number라고 재정의하면서 에러나지 마라! 라고 해주는게 된다. 그리고 declare는 힌트를 주는거기에 js파일로 변환이되진 않는다. 특히 .js로 만든 라이브러리 사용할 때 ts에서 엄청 에러가 나는데, $같은 제이쿼리도 다시 재정의 해줘야한다. 만약, .ts 에서 .ts파..
-
array에 붙이는 tuple typeTypescript 2022. 6. 17. 16:39
array에 타입을 지정할 때 위치까지 고려해서 타입지정이 가능하다. let 멍멍이 :[string, boolean?] = ['dog', true]; 이렇게 가능하다. 그리고, tuple안에도 ? 로 옵션표시가 가능하다. 대신 옵션표시를 하려면 젤 마지막에 해줘야한다. tuple을 함수에 응용해보면 function 함수(...x :[string, number] ){ console.log(x) } 함수('kim', 123) //가능 함수('kim', 123, 456) //에러 함수('kim', 'park') //에러 이렇게 쓰면 그냥 x의 자료타입을 정해서 어레이에 담아서 오게 된다. 사실 a : string, b : number이렇게 쓰는것과 똑같다. 마지막으로, let arr = [1,2,3] let ..
-
React와 Typescript 사용Typescript 2022. 6. 17. 16:18
요약해보면 변수, 함수 만들 때 타입지정하면 그냥 끝이다. 먼저 리액트에 타입스크립트를 셋팅해야한다. npx create-react-app 프로젝트명 --template typescript 이렇게 리액트 프로젝트명에 typescript를 설치해주고, 아니면 기존 프로젝트에 typescript를 설치하려면 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 이렇게 써주고, 기존 js폴더를 ts로 바꾸면 된다. 그리고 만약, JSX문법을 쓰는 파일은 .tsx 확장자로 쓰면 된다. 일반 변수나 함수에는 지금까지 한 것처럼 잘 타입정해서 하면 된다. 하지만, JSX표현하는 타입이 따로 있다. let 박스 :JSX...
-
타입을 파라미터로 입력하는 GenericTypescript 2022. 6. 17. 15:00
function 함수( x: MyType[] ) :MyType { return x[0]; } let a = 함수([4,2]) let b = 함수(['kim', 'park']) 함수를 만들 때, 함수 이름옆에 을 붙여주면 함수를 사용할 때, 을 적어주면 let a = 함수([4,2]) function 함수( x: number[] ) :number { return x[0]; } 이렇게 바뀌게 된다. Generic 함수를 쓰면 함수를 사용할 때마다 타입을 지정하면 되므로 확장성이 좀 생긴다. 근데, function 함수(x: MyType) { return x - 1 } let a = 함수(100) 이렇게 쓰면, 함수에 값도 숫자로 넣고, number라고 타입지정도 했는데 에러가 뜬다. 혹시 MyType에 문자..