TypeScript(14)
-
[TypeScript] 조건문으로 타입만들기 & infer
⚡️삼항연산자 자바스크립트 기본 문법 중에 삼항연산자라는게 있습니다. if가 들어갈 수 없는 곳들에 간략하게 if문을 넣을 수 있는 방법입니다. 조건문 ? 참일때실행할코드 : 거짓일때실행할코드 3 > 1 ? console.log('맞아요') : console.log('아님') ⚡️조건부로 타입만들기 type Age = T; 이러면 이제 Age 이렇게 쓰면 그 자리에 number가 남습니다. (타입변수에도 타입파라미터 넣기 가능) if문을 사용하여 만약 T가 string이면 string, 그게 아니면 unknown 를 남기도록 하고싶다. 그럴때 타입 조건식은 주로 extends 키워드와 삼항연산자를 이용합니다. "extends는 왼쪽이 오른쪽의 성질을 가지고 있냐" 라는 뜻으로 사용할 수 있기 때문에 조건..
2023.01.02 -
[TypeScript] object 타입 변환기 만들기
⚡️object를 다른 타입으로 변환하고 싶을 때 모든 속성들에 문자가 들어오는 타입을 갑자기 숫자가 들어오도록 바꾸고 싶을 때 처음부터 타입을 다시 작성하는 것이 아니라 mapping을 이용하면 됩니다. ⚡️keyof 연산자 keyof 연산자는 object 타입에 사용하면 object 타입이 가지고 있는 모든 key값을 union type으로 합쳐서 내보내줍니다. object의 key를 뽑아서 새로운 타입을 만들고 싶을 때 사용하는 연산자입니다. interface Person { age: number; name: string; } type PersonKeys = keyof Person; //"age" | "name" 타입됩니다 let a :PersonKeys = 'age'; //가능 let b :Per..
2023.01.02 -
[TypeScript] object index signatures
⚡️object 자료에 타입을 미리 만들어주고 싶은 경우 1. object 자료에 어떤 속성들이 들어올 수 있는지 아직 모르는 경우 2. 타입지정할 속성이 너무 많은 경우 index signatures 를 사용하면 편리합니다. ⚡️index signatures object 용 타입을 하나 만들고 싶습니다. 근데 아직 어떤 속성이 들어올지 모르는 경우 index signatures 사용 interface StringOnly { [key: string]: string } let obj :StringOnly = { name : 'kim', age : '20', location : 'seoul' } 1. StringOnly 라는 interface를 하나 만들었습니다. 2. 근데 안에 타입을 적을 때 [어쩌구 :..
2023.01.02 -
[TypeScript] implements 키워드
⚡️implements 키워드 interface는 object 타입지정할 때 사용합니다. class 타입을 확인하고 싶을 때도 interface 문법을 사용할 수 있습니다. ( 근데 implements 키워드도 필요함 ) class Car { model : string; price : number = 1000; constructor(a :string){ this.model = a } } let 붕붕이 = new Car('morning'); 1. class Car 로부터 생산되는 object들은 model과 price 속성을 가지게 됩니다. 2. 근데 class가 model, price 속성을 가지고 있는지 타입으로 확인하고 싶을 때 사용방법 - interface + implements 키워드로 확인 in..
2023.01.02 -
[TypeScript] d.ts 파일 이용하기
⚡️d.ts 파일 이용하기 d.ts 파일은 타입만 저장할 수 있는 파일형식입니다. ( definition의 약자인 d가 들어감 ) 1. 타입정의만 따로 저장해놓고 import 해서 쓸 때 사용 2. 프로젝트에서 사용하는 타입을 쭉 정리해놓을 레퍼런스용으로 사용 ⚡️타입만 따로 d.ts에 모아놓으려면 export type Age = number; export type multiply = (x :number ,y :number) => number export interface Person { name : string } 1. 파일이름.d.ts 라고 작성하신 파일은 타입 정의만 넣을 수 있습니다. ( type 키워드, interface 키워드 이런식으로 정의 ) 2. 함수의 경우 함수에 { } 중괄호 붙이기는..
2023.01.02 -
[TypeScript] 외부 파일 이용시 declare & 이상한 특징인 ambient module
⚡️외부 파일 이용시 import 방법 다음 파일에서 import 문법으로 가져다가 사용할 경우 파일이 Typescript로 작성된게 아니라 JavaScript 로 작성된 파일이면 타입지정이 안되 있어서 무수한 에러가 발생하게 됩니다. 예를 들어서 data.js 라는 파일이 있는 a라는 변수를 index.ts 파일에서 사용한다면 (data.js) var a = 10; var b = {name :'kim'}; (index.ts) console.log(a + 1); 간단한 html css js 개발시엔 index.html에 저 파일 두개를 첨부하면 됩니다. (index.html) //index.ts에서 변환된 js 파일 콘솔창에 11 잘 나옵니다. 근데 타입스크립트 파일에선 a가 정의가 안되었다고 에러가 납..
2022.12.31