TypeScript 6

[TS] TypeScript 구조적 타이핑, 덕 타이핑

자바스크립트는 덕 타이핑 기반이다. 어떤 함수의 매개변수 값을 모두 가지고 있다면 어떻게 생기던 상관없이 사용한다. interface Person { name: string; age: number; } const me = { name: "수혁", age: 27, gender: "M" }; const introduce = (p: Person) => { alert(`내 이름은 ${p.name}입니다. 나이는 ${p.age}입니다.`); }; introduce(me); me라는 객체는 Person의 type보다 gender라는 타입을 더 가지고 있지만 introduce 함수를 실행하는 것에 대한 아무런 문제가 없다. 함수를 만들 때 매개변수의 타입에 적혀있는 것들만 사용될 것이라고 생각한다. 이러한 타입을 '..

TypeScript 2022.12.30

[TS] TypeScript 객체 프로퍼티 접근 (Index Signature)

JS에서 객체 프로퍼티 접근법은 2가지가 있다. const obj = { a: "A" }; // 마침표 접근법 obj.a; // 대괄호 접근법 obj["a"]; 객체에 값을 수정하거나 추가할 때는 아래의 방법으로 하면 된다. const obj = { a: "A" }; // 수정(마침표 접근법) obj.a = "a"; // 수정(대괄호 접근법) obj["a"] = "a"; // 추가(마침표 접근법) obj.b = "B"; // 추가(대괄호 접근법) obj["b"] = "B"; TS에서는 JS와 같은 방법으로 추가하면 에러가 발생한다. (수정은 괜찮다.) const obj = { a: "A" }; // 추가(마침표 접근법) obj.b = "B"; // 추가(대괄호 접근법) obj["b"] = "B"; Pro..

TypeScript 2022.09.23

keyof 연산자

keyof 연산자를 object에 사용하면 object가 가지고 있는 모든 key값을 union type으로 합쳐서 내보내 준다. object에 들어있는 key를 사용해서 새로운 타입을 만들 때 사용하는 연산자이다. interface Car { name: string; price: number; } type CarKeys = keyof Car; let carPrice :CarKeys = 'price'; let carName :Carkeys = 'name'; let carName2 :Carkeys = 'namename'; // 'price' or 'name' 만 가능하다. keyof 연산자를 사용하면 Car 객체 안의 key 값이 Type이 된다. 그래서 'price' 또는 'name' 은 사용되지만 'n..

TypeScript 2021.12.23

declare 이란?

declare를 사용하면 이미 정의된 변수나 함수를 재정의 할 수 있으며 당연히 타입도 재정의가 가능하다. 예를 들어서 // html 파일에서 두개의 js파일을 첨부한 상황 // b.ts파일에서 변환된 js 파일 // a.js let age = 27; // b.js console.log( age + 1 ); 이렇게 실행한다면 콘솔 창에 28이 실행이 된다. 하지만 b.ts에서는 age라는 변수가 정의되지 않았다고 에러가 발생한다. 이럴 때 declare를 사용하면 에러를 해결할 수 있다. (재정의를 하는 것) // b.ts declare let age :number; console.log(age + 1); 더보기 tsconfig.json 안에 allowJs옵션을 true로 사용하게 되면 js파일도 타입 ..

TypeScript 2021.12.15

TypeScript 문법

이 글은 코딩앙마님의 유튜브를 보고 정리한 내용입니다. 문자 let car:string = 'bmw'; 숫자 let age:number = 30; boolean let isAdult:boolean = true; 배열 배열에 정해진 타입만 추가할 수 있다. let a:number[] = [1,2,3]; let a2:Array = [1,2,3]; let week1:string[] = ['mon', 'tue', 'wed']; let wekk2:Array = ['mon', 'tue', 'wed']; 튜플 (Tuple) 배열과 비슷한 형태이지만 인덱스별로 타입이 다를 때 사용하면 된다. 0번 인덱스와 1번 인덱스는 타입이 달라서 사용할 수 있는 메서드도 다르다. ex: b[0].toLowerCase() 는 가능하..

TypeScript 2021.11.06