본문 바로가기

programming_kr/typescript8

tsconfig.json이 하는 역할 typescript로 프로젝트를 진행하면서 '도대체 내가 뭘 하고 있는지 모르겠다'는 생각이 들기 시작했습니다. 여러가지 설정이 있는데 공식 사이트에서 해주는 가이드대로 하기 바빴고 실제로 tsconfig.json 파일이 하는 역할을 제대로 알지 못했습니다. 그래서 tsconfig.json 파일이 어떤 역할을 하는지 알아보게 되었습니다. 일단 tsconfig.json을 만들지 않아도 tsc를 그냥 사용할 수 있습니다. tsc를 통해서 원하는 .ts파일을 .js로 컴파일 할 수 있습니다. $ tsc hello.ts 위와 같이 실행 시 동일한 위치에 hello.js 파일이 생성된 것을 확인 할 수 있고 tsc는 tsconfig.json 파일 없이도 바로 사용할 수 있다. 그러면 왜 tsconfig.json을.. 2023. 2. 25.
typescript type과 interface의 차이 typescript를 공부하던 중 어떤 곳에는 type를 쓰고 어떤 곳에는 interface를 써서 정확히 어떤 차이점이 있는지 이해할 수 없었습니다. 그래서 이 부분에 대해 알아보았습니다. interface AnimalInterface { species: string height: number weight: number } const tiger: AnimalInterface = { species: 'tiger', height: 200, weight: 300 } type AnimalType = { species: string, height: number, weight: number } const lion: AnimalType = { species: 'lion', height: 180, weight: 40.. 2021. 10. 30.
tsconfig.json "구성 파일에서 입력을 찾을 수 없습니다." 오류 tsconfig.json을 설정하는데 문제가 발생했습니다. 아래와 같은 에러가 발생했는데요. 답은 에러 메세지에서 확인할 수 있었습니다. 저 메세지가 나왔을 때의 제 파일 경로 입니다. 왜 오류가 발생했는지 보이시나요? 현재 src폴더에 js파일들만 있습니다. tsconfig.json파일에서는 tsc파일을 js파일로 컴파일 하는 옵션들이 들어있는데 src파일에는 정작 컴파일 해야할 ts파일이 없었습니다. 그래서 src 하위 경로의 js파일들을 ts파일로 변경하니 오류가 사라졌습니다. 오류 메세지를 정확히 파악하는 습관을 들여야겠습니다. ts파일로 수정해도 안된다면 vscode의 단순 오류일 가능성도 있기 때문에 vscode를 재실행 해보시기 바랍니다. 2021. 10. 22.
Type Script 기초 배우기 5[Generics] 제네릭(Generics)은 타입스크립트에서 function, class, interface, type을 사용하게 될 때 여러 종류의 타입에 대하여 호환을 맞춰야 하는 상황에서 사용하는 문법입니다. A 와 B 가 어떤 타입이 올 지 모르기 떄문에 이런 상황에서는 any라는 타입을 쓸 수도 있습니다. function merge(a: any, b: any): any{ return { ...a, ...b } } const merged = merge({foo:1}, {bar:1}); 그런데 이렇게 하면 타입추론이 모두 깨진거나 다름이 없습니다. 결과가 any라는 것은 즉 merged안에 어떤 타입이 들어있는지 알 수 없다는 것입니다. 이런 상황에 generic을 사용하면 됩니다. 제네릭은 다음과 같이 사용합니다... 2021. 10. 14.
Type Script 기초 배우기 4[interface] interface는 클래스 또는 객체를 위한 타입을 지정 할 때 사용되는 문법입니다. 우리가 클래스를 만들 때, 특정 조건을 준수해야 함을 명시하고 싶을 때 interface를 사용하여 클래스가 가지고 있어야 할 요구사항을 설정합니다. 그리고 클래스를 선언 할 때 implements키워드를 사용하여 해당 클래스가 특정 interface의 요구사항을 구현한다는 것을 명시합니다. 다음 코드를 작성해봅시다. // Shape 라는 interface 를 선언 interface Shape { getArea(): number; // Shape interface 에는 getArea 라는 함수가 꼭 있어야 하며 해당 함수의 반환값은 number입니다. } class Circle implements Shape { // `.. 2021. 10. 11.
Type Script 기초 배우기 3[함수] 이어서 타입스크립트의 함수에 대해 알아보겠습니다. function sum(x: number, y: number): number { //파라미터 옆에 타입 지정, 함수 옆에 return타입 지정 return x + y; } sum(1, 2); 타입스크립트에서는 파라미터와 리턴 타입을 지정할 수 있습니다. 만약 함수를 호출할 때 타입이 맞지 않은 파라미터를 넣거나 함수 안에서 지정한 리턴 타입이 아닐 경우 아래와 같이 에러가 발생합니다. 타입스크립트를 사용하면 함수를 잘못 호출하는 것을 사전에 방지할 수 있습니다. 다음에는 아래와 같이 함수를 작성해봅시다. function sumArray(numbers: number[]): number { return numbers.reduce((acc, current) =.. 2021. 10. 8.