'Front-End/Typescript'에 해당되는 글 12건

타입스크립트유니언 타입 - Union type

1. 정의

- 타입스크립트 1.4에서 추가 된 기능

- 2개 이상으로 입력된 타입에 대해 하나의 타입으로 정의

- 둘 중 하나의 타입만 유효하면 할당이 이루어 진다

2. 문법

- 타입 | 타입 | 타입....

3. 사용

var unionX : string | number = 1; var unionY : boolean | string = true; console.log(typeof unionX, unionX); console.log(typeof unionY, unionY);

- number 1

- boolean true

1) 함수의 매개변수로 값을 제약할 때 사용

function typeCheck(p: number | boolean) : number | boolean{ return p; } let type = typeCheck(1); let type1 = typeCheck("string"); console.log(type); console.log(type1);  

- 위와 같이 함수에 string 형식을 삽입하면 컴파일 타입에서 에러가 발생한다

 타입스크립트 - 배열선언

1. 정의

- 타입스크립트에서 배열을 선언 할 수 있다

2. 방법

1) 선언과 할당을 동시

let car:string[] = ['BMW','AUDI','BEN']

2) 선언과 할당 분리

let fruits: string[] = []; fruits.push("apple"); fruits.push("banana");  

3) 제네릭 사용

let fruits:Array<number>= new Array<number>(); fruits.push(1); fruits.push(2);  

타입스크립트의 클래스 typescript classes

1. 정의

- 인스턴스화(물체화) 시키기 위한 값들(함수, 변수..)등의 모음이다

- 자바와 매우 흡사하다

2. 클래스의 특징

- 수식자 (public, private, protected..)  이 존재하며 변수나 함수를 선언한다

- 함수가 선언된다면 꼭 내용이 있어야 한다

- constructor를 선언 할 수 있다

1) 예제

class Point{ x: number; constructor(x : number, public y: number = 0){ this.x = x; } sum(){ return "hello"; } static origin = new Point(0 ,0); } var point1 = new Point(22, 33); //y값의 자동으로 0 들어간다 var point2 = new Point(25);

타입스크립트의 인터페이스 - typescript interface

1. 정의

- 함수나 오브젝트가 구조적으로 어떤 구조를 가져야 하는지에 대한 약속이다

- 자바의 인터페이스와 흡사하다

2. 인터페이스(interface)

1) 오브젝트 구조

interface Dummies { name : string; age?: number; //optional greet() : void; } var person : Dummies = { name : "Hee", age : 23, greet() { } }; var person1 : Dummies = { name : 'Jeong', greet() {} }

- ? : 선택적으로 오브젝트를 만들 때 넣을 수도 있고 안넣을 수도 있다

- ? 을 제외한 모든 부분은 만들어 져야 한다

2) 함수 구조

interface Search{ ( source : string, sub : string ) //함수의 반환 형태는 boolean : boolean } //인터페이스를 적용한다 var mySearch : Search; //인터페이스가 적용된 함수명을 이용하여 작성 mySearch = function (src : string, sub : string) { return true; }  

- 함수의 파라미터 명은 변경이 가능하지만 타입은 불가능 하다