복잡한뇌구조마냥

28. keyof 연산자 - object 타입이 가지고 있는 모든 key 값을 union type으로 합쳐서 내보내줍니다. - object의 키 이름을 가지는 literal type을 가짐 interface Person{ age:number, name:string } type PersonKeys = keyof Person; // "age" | "name" 타입 let a:PersonKeys ="name"; // 가능 let aa:PersonKeys = "hi"; // 불가능 29. Mapped Types - Object 안에 있는 속성들을 다른 타입으로 일괄 변환할 때 유용 type Car = { color: boolean, model : boolean, price : boolean | number, }..

23. Generic - 함수에 이런 괄호를 열면 파라미터를 또 입력할 수 있습니다. - 근데 여기 안엔 타입만 입력할 수 있습니다. 타입파라미터 문법 function 함수(x: MyType[]) :MyType { return x[0]; } let a = 함수([4,2]) let b = 함수(['kim', 'park']) - 타입파라미터는 자유작명가능 보통 이런걸로 많이 합니다. - 일반 함수파라미터 처럼 2개 이상 넣기도 가능합니다 interface lengthCheck { length : number } function 함수(x: MyType) { return x.length } let a = 함수('hello') //가능 let a = 함수(1234) //에러남 - extends를 이용한 type ..

15. 요소 narrowing type Fish = {swim:string}; type Bird = {fly:string}; function 함수9(animal : Fish | Bird){ if("swim" in animal){ // 요소 in 오브젝트 return animal.swim }else{ return animal.fly } } - 다음과 같이 요소를 생성하여, 해당 속성을 가지고 있는지 여부를 체크하여 narrowing 16. instanceof를 이용한 narrowing let 날짜 = new Date(); if (날짜 instanceof Date){ console.log('참이에요') } - instanceof 는 부모클래스가 누군지 검사하는 기능 - Date() 같은 날짜를 통해서도 da..

12. class 형 타입지정 class Person { name: string; data: number = 0; constructor(a: string) { this.name = a; } 함수(a: string):void { console.log("안녕" + a); } } - 클래스 내부 변수 타입 지정 및 초기화 가능 - 초기값 지정은 constructor 를 이용하여 새로운 클래스 생성시 변수값 지정 - method 지정도 함수처럼 값 지정 가능 13. interface 문법 - 오브젝트 선언시 type방식이 아닌 interface를 통해 타입을 보다 편리하게 지정 가능 interface Square { color :string, width :number, } let 네모 :Square = { co..

7. readonly type Girlfriend = { readonly name: string } - readonly 키워드는 속성 왼쪽에 붙일 수 있으며 특정 속성을 변경불가능하게 잠궈줍니다. - const 변수는 값이 변하지 않는 변수를 만들고 싶을 때 const 쓰면 됩니다. const랑 비슷한 효과 var 자료 = { name: "kim" } as const // object value값을 그대로 타입으로 지정해줌 // object의 속성들에 모두 readonly를 붙여줌 - as를 통해 const를 단언하여 readonly 를 붙여주도록 설정 가능 8. type & 연산 type PositionX = { x: number, y: number }; type PositionY = { y: numb..

0. tsconfig.json { "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext' "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 "checkJs": true, // 일반 js 파일에서도 에러체크 여부 "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react' "declaration": true, ..