본문 바로가기

타입스크립트( TypeScript)10

[타입스크립트] class 접근 제어자 private, public class의 접근 제어자 private, public을 다루어보자 class Department { name: string; private employees: string[] = []; constructor(n: string) { this.name = n; } describe(this: Department) { console.log('Department: ' + this.name); } addEmployee(employee: string) { this.employees.push(employee); } } Department라는 class가 존재한다 addEmployee 함수를 이용해보자 const accounting = new Department('Accounting'); accounting.addEmp.. 2022. 12. 4.
[타입스크립트] tsconfig.json "lib" 속성 test.ts 파일이 있다 const button = document.querySelector('button')!; button.addEventListener('click', () => { console.log('Button has been clicked.') }) ts 파일은 왜 document 가 unknown 이라 인식하지 않으며 button이 addEventListener를 가지고 있음을 알고있을까 ? 그것은 tsconfig.json 파일 속성에서 default로 설정이 되어있기 떄문이다 { "compilerOptions": { } } 파일안에 compilerOptions 말 그대로 컴파일 시 설정을 할 수 있는 옵션이 있다 ts 가 dom을 인식할 수 있는 부분은 { "compilerOption.. 2022. 12. 4.
[타입스크립트] 타입스크립트 --watch 속성 과 exclude, include 속성 타입스크립트 코드를 작상하며 변경된 코드가 있을떄 계속해서 tsc test.ts 으로 컴파일 하는것은 굉장히 번거롭다 이런 반복적인 작업을 최소화 하기 위해서 --watch or -w 를 사용할 수 있다 기존에 컴파일을 tsc test.ts 로 하였다면 지속적으로 지켜보기(watch) 위해서 tsc test.ts --watch 를 사용하면 된다 --watch는 짧게 -w 로 작성할 수 있다 tsc test.ts --watch tsc test.ts -w 위의 방법은 하나의 파일에 대해서만 적용이 가능하다 그렇다면 여러 파일에 대해서 변경사항을 간편하게 저장하기 위해서는 어찌해야할까 ? tsc --init // 명령어가 실행되며 tsconfig.json 파일이 생성된다 and tsc --watch 을 해주면.. 2022. 11. 30.
[타입스크립트] 함수 Function 타입 우리는 지금까지 함수의 parameters나 함수가 반환하는 값에 대해서 타입을 지정하는 것을 보았다 이번에는 함수 타입(Function Type)을 알아보자 function add(n1: number, n2: number) { return n1 + n2; } let combineValues; combineValues = add; console.log(combineValues(3, 4)); // 7 let combineValues 를 선언하고 함수 add를 할당해주면 우리는 combineValues를 add와 동일하게 사용한다 그러면 도중에 combineValues에 5를 넣어주면 어떻게 될까 ? function add(n1: number, n2: number) { return n1 + n2; } let.. 2022. 11. 16.
타입스크립트 리터럴 타입(Literal Type) 타입스크립트(TypeScript)의 리터널 타입(Literal Type)은 string, number 두 가지가 존재하며 정확한 값을 지정하여 사용 combine 함수 3번쨰 인자 resultConversion 은 'as-number' | 'as-text' 로 문자형 리터럴 타입(String Literal Type)으로 두 가지의 경우의 값만 받을 수 있다고 명시적으로 나타내고 있다 기존에는 input1, input2 의 type이 number인 경우에만 숫자로 return을 했지만 3번쨰 인자 'as-number' 을 추가함으로써 input1, input2 의 타입과 상관없이 'as-number' 인 경우에 숫자로 return 한다 function combine( input1: number | stri.. 2022. 11. 12.
타입스크립트 유니온(Union) 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자( || )와 같이 A이거나 B이다 라는 의미의 타입입니다. function combine(input1: number | string, input2: number | string) { let result; if (typeof input1 === 'number' && typeof input2 === 'number') { result = input1 + input2; } else { result = input1.toString() + input2.toString(); } return result; } const combinedAges = combine(30, 26); console.log(combinedAges); // 56 const combi.. 2022. 11. 12.