BBZJUN's
[하나은행] Digital hana 路
JAVA
J1
JavaScript
NEXT
N1
N2
N3_강재준의 과제2셋팅
React
R1
R2
R3
R4 copy
R4
SQL
Spring
TypeScript
T1
T2
T3
T4
공부
JavaScript
기술면접
프론트엔드
코딩테스트
백준
코드트리
알고리즘이름(1)
알고리즘이름(2)
JAVA개념
Home
Contact
Copyright © 2024 |
Yankos
BBZJUN
>
[하나은행] Digital hana 路
> TypeScript
...
TypeScript
TypeScript
타입스크립트 ##
[하나은행] Digital hana 路
· 2024-09-12
TypeScript
타입스크립트 ##
[하나은행] Digital hana 路
· 2024-09-11
TypeScript
타입스크립트 함수타입 // Call Signature: (a:number, b:number) => number function add(a : number, b: number) { return a + b; } add(1); //Error : Expected 2 arguments, but got 1. add(1, 2); // Ok add(1, 2, 3); //Error : Expected 2 arguments, but got 3. 타입스크립트는 함수에 선언된 모든 매개변수가 필수라고 가정한다! const introduce = (name:string, height?:number) => { //?는 옵셔널파라미터 있어도되고 없어도 되고 console.log(`이름 : ${name}`); console.log(`키 : ${height + 10}`) //Error : 'height' is possibly 'undefined'. } introduce("김현준"); // OK introduce("김현준", undefined); // OK introduce("김현준", 170); // OK 함수 호출에 선택적 매개변수를 인수로 제공할 필요 X 선택적 매개변수에는 항상 | undefined 가 유니언타입으로 추가 되어있기 때문! 선택적 매개변수는 끝에 위치해야함 const introduce2 = (name:string, height : number|undefined ) => { console.log(`이름 : ${name}`); if(typeof height === 'number'){ console.log(`키 : ${height + 10}`) } } introduce2("김현준"); // Error : Expected 2 arguments, but got 1. introduce2("김현준", undefined); // OK introduce2("김현준", 170); // OK 선택적 매개변수는 | undefined를 포함하는 유니언 타입 매개변수와 다름. ?으로 표시된 선택적 매개변수가 아닌 매개변수는 값이 명시적으로 undefined 일지라도 항상 제공되어야 한다. const getSum = (...rest: number[]) =>{ //rest로 여러개의 넘버를 받음(넘버만!) const getSum2 = (a: number,...rest:[number, number]) =>{ //튜플로 rest로 두개의 넘버를 받음 function singSongRecursive(songs : string[], count = 0) : number { return songs.length ? singSongRecursive(songs.slice(1), count + 1) : count; } // 재귀함수에서의 명시적 반환 타입지정 let singer : (song : string) => string; singer = function(song) { // song : string의 타입 return `Singing : ${song.toUpperCase()}!`; // OK } //타입 스크립트는 선언된 타입의 위치에 제공된 함수의 매개변수 타입을 유추할 수 있다! void 반환타입 function logSong(song : string) : void { if(!song){ return; // OK! return undefined; 도 OK! } console.log(`${song}`); return true; // Error! - Type 'boolean' is not assignable to type 'void'. } // ← void를 반환하도록 선언되었으므로 값 반환을 허용하지 않음. // But, 다음과 같이 화살표 함수는 구문 오류 없음! type VoidReturn = () => void; const test2:VoidReturn = () => 11; // OK! test2().toString(); // ? //일부 함수는 어떤 값도 반환하지 않을 수 있음 -> 타입스크립트는 void 키워드를 사용해 반환값이 없는 함수의 타입을 확인할 수 있음 //void는 그냥 반환을 하려해도 타입스크립트는 검사를 안한다 //fuction은 등록을 해야해서 void를 썻는데 return이 있으면 오류뜨고 //화살표함수는 이미 등록이라서 void인데 return이 있어도 ㅇㅋ never 반환타입 never 반환 함수는 (의도적으로) 항상 오류를 발생시키거나 무한 루프를 실행하는 함수 function fail(message : string) : never { throw new Error(`Invariant Failure : ${message}`); // JS는 return undefined; 가 생략 } function workWithUnsafeParam(param : unknown){ if(typeof param !== "string"){ fail(`param should be a string, not ${typeof param}`); } // 여기에서 param의 타입은 string으로 알려짐 param.toUpperCase(); } 함수 오버로드 동일한 이름에 매개 변수만 다른 여러 버전의 함수를 만드는 것 매개변수의 형태가 다양한 여러 케이스에 대응하는 같은 이름을 가진 함수를 만드는 것 // 서로 다른 버전의 함수들(선언부) -> `오버로드 시그니처` function func(a : number): void; function func(a : number, b : number, c : number) : void; // 실제 구현부 -> `구현 시그니처` function func(a:number, b?: number, c?:number) { if(typeof b === 'number' && typeof c === 'number') { console.log(a + b + c); } else { console.log(a * 20); } } func(1); func(1,2,3); this 동일한 이름에 매개 변수만 다른 여러 버전의 함수를 만드는 것 매개변수의 형태가 다양한 여러 케이스에 대응하는 같은 이름을 가진 함수를 만드는 것 function f(cb: (this: void) => number) { return cb(); } // 이 함수 f는 콜백 함수 cb를 매개변수로 받고 있는데, cb는 this를 사용하지 않는 함수여야 한다는 것을 명시하고 있습니다. 이를 위해 cb의 타입으로 (this: void) => number를 지정했는데, 이는 this가 void 타입임을 나타냅니다. 즉, this를 사용하지 않는 함수여야 한다는 뜻입니다. const obj = { id: 1 }; function x(this: typeof obj) { return this.id; } function y() { return 1; } f(x); // Fail f(y); // OK // f(x): // 실패하는 이유는 x 함수가 this로 obj를 필요로 하지만, f 함수는 cb의 this가 void라고 명시했기 때문입니다. 즉, f는 this를 사용하지 않는 함수만 받을 수 있는데, x는 this를 사용하므로 타입 호환이 되지 않습니다. // 오류 메시지에서 설명하듯이, void 타입의 this는 { id: number }와 호환되지 않습니다. // f(y): // 성공하는 이유는 y 함수는 this를 사용하지 않으므로, this: void로 선언된 콜백 함수로 사용할 수 있기 때문입니다. Tip. tsconfig.json 에서 strict: true 가 포함하는 옵션들 { "strict": true, "strictNullChecks": true, "strictFunctionTypes": true, "strictBindCallApply": true, "strictPropertyInitialization": true, "noImplicitThis": true, "alwaysStrict": true, } // noUncheckedIndexedAccess : 해당 index의 값이 undefined일 수 있음을 체크하겠다! 이 옵션을 true로 설정하면 인덱스 시그니처에 'undefined'를 포함시킨다! 결합 concat을 이용한 결합 const nums1 = [1, 2, 3, 4, 5]; const nums2 = [10, 20, 30, 40, 50]; const result1 = nums1.concat(nums2); // 당연히 result1은 number[] const strings1 = ['lim', 'eun', 'ha']; const result2 = result1.concat(strings1);// 에러가 뜬다. concat은 결합할 것의 타입이 같아야함 spread를 이용한 결합 const nums1 = [1, 2, 3, 4, 5]; const nums2 = [10, 20, 30, 40, 50]; const result1 = nums1.concat(nums2); // 당연히 result1은 number[] const strings1 = ['lim', 'eun', 'ha']; const result2 = [...result1, …strings1]; // 둘을 결합한 result2는 ?? (string | number)[] 튜플 고정된 크기의 배열. 각 인덱스에 알려진 특정 타입을 갖는다! 즉) 자리수가 고정이 튜플인것이다. 튜플 타입은 가변 길이의 배열보다 더 구체적이다! 따라서, 배열은 튜플 타입의 변수에 할당할 수 없다. 타입스크립트는 튜플의 길이를 알고있다. 따라서 길이가 다른 튜플은 서로 할당할 수 없다! 인수에 배열 스프레드를 사용한 경우 해당 함수는 나머지 매개변수가 꼭 있어야 한다. 나머지 매개변수가 없다면 배열을 전달할 경우 반드시 튜플만 스프레드하여 전달할 수 있다! /** 함수의 매개변수 튜플 인터페이스 타입스크립트에서 인터페이스(interface)는 객체의 구조를 정의하는 데 사용되는 일종의 계약(Contract)입니다. 인터페이스는 객체가 어떤 속성을 가져야 하는지, 그리고 그 속성들이 어떤 타입이어야 하는지를 명시합니다. interface User { id: number; name: string; age?: number; // 선택적 속성 (optional property) } let user1: User = { id: 1, name: "Alice" }; let user2: User = { id: 2, name: "Bob", age: 30 }; // interface Greet { (name: string): string; } const greetUser: Greet = (name: string) => { return `Hello, ${name}`; }; console.log(greetUser("Alice")); // 출력: Hello, Alice 숫자 인덱스 시그니처(경력자 질문으로 많이 물어본다) 왜 오류가 날까? 넘버가 통과를 못해서? 어떻게 해결을 할까? ###
[하나은행] Digital hana 路
· 2024-09-10
TypeScript
타입스크립트? 타입스크립트의 구성 4가지 프로그래밍 언어: 새로운 구문이 포함된 언어 타입 검사기(TypeChecker): 코드의 모든 구성요소(함수,변수 등)를 이해하고 오류 감별 컴파일러(Pre-Compiler): TS Syntax-tree를 JS Code로 생성 (cf. AltJS) Pre 는 선처리가 된다는 말 언어지원 서비스(IDE): VSCode, SublimeText, Vim 등의 편집기에서 TS 지원 타입스크립트 연습하는 사이트 https://www.typescriptlang.org/play/ Settings의 AST를 check하고, 버전을 v5.1.6으로 하여 AST를 확인하자 타입스크립트는 전역의 i와 함수의 i는 서로 다른 심볼로 같은 변수라도 스코프에 따라서 에러가 날 수도 있고 안날 수도 있다. 타입스크립트 설치하기 $> mkdir ts && cd ts $> npm init -y $> npm install -g typescript ts-node $> tsc -v $> tsc --init $> cat tsconfig.json $> ts-node hello.ts ts파일을 만들고 git bash에 tsc 입력하면 js파일이 생김 그리고 tsc –watch를 git bash에 입력해두면 ts파일을 수정하면 자동으로 js파일도 바뀜 타입스크립트의 타입 //null let value: null = null; //undefined let value: undefined = undefined; //boolean let isDone: boolean = false; //string let name: string = "TypeScript"; let greeting: string = `Hello, ${name}`; //큰따옴표("), 작은따옴표('), 또는 백틱(`)을 사용하여 문자열을 정의할 수 있습니다 //number let count: number = 10; let pi: number = 3.14159; //bigint let largeNumber: bigint = 123456789012345678901234567890n; //symbol let sym1 = Symbol("description"); let sym2 = Symbol("description"); // 서로 다른 Symbol 값 //고유하고 변경 불가능한 값으로, 객체의 속성 키로 사용할 수 있습니다. 타입설정하기 let x: number; x=10; console.log("🚀 x:", x); x='abc'; console.log("🚀 x:", x); 로 하면 x는 number로 되어있기에 abc에서 오류뜸 따라서 let x: number sring;으로 해줌 > 유니언(union, (파이프)): 값에 허용되는 타입을 두 개 이상의 가능한 타입으로 확장하는 것 초기값이 없는 변수 타입 undefined로 주자 (any로 주지 말자) 할당 되기 전, 속성 중 하나에 접근 하려고 하는 것처럼 변수를 사용하려고 하면 에러 발생 undefined 유니온 타입일 때 접근 가능한 이유는 undefined 할당 가능성을 미리 알렸기 때문 JS에서는 값을 할당하지 않는다면 초기화 값인 undefined를 참조, TS에선 이를 미리 타입으로 설정해야 참조 가능 => 결론: undefined 가능성을 미리 알리지 않았기 때문에 할당 없이 접근하려고 했을 때 에러 발생 type 정의 타입스크립트에서 type 키워드를 사용하여 객체의 타입을 정의하는 방법은 매우 유용합니다. 이를 통해 객체 구조를 미리 정의하고, 해당 구조를 여러 곳에서 재사용할 수 있습니다. type 키워드를 사용하여 특정 타입의 형식을 정의할 수 있으며, 인터페이스와 유사하게 동작합니다. type User = { id:number; name:string; age:number; address:string; } 스크립트 파일의 선언 스코프 타입스크립트에서 “스크립트 파일”은 전역 스코프에서 실행됩니다. 즉, 파일 간에 명시적인 import나 export가 없으면, 모든 선언(변수, 함수 등)이 전역 스코프에 존재하게 됩니다. 따라서 한 스크립트 파일에서 선언된 변수가 다른 스크립트 파일과 충돌할 수 있습니다. 스크립트 파일의 특징: 전역 스코프에 존재. 다른 스크립트 파일에서도 동일한 이름의 변수를 선언할 수 없음. 서로 다른 파일에 동일한 변수를 선언하면 충돌이 발생. // a.ts (스크립트 파일로 간주됨 - import/export 없음) const shared = 'Cher'; // b.ts (또 다른 스크립트 파일) const shared = 'Cher'; // 오류 발생: 이미 전역에 같은 이름의 변수가 존재 이 경우 타입스크립트는 shared 변수가 전역 스코프에서 중복 선언된 것으로 판단해 오류를 발생시킵니다. ECMAScript 모듈의 선언 스코프 모듈 시스템을 사용할 때는 import와 export를 통해 각 파일이 모듈 단위로 동작하게 됩니다. 모듈 파일은 각각 자체적인 스코프를 가지며, 파일 간의 변수 충돌이 발생하지 않습니다. 즉, 파일 간의 이름 충돌은 피할 수 있습니다. 하지만 동일한 모듈 내에서 선언이 충돌하면 오류가 발생합니다. 모듈 파일의 특징: 파일이 모듈로 간주되면, 각 모듈은 자체적인 스코프를 가짐. 같은 이름의 변수를 여러 파일에서 선언해도 충돌이 발생하지 않음. 하지만 같은 파일 내에서 import된 변수와 동일한 이름의 변수를 다시 선언하면 오류가 발생. // a.ts (모듈 파일) export const shared = 'Cher'; // b.ts (모듈 파일) export const shared = 'Cher'; // c.ts (모듈 파일) import { shared } from './a'; // 'shared'는 'a.ts'에서 import됨 export const shared = 'Cher'; // 오류: 동일한 이름의 변수를 동일 파일에서 다시 선언할 수 없음 스크립트 파일: 전역 스코프를 공유하기 때문에 파일 간 변수 충돌이 발생할 수 있습니다. 모듈 파일: 파일 간에 독립된 스코프를 가지지만, 같은 파일 내에서 동일한 이름의 변수를 선언하면 오류가 발생합니다. 리터럴 타입 리터럴 타입(Literal Types)은 타입스크립트에서 더 구체적인 값으로 변수를 제한할 수 있는 기능입니다. 원시 타입(숫자, 문자열 등)의 특정 값 자체를 타입으로 사용하여, 특정 값만을 허용하는 방식입니다. 이를 통해 타입 안전성을 높이고 코드에서 명확한 제약을 설정할 수 있습니다. let direction: 'left' | 'right' | 'up' | 'down'; direction = 'left'; // 가능 direction = 'up'; // 가능 direction = 'forward'; // 오류: 'forward'는 허용되지 않음 유니언 타입(|)과 인터섹션 타입(&) 유니언 타입은 두 개 이상의 타입 중 하나를 가질 수 있도록 허용합니다. 즉, 값이 여러 타입 중 하나를 선택할 수 있는 상황에서 사용됩니다. type A = string | number; let value: A; value = "Hello"; // 문자열 할당 가능 value = 123; // 숫자 할당 가능 value = true; // 오류: boolean은 허용되지 않음 인터섹션 타입은 두 개 이상의 타입을 모두 만족해야 합니다. 즉, 타입들이 합쳐져서 모든 타입의 속성이나 메서드를 모두 갖는 하나의 타입이 됩니다. ```typescript type B = { name: string } & { age: number }; let person: B; person = { name: “John”, age: 30 }; // 가능 person = { name: “John” }; // 오류: age 속성이 없음 person = { age: 30 }; // 오류: name 속성이 없음 --- ### strictNullChecks 엄격한 null 검사 활성화 / 비활성화: null 혹은 undefined 값을 참조/할당 했을 때 타입 에러 발생 여부 ⇒ 10억 달러의 실수! (NullPointerException) ⇒ `strict: true` > 폴더이름config.json의 `"strictNullChecks": true`로 해주자!!!! 엄격한 null 검사 활성화: 다른 타입이 필요한 위치에서 null 혹은 undefined 값을 참조/할당 하는 것을 방지한다! (즉, 활성화해야만 null 및 undefined에 대해한 오류로 부터 안전해진다!) --- ### 할당 ```typescript let xuser: {id: number, name: string}; xuser = {id: 1, name: 'xx'}; // OK xuser = {id: 1}; // Error: name 속성이 없습니다 xuser = {id: 1, name: 'xx', age: 30}; // Error: {id, name, age}는 {id, name}에 할당할 수 없습니다. 첫 번째 할당에서는 {id: number, name: string} 타입과 정확히 일치하므로 문제가 없습니다. 두 번째 할당은 name 속성이 누락되어 오류가 발생합니다. 세 번째 할당은 추가 속성(age)이 포함되어 있어, 타입스크립트는 예상된 타입에 불필요한 속성이 있다고 판단해 오류를 발생시킵니다. 이는 신선함 검사(freshness check)에 의해 발생한 것입니다. hong = {id: 1, name: 'Hong', addr: 'Pusan'} as TUser; // OK as TUser를 사용하면 타입스크립트는 신선함 검사를 비활성화합니다. 이 경우, 타입스크립트는 이 객체가 TUser라고 간주하고, 추가된 속성 addr을 무시합니다. 즉, 타입 단언(assertion)을 사용해 추가된 속성 검사 오류를 무시할 수 있습니다. CoVariance & ContraVariance // strictFunctionTypes = true function f(cb: (input: string | number)=> number) {return cb(1);} function f2(input: string | number | boolean) {return 1;} function f3(input: string | number) {return 1;} function f4(input: string) {return 1;} f(f2); f(f3); f(f4); f 함수는 매개변수로 (input: string | number) => number 타입의 콜백 함수 cb를 받습니다. 즉, cb는 string 또는 number 타입의 입력을 받을 수 있어야 합니다. f2는 string | number | boolean 타입의 매개변수를 받을 수 있습니다. 문제: f2는 boolean 타입도 받을 수 있는 콜백 함수이지만, f는 boolean을 허용하지 않습니다. 타입스크립트는 매개변수의 반공변성(contravariance) 때문에 더 넓은 타입(즉, boolean까지 포함하는 f2)을 더 좁은 타입(string | number만 허용하는 f)에 할당하는 것을 허용하지 않습니다. 요약: f2는 boolean 타입까지 허용하므로, f에 사용할 수 없습니다. 그러나 TypeScript는 실제로는 함수 매개변수의 반공변성을 완전히 엄격하게 적용하지 않고, 어떤 상황에서는 더 넓은 타입을 허용합니다. 이 경우, 매개변수 타입이 넓은 함수인 f2를 매개변수 타입이 좁은 함수인 f의 콜백으로 사용해도 오류가 발생하지 않습니다. 이런 허용은 TypeScript가 실무에서 좀 더 유연하게 사용될 수 있도록 일부러 설계된 부분입니다. 즉, TypeScript는 완전한 반공변성을 강제하지 않고, 보다 유연하게 함수 타입을 비교하는 경우가 있습니다. f3는 string | number 타입을 매개변수로 받으며, 이는 f가 요구하는 타입과 일치합니다. 문제 없음: f3의 시그니처는 f의 요구 사항과 정확히 일치하므로, f(f3)는 정상적으로 작동합니다. f4는 string만 매개변수로 받습니다. 문제: f4는 number 타입의 입력을 처리하지 못합니다. 하지만 f는 콜백 함수가 string | number 타입의 입력을 처리할 수 있어야 한다고 요구합니다. f는 number를 전달할 수 있지만, f4는 number를 허용하지 않기 때문에 오류가 발생합니다. 요약: f4는 number를 처리할 수 없기 때문에 f(f4)는 허용되지 않습니다. 0910 아침 정리 유니온 A B는 A 또는 B가 할당 가능하다는 뜻 인터섹션 A&B는 A와B가 합쳐진 것
[하나은행] Digital hana 路
· 2024-09-09
<
>
Touch background to close
BBZJUN's
