Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- route
- ajax 사용 예시
- 앵귤러 애니메이션
- 검색
- 옵저버블
- Angular Router
- TAILWIND
- modal
- scroll
- angular button
- egov spring ajax 사용 예시
- 앵귤러 모달
- 셀렉트박스 커스텀
- mysql if
- 스크롤 이벤트 감지
- Router
- angular animation
- prisma
- formgroup
- Ionic modal
- angular route
- 아이오닉 스크롤 이벤트
- 모달
- 호버
- angular modal
- flex-1
- Oracle LISTAGG 사용 예시
- summary
- 스크롤 이벤트
- ApexChart
Archives
- Today
- Total
깜놀하는 해므찌로
typescript interface, extends, object 활용 예시 본문
반응형
SMALL
type Score = "A" | "B" | "C"; // 사용자정의 타입
interface User{
name : string;
age : number;
gender? : string; // ? : 필수값 X
readonly birth : number; // readonly : 읽기만 가능
[grade:number] : Score; // grade 변수명 number 키 / Score 값
}
/** 기본 object */
let user : User = {
name : "이름",
age : 30,
birth : 20001010,
1 : "A",
2 : "B"
}
user.gender = "male";
/* 함수 interface 예 */
interface Add{
(num1:number, num2:number): number; // (인자): 리턴타입
}
const add: Add = function(x, y){
return x + y;
}
add(10, 20);
/* 성인 여부 확인 함수 */
interface IsAdult{
(num1:number): boolean;
}
let isAdult: IsAdult = (age) =>{
return age > 19; // boolean 타입 리턴
}
isAdult(30);
/** implements : 클래스 정의 */
interface Car{
brand : string;
color : string;
start() : void // start 라는 이름의 함수 구현해야 함
}
class Bmw implements Car{
color;
brand = "BMW";
constructor(c:string){ // 클래스 생성 시 값을 셋팅하도록 설정
this.color = c;
}
start(){
console.log("start 함수 구현 완료");
}
}
let bmw = new Bmw("black");
console.log(bmw);
bmw.start();
/** extends */
interface Benz extends Car{ // Car 에 있는 속성을 그대로 받음
age : number; // 속성 추가
stop() : void // 함수 추가
}
let benz : Benz = {
age : 10,
stop(){
console.log("stop 함수 구현");
},
brand : "Benz",
color : "red",
start(){
console.log("start 함수 구현");
}
}
/** 2개 이상 extends */
interface Toy{
name:string;
}
interface ToyCar extends Toy, Car{
price:number;
}
반응형
LIST
'IT' 카테고리의 다른 글
tailwind 글씨 자동 줄바꿈 (0) | 2023.05.17 |
---|---|
PC / Mobile 화면 한 번에 모니터링 하는 방법 (0) | 2023.05.17 |
typeScript 기본 타입 / 기본 함수 (1) | 2023.05.17 |
NX CLI 자주 사용하는 명령어 / nx 명령어 (0) | 2023.05.16 |
Angular Ionic NX 프로젝트 설치 (0) | 2023.05.16 |