Web_Study (28) 썸네일형 리스트형 TypeScript_9:Interfaces ▶ Readonly Property : 값 수정 불가 public readonly : 다른 누군가가 데이터를 덮어쓰는 것을 방지하면서 외부에서 값을 볼 수는 있음! public이지만 더이상 변경할 수 없도록 - 값은 보여주지만 수정은 불가능하게 하도록 사용 class Wrod { constructor( public readonly term: string, public readonly def : string ){} } ▶ static : 메모리할당에 이점 -> 메모리 할당을 딱 한번만 사용함! 객체 생성없이 클래스를 통해 메서드를 직접 호출할 수 있음! static hello(){ return "hello"; } ▶ Type 활용 Type 결정 Alias Specific String Object Shape.. TypeScript_8:Class_2 ▶ Practice_Dictionary type Words = { [key:string]: string // 할당받는 것의 type(이름)도 string, 할당받는 값도 string이라는 syntax // property의 이름은 모르지만 type만 알 경우, 유용하게 사용되어짐! Important! } class Word { constructor( public term:string, public def:string ){} //def add Method add(addWord:string){ this.def=this.def.concat('',addWord); } //def update Method update(newDef:string){ this.def=newDef; } //def print Method .. FlexBox_1 ▶ FlexBox : HTML에서 유연하게 행과 열 형태로 레이아웃을 구성하는 메서드 ▶ 기본구성 FlexContainer : flex-item을 감싸고 있는 부모 요소 FlexItem : flex-container 안에 있는 여러개의 자식 요소 ▶ 기본 생성 : 부모요소에 display:flex 속성 부여 .flex-container{ display:flex; } ▶ Flex-Direction : Flex Item은 주축(Main Axis)에 따라 정렬됨 row(기본) : 주축의 방향이 왼쪽에서 오른쪽으로 column : 주축의 방향이 위에서 아래로 .flex-container{ display:flex; flex-direction:row; //column } TypeScript_7:Class ▶ TypeScript_Class : JavaScript와 달리 TypeScript는 constructor에 this를 표시안해줘도 알아서 생성되어짐 TypeScript class Player{ constructor( private firstName:string, private lastName:string, ){} } JavaScript class Player { constructor(firstName,lastName){ this.firstName=firstName; this.lastName=lastName; } } ▶ Abstract Class(추상 클래스) : 다른 클래스가 상속받을 수 있는 클래스 abstract class User{ constructor( private firstName:strin.. TypeScript_6:Generic_2 ▶ 실제 Generic을 이용한 코드를 작성할 때, CallSignature를 만들 일은 거의 없음 라이브러리를 만들거나 다른 개발자가 사용할 기능을 개발하는 경우엔 Generic을 이용하여 CallSignature 생성이 유용할 것 주로 외부 패키지/라이브러리를 사용하며 그 라이브러리들을 Generic을 통해 생성하는 방식으로 코딩 ▶ Generic 활용 함수 인자 Type을 Generic 설정 function funcA(a:T[]){ return a[0] } 함수 인자 Type을 Generic 설정_2 type Player={ name:string, extraInfo:E } const yjh:Player = { name:"YJH", extraInfo:{ favFood:"protein" } } cons.. TypeScript_5:Polymorphism & Generic ▶ Polymorphism (다형성) : 함수는 다양한 형태를 갖고 있음 / 여러 형태의 인자를 가질 수 있음 type SuperPrint = { //case1 (arr:number[]):void (arr:boolean[]):void ... // concrete type으로 type들을 추가하는 방식 // concrete type : number,oolean,string,void,unknown,... } type SuperPrint = { //case2 (arr:TypePlaceHolder[]):void // 안에는 원하는 generic이름을 붙여주면됨 // generic type : TypeScript가 type을 추론하도록 하는 type } ▶ Generic Type CallSignature를 확인해.. TypeScript_4:CallSignature & Overloading function add(a:number, b:number){ return a+b } const add = (a:number,b:number)=>a+b TypeScript는 자동으로 return 값이 number임을 파악함 ▶ CallSignature : 함수 위에 마우스를 올려두었을 때 위에 뜨는 정보를 의미 함수를 어떻게 호출해야하는지, 함수의 반환 타입이 무엇인지 파악가능 먼저 함수의 타입을 설정하고 코드를 구현함으로써 어떻게 작동하는지 미리 체계적으로 계획가능 ▶ CallSignature 생성법 type Add = { (a:number, b:number) : number } //callsignature 생성 type Add = (a:number, b:number) => number //축약형 con.. TypeScript_3:Types_2 ▶ 함수의 인수type 설정하는 법 type Player = { name:string, age?:number } function playerMaker(name:string) : Player { return ( name:name ) } const playerMaker = (name:string) : Player => {(name:name)} ▶ readonly 속성 : 요소들을 '읽기전용'으로 설정 type Player = { readonly name:name age?:age } const nico = playeMaker("yu") nico.name="alice" // 이렇게되면 에러발생! const numbers:readonly number[] = [1,2,3,4] numbers.push(1) // 에러.. 이전 1 2 3 4 다음
