IT/TypeScript

[TS] Node.js 환경에서 TypeScript 사용하기

타입스크립트로 작성된 파일을 Node.js에서 실행시키려면 ts-node를 통해 파일을 실행시켜야 한다. $ npm i ts-node $ ts-node index.ts 여기에 tsconfig에서 paths를 통해 절대경로를 설정한다면 tsconfig-paths를 추가로 설치해서 ts-node를 실행할 때 옵션을 추가해줘야 한다. $ npm i -D tsconfig-paths $ ts-node -r tsconfig-paths/register index.ts nodemon으로 타입스크립트 파일이 변경될 때마다 재시작하려면 실행 명령어를 아래와 같이 하면 된다. $ nodemon --exec ts-node -r tsconfig-paths/register index.ts 여기에 import, export를 사용..

[TS] const assertion (as const)

타입스크립트에서 변수를 const로 선언할 때와 let으로 선언할 때 타입 추론이 다르게 일어난다. let a = 'hi'; // let a: string const b = 'hi'; // const b: "hi" 타입스크립트는 string literal type을 지원하여 특정 문자열 자체를 타입으로 다룰 수 있다. const로 선언한 변수는 위와 같이 string이라는 넓은 범위의 타입 대신 구체적으로 딱 하나의 문자열인 'hi'를 가리키게 된다. 이는 다른 number 타입에서도 마찬가지이다. let a = 1; // let a: number const b = 1; // const b: 1 그런데 배열이나 객체의 경우에는 const로 선언하여도 문자열이나 숫자일 때처럼 구체적으로 범위를 좁히지 않..

[TS] CRA에서 tsconfig paths로 절대경로 설정하기 (react-app-alias)

{ "compilerOptions": { "baseUrl": "./src", "paths": { "@components/*": ["./components/*"], "@assets/*": ["./assets/*"], "@styles/*": ["./styles/*"], "@contexts/*": ["./contexts/*"], "@hooks/*": ["./hooks/*"], "@utils/*": ["./utils/*"] } } } import Header from '@components/Header'; 원래 위와 같이 tsconfig에 baseUrl과 paths 속성으로 절대 경로를 설정할 수 있다. 그러나 CRA로 React 환경을 구축했을 때에는 tsconfig에서 paths를 설정했는데도 경로를 인식하..

[TS] TypeScript가 SVG 파일을 import하지 못하여 에러가 발생할 때

위 사진처럼 svg 파일을 import할 때 TypeScript에서 svg에 대한 타입을 찾을 수 없으면 에러가 발생한다. 별도의 d.ts 파일을 만들어서 svg 파일에 대한 타입을 지정해주면 에러가 사라진다. // svg.d.ts declare module '*.svg' { const value: React.FunctionComponent; export default value; } 참고자료 https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript Unable to import svg files in typescript In typescript(*.tsx) files I cannot import svg fi..

[TS/Webpack/Jest] tsconfig paths를 사용할 때 Webpack, Jest 설정하기

TypeScript를 사용할 때 tsconfig에서 paths 설정을 통해 import 경로를 별도의 이름을 가진 절대 경로로 설정할 수 있다. paths를 설정하려면 baseUrl도 같이 설정해야 한다. { "compilerOptions": { "baseUrl": ".", "paths": { "@components/*": ["src/components/*"], "@assets/*": ["src/assets/*"], "@styles/*": ["src/styles/*"], "@contexts/*": ["src/contexts/*"], "@hooks/*": ["src/hooks/*"], "@utils/*": ["src/utils/*"] } } } 만약 CRA, CRN을 사용하지 않고 직접 Webpack 환경..