목록Frontend practice/TypeScript (6)
초보 개발자의 일기
공변성 반공 변성 타입 예시 function a(x: string): number { return 0; } //매개변수로 문자를 받아 숫자를 리턴 type B = (x: string) => number | string; let b: B = a; 함수 a는 문자를 받아서 숫자로 리턴하는 함수 근데 B는 문자를 받아 숫자나 문자로 리턴한다. b에 a를 대입하면 잘 대입이 된다. (서로 타입이 다른데 대입이 된다. ) 왜??? 리턴 값은 더 넓은 타입으로 대입할 수 있다. 반대 예시 function a(x: string): number | string { return 0; } type B = (x: string) => number; let b: B = a; 이건 안된다. 넓은 타입에서 작은 타입으로 대입은 안..
타입 추론하기 interface Arr { forEach(callback: (item: T) => void): void; } const a: Arr = [1, 2, 3]; a.forEach((item) => { console.log(item); item.toFixed(1); }); a.forEach((item) => { console.log(item); return "3"; }); const b: Arr = ["1", "2", "3"]; b.forEach((item) => { console.log(item); item.charAt(3); }); b.forEach((item) => { console.log(item); return "3"; }); 타입 직접 하나씩 만들어보기 interface Arr { f..
제네릭 function add (x: string|number, y: string|number): string|number { return x + y } add(1, 2); //3 add(1, 2); //3 add('1', '2'); //'12' add('1', '2'); //12' add(1, '2'); //'12' add('1', 2); //'12' 아래 2개가 틀림! 제네릭을 배우기 전 이렇게 작성하면 안 되는 코드 1,2를 더해서 3을 만들고 싶은데 string이 나올 수도 있는 것을 배제하지 못해 코드가 잘못되었다. 틀린 방법 function add(x: T, y: T): T {return x + y;} add(1, 2); // 3 같은 타입이니까 가능 add("1", "2"); // '12' ..

void void는 크게 3가지로 분류 가능 -리턴 값이 void function a(): void{ } return값이 없어야 한다. -매개변수가 void function a(callback: ()=>void){ } 메서드나 매개변수에서는 실제 리턴 값이 뭐든 상관하지 않는다. 그래도 void에 return값을 넣으면 안 된다. -메서드가 void interface A { talk: () => void; } const a: A = { talk() { return 3; } } 메서드나 매개변수에서는 실제 리턴 값이 뭐든 상관하지 않는다. 그래도 void에 return값을 넣으면 안 된다. declare declare const a: string; declare function a(x: number): n..

TS는 간단히 말해 JavaScript에 변수, 매개변수, 리턴 값에 타입을 붙인 것이 TypeScript이다. const a: string = "5"; const b: number = 5; const c: boolean = true; const d: undefined = undefined; const e: null = null; 변수는 소문자로 시작해야 한다. Number => X any const f: any ="123"; const f: any =true; any는 모든 타입이 다 된다. 함수 function add(x: number, y: number): number { return x + y; } 매개변수 바로 뒤에 리턴 값 타입을 적어주면 된다. 화살표 함수 const add: (x: numb..

중요! typescript는 최종적으로 javascript로 변환된다. 순전한 typescript 코드를 돌릴 수 있는 것은 deno이나 대중화되지가 않았다. 브라우저, 노드는 모두 js 파일을 실행한다. ts 파일을 실행하는 게 아니라 결과물인 js를 실행해야 한다. tsc tsc의 역할은 1. TS코드를 JS로 변환시켜주는 역할 2. 코드 자체의 타입 검사를 해준다. let a='number'; a=123; 이렇게 타입 검사를 해준다. 이것은 JS에서는 말이 되는 코드인데 TS에서는 되지 않는다. 하지만 타입 검사가 실패했더라도 JS적으로는 문제가 되지 않기 때문에 변환은 해준다. 타입 검사를 하고 싶으면 tsc --noEmit 하면 된다. npm 명령어를 쓰기 위해서는 노드 프로젝트로 변환을 해야 ..