'분류 전체보기' 카테고리의 글 목록 (36 Page)

[Typescript] 타입스크립트의 변수 선언 - typescript variable

Front-End/Typescript 2017. 2. 15. 14:30

타입스크립트의 변수 선언 - typescript variable

1. 정의

- 다른 스크립트와 다르게 변수를 선언할 시 타입을 지정한다

- 자바와 비슷한 구조를 가진다

2. 변수 선언

var age: number = 11; var isdone : boolean = false; var myName : string = "hee"; var isnull= null; console.log(age);

- var age : number = 11

- var 변수명 : 타입 = 값

3. any 타입

- 타입 스크립트의 특징으로 any 타입이라는 것이 있다

//boolean var dknow : any = true; //number dknow = 33; console.log(dknow); //string dknow = "hee"; console.log(dknow);

- any로 타입이 설정되었다면 예제와 같이 어떤 타입으로도 변환이 가능하다

4. collection

- 자바와 비슷하게 콜렉션으로 배열의 형태를 갖는다

var list : number[] = [1,2,3]; var list2 : Array<number> = [2,3,4]; console.log(list[0]);

'Front-End > Typescript' 카테고리의 다른 글

[Typescript] 타입스크립트의 클래스 typescript classes (0)	2017.02.15
[Typescript] 타입스크립트의 인터페이스 - typescript interface (0)	2017.02.15
[Typescript] 타입스크립트의 함수 - Typescript function (0)	2017.02.15
[Typescript] 타입스크립트 설치 - Installing typescript (0)	2017.02.15
[Typescript] 타입스크립트 란? - What's TypeScript (0)	2017.02.15

리딩리드

,

[Typescript] 타입스크립트 설치 - Installing typescript

Front-End/Typescript 2017. 2. 15. 13:48

타입스크립트 설치 - Installing typescript

1. 설치

- 설치 하는 방법은 두 가지가 있다

1) NPM을 이용해서 설치

- npm install -g typescript

- tsc -v : 버전확인

2) visual studio의 타입스크립트 플러그인을 이용해서 설치

2. 컴파일 및 확인

1) 컴파일(compile)

- 타입스크립트를 확인하기 위해선 자바스크립트로 변환하는 과정이 필요하다

- tsc hello.ts

- 컴파일을 실행하면 자동으로 js 파일이 생성된다

A. 컴파일 명령어

$ tsc app.ts -t ES5 : ES5 버전으로 변환하고 싶다면 사용

$ tsc file1.ts file2.ts file3.ts : 여러 파일을 한번에 트랜스한다

$ tsc file.ts, file2.ts --out file3.js : file과 file2를 file3.js로 생성할때 사용

$ tsc app.ts -watch : 파일에 대한 변경 사항을 확인

$ tsc -help : 도움말

2) 확인

- 브라우저에서 확인

- playground 라는 타입스크립트 사이트에서 확인이 가능하다(https://www.typescriptlang.org/play/index.html)

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="hello.js"></script>

'Front-End > Typescript' 카테고리의 다른 글

[Typescript] 타입스크립트의 클래스 typescript classes (0)	2017.02.15
[Typescript] 타입스크립트의 인터페이스 - typescript interface (0)	2017.02.15
[Typescript] 타입스크립트의 함수 - Typescript function (0)	2017.02.15
[Typescript] 타입스크립트의 변수 선언 - typescript variable (0)	2017.02.15
[Typescript] 타입스크립트 란? - What's TypeScript (0)	2017.02.15

리딩리드

,

[Typescript] 타입스크립트 란? - What's TypeScript

Front-End/Typescript 2017. 2. 15. 13:38

타입스크립트 란? - What's TypeScript

1. 정의

- MS사 에서 개발 되었으며 javascript를 보완 하기 위해 만들어진 개발 프레임 워크

- 어떤 브라우저, host, OS 상관없이 작동 된다

- 자바 스크립트와는 다르게 변수의 타입이 존재한다

function greeter(person: string) { return "Hello, " + person; } var user = "Jane User"; document.body.innerHTML = greeter(user);

- 확장자는 .ts 이며 .js 로 변경하기 위한 컴파일러가 필요하다

- 주소 : https://www.typescriptlang.org/

2. 타입의 종류

- Boolean, Number, String, Array, tuple...etc

'Front-End > Typescript' 카테고리의 다른 글

[Typescript] 타입스크립트의 클래스 typescript classes (0)	2017.02.15
[Typescript] 타입스크립트의 인터페이스 - typescript interface (0)	2017.02.15
[Typescript] 타입스크립트의 함수 - Typescript function (0)	2017.02.15
[Typescript] 타입스크립트의 변수 선언 - typescript variable (0)	2017.02.15
[Typescript] 타입스크립트 설치 - Installing typescript (0)	2017.02.15

리딩리드

,

[Ionic2] 아이오닉2(ionic2) 디렉토리 구성 - Project Structure

Tools/ionic2 2017. 2. 15. 10:55

아이오닉2(ionic2) 디렉토리 구성 - Project Structure

1. ./src/index.html

- 앱의 시작 역할을 하며 script, css, bootstrap 셋팅 을 하고 앱을 시작한다

- 개발시에 수정되는 일이 거이 없다

1) 소스 하단

- <script src="cordova.js"></script> : 브라우저 404 경우 코르도바를 인젝션 한다

- <script src="build/main.js"></script> : 아이오닉, 앵큘러와 앱의 스크립드들을 연결 한다

2. ./src/

- 이 폴더 아래에서 주요 개발 환경이 이루어 진다

- ionic serve 라는 명령어를 입력하면 src/하위 파일들이 타입스크립트에서 브라우저에서 이해할 수 있는 자바스크립트로 변환(transpiled)된다

1) src/app/app.module.ts

- 만드는 앱의 입구 역할을 한다

@NgModule({ declarations: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] }) export class AppModule {}

- 모든 앱은 루트 모듈이 존재하고 이곳에서 루트 모듈을 설정한다. 또한 루트 콤포넌트를 설정한다(src/app/app.component.ts)

- pages 폴더에 페이지를 추가할 때마다 모듈에도 같이 추가해야 한다

2) src/app/app.component.ts

- 앱이 로드 될때 실행되는 첫번 째 컴포넌트 이다

- 루트 컴포넌트(app.components.ts + app.html + app.scss)

- 새로운 페이지를 만든다면 해당 루트 컴포넌트를 각각 만들어야 한다

3) theme

- 디자인 작업

4) main.ts

- 루트 컴포넌트를 가져와서 실제적으로 앱에 붙인다

3. ./src/app/app.html

- 앱의 주요 템플릿이다

4. node_modules

- 아이오닉 개발에 필요한 모듈이나 플러그인 설치

- package.json을 이용해서 npm 설치를 한다

5. platform

- 앱의 결과물이 담긴다

6. plugins

- 코도바를 위한 플러그인

7. resources

- icon.png, splash.png가 들어 있으면 처음 앱의 실행(스플레쉬) 화면 설정에 관여

8. config.xml

- 코도바 설정, 앱 전체를 위한 파일

- widget id를 이용하여 앱을 구분한다

- 스플레쉬 화면을 설정한다(preference)

9. pages

- 페이지를 실제적으로 만들 때 사용된다

- html, scss, ts 로 기본적인 구성을 가진다

'Tools > ionic2' 카테고리의 다른 글

[ionic2] ionic2+firebase 연동하기- typings를 이용 (0)	2017.03.05
[Ionic2] 아이오닉2(ionic2) 설치하기 - Installing ionic2 (0)	2017.02.15
[Ionic2] 아이오닉2(ionic2) 란? (0)	2017.02.15

리딩리드

,

일	월	화	수	목	금	토
			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	29	30	31

'WEB-INF'에 해당되는 글 916건

[Typescript] 타입스크립트의 변수 선언 - typescript variable

'Front-End > Typescript' 카테고리의 다른 글

[Typescript] 타입스크립트 설치 - Installing typescript

'Front-End > Typescript' 카테고리의 다른 글

[Typescript] 타입스크립트 란? - What's TypeScript

'Front-End > Typescript' 카테고리의 다른 글

[Ionic2] 아이오닉2(ionic2) 디렉토리 구성 - Project Structure

'Tools > ionic2' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바