본문 바로가기

TypeScript

(18)
[TypeScript] Any, unknown, union any 타입 TypeScript에서 any 타입은 모든 타입의 슈퍼 타입 이는 어떤 타입의 값이든 저장할 수 있다는 의미 JavaScript의 object 타입과 같은 최상위 타입 let anything: any; anything = 5; // 최초에는 숫자를 넣었지만 anything = 'Hello'; // 문자열도 들어가고요 anything = { id: 1, name: 'John' }; // JSON도 들어가네요 프로그램의 안정성을 위해서 타입스크립트에서 가급적 any를 쓰지 않는 것이 좋음 unknown 타입 unknown 타입은 any 타입과 비슷한 역할을 하지만 더 안전한 방식으로 동작 unknown 타입의 변수에도 모든 타입의 값을 저장할 수 있다. 하지만, 그 값을 다른 타입의 변수에 할당..
[TypeScript] const, readonly let let 키워드를 사용하면 변수가 되고, let 으로 선언된 값은 변경할 수 있다. let num: number = 5; console.log(num); // 출력: 5 num = 10; console.log(num); // 출력: 10 const const로 값을 선언하면 변수가 아닌 상수가 된다. 상수는 값을 변경할 수 없고 재할당 할 수 없다. 그러나 배열로서 추가 삭제는 가능 const num: number = 5; console.log(num); // 출력: 5 num = 10; // 에러: 'num'은 const로 선언되었으므로 다시 할당될 수 없어요! const nums: number[] = []; console.log(nums); // 출력: [] nums.push(1); // 할당은..
[TypeScript] 기본 타입 익히기 타입을 제대로 알아야 하는 이유 1. 변수 변수 : 프로그래밍 언어에서 변수는 데이터를 저장하는 공간 2. 변수와 타입 변수에 저장되는 데이터는 여러가지 타입이 있을 수 있는데, 타입을 이해하고 올바르게 사용하면 코드의 가독성과 안정성이 향상된다. TypeScript 의 장점 TypeScript는 정적 타입 시스템을 도입함으로써 이러한 이점들을 제공하고 있다. 개발자들이 더 안정적이고 효율적인 코드를 작성할 수 있게 도와준다. 이를 통해 프로젝트의 전반적인 품질이 향상되고, 더 나은 소프트웨어 개발 경험을 제공할 수 있다 [기본 타입 종류] 1. boolean(불리언) 2. number(숫자) 3. string(문자) 4. array(배열) 5. tuple(튜플) 튜플은 서로 다른 타입의 원소를 순서에 ..
[TypeScript] JavaScript 라이브러리를 TypeScript 에서 사용하기 1. cd desktop -> mkdir [디렉토리명] -> cd [디렉토리명] 이후 다음과 같이 입력 npm init -y 2. tsconfig.json을 생성하여 TypeScript 프로젝트로 변환 tsc --init 3. tsconfig.json 을 열어서 아래의 옵션 주석해제하여 true 로 만듬. "allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부 "checkJs": true // JavaScript 파일 타입 체크 여부 4. TypeScript에서 사용하고 싶은 커스텀 JavaScript 라이브러리(test.js)를 만듬 아래의 주석문은 JSDoc 라고 하며, API 의 시그니처 (인자, 리턴타입) 을 설명하는 HTML 문서 생성기이다. 이를 통..
[TypeScript] .d.ts 파일 .d.ts 파일 .d.ts 파일은 JavaScript 라이브러리도 TypeScript 코드에서 사용할 수 있게 함 생각해볼 것 TypeScript 보다 JavaScript 코드의 양이 매우 많을텐데 , 이미작성된 다양한 JavaScript 라이브러리와 호환성을 유지하는 방법은? @types 라이브러리의 등장 TypeScript는 @types 라이브러리를 통해 외부 라이브러리에 대한 타입 정보를 제공한다. 그런데 해당 디렉토리를 들어가보면 .d.ts 파일들이엄청 많다. .d.ts 파일 .d.ts 파일은 TypeScript 타입 정의 파일이다. 즉 JavaScript 라이브러리에 대한 타입 정보를 제공한다. .d.ts 파일로 TypeScript 컴파일러는 다음을 알 수 있음. 외부 라이브러리의 함수 타입 정..
[TypeScript] tsconfig.json 옵션 tsconfig.json 이란 tsc --init 명령을 실행하면 생성되는 파일로, tsconfig.json 은 TypeScript 프로젝트의 설정 파일이다. 주로 프로젝트의 컴파일 옵션 및 입력파일을 정의하는데 사용 됨. tsconfig.json 주요 옵션 옵션 매뉴얼 https://www.typescriptlang.org/ko/tsconfig 1. compilerOptions - strict 옵션 - 무조건 true 엄격한 타입 검사 옵션을 모두 활성화 하는 옵션으로, TypeScript 컴파일러가 보다 엄격한 타입 검사를 수행해 코드의 실수를 미리 찾아낼 수 있음. 해당 옵션을 true 로 선택하면 아래의 옵션들도 자동으로 true 가 된다. strictNullChecks: 잠재적으로 null(un..
[TypeScript] 컴파일러와 tsc (타입스크립트 컴파일러) 컴파일러 프로그래밍 언어로 작성된 소스코드 -> 다른 프로그래밍언어로 변환하는 도구 이러한 변환 과정에서 컴파일러는 소스 코드의 구문과 구조를 검사해서 문제가 없는지 확인한다. 특정 프로그래밍언어가 정적 언어로써의 정체성을 유지할 수 있음. 컴파일러의 역할 1. 타입 검사 TypeScript 컴파일러는 소스 코드의 정적 타입 검사를 수행한다. 이를 통해 개발자는 타입 관련 오류를 미리 발견하고 수정함. 2. 코드변환 타입스크립트 컴파일러인 tsc는 TypeScript -> JavaScript 코드 변환을 해준다. 컴파일러의 매력 1. 에러메세지 해석에 큰 도움을 받을 수 있다. 컴파일러는 소스코드에서 문제가 발견되면 에러 메세지를 출력함. 컴파일러를 이해하면 에러 메세지를 보다 정확하게 해석하고 문제 해..
[TypeScript] 맥 TypeScript 개발환경 구축 Mac 타입스크립트 개발환경 1. 아래 사이트에 접속하여 아래의 두 명령어 중 하나만 터미널에 입력 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active nod..