TypeScript는 강력한 형식의 상위 집합입니다. 일반 JavaScript로 컴파일됩니다. 이 언어는 애플리케이션 규모의 JavaScript 개발에 사용할 수 있습니다. 또한 모든 브라우저, 호스트 및 운영 체제에서 실행할 수 있습니다. 이 TypeScript 자습서에서는 TypeScript의 깊이를 살펴보고 다음 순서로 기본 사항을 이해합니다.
TypeScript 소개
TypeScript는 일반 JavaScript로 컴파일되는 JavaScript의 유형화 된 상위 집합입니다. TypeScript는 클래스, 인터페이스 및 다음과 같은 정적으로 형식화 된 프로그래밍 언어를 사용하여 순수한 객체 지향입니다. 씨 # 또는 . JavaScript 파일에서 컴파일하고 생성하려면 컴파일러가 필요합니다. 기본적으로 TypeScript는 몇 가지 추가 기능이있는 ES6 버전의 JavaScript입니다.
TypeScript 코드는 .ts 확장자 그런 다음 컴파일러를 사용하여 JavaScript로 컴파일합니다. 모든 코드 편집기에서 파일을 작성할 수 있으며 플랫폼에 컴파일러를 설치해야합니다. 설치 후 명령 tsc .ts TypeScript 코드를 일반 JavaScript 파일로 컴파일합니다.
통사론:
var message : string = 'Edureka에 오신 것을 환영합니다!' console.log (메시지)
컴파일시 다음 JavaScript 코드를 생성합니다.
// typescript 1.8.10에 의해 생성됨 var message = 'Welcome to Edureka!' console.log (메시지)
TypeScript의 특징
교차 플랫폼 : TypeScript 컴파일러는 Windows, MacOS 및 Linux와 같은 모든 운영 체제에 설치할 수 있습니다.
객체 지향 언어 : TypeScript는 다음과 같은 기능을 제공합니다. 클래스 , 인터페이스 및 모듈. 따라서 클라이언트 측 및 서버 측 개발을위한 객체 지향 코드를 작성할 수 있습니다.
정적 유형 검사 : TypeScript는 정적 유형을 사용하며 컴파일시 유형 검사를 도와줍니다. 따라서 스크립트를 실행하지 않고 코드를 작성하는 동안 오류를 찾을 수 있습니다.
선택적 정적 타이핑 : TypeScript는 JavaScript의 동적 입력을 사용하는 경우 선택적 정적 입력도 허용합니다.
DOM 조작 : TypeScript를 사용하여 요소를 추가하거나 제거하기 위해 DOM을 조작 할 수 있습니다.
ES 6 기능 : TypeScript는 클래스, 인터페이스, Arrow 함수 등 계획된 ECMAScript 2015 (ES 6, 7)의 대부분의 기능을 포함합니다.
TypeScript 사용의 장점
TypeScript는 빠르고 간단하며 배우기 쉬움 모든 브라우저 또는 JavaScript 엔진에서 실행됩니다.
그것은 비슷한 ...에 자바 스크립트 동일한 구문과 의미를 사용합니다.
이는 백엔드 개발자가 프론트 엔드를 작성하는 데 도움이됩니다. 더 빠른 코드 .
TypeScript 코드는 기존 JavaScript 코드 . 또한 기존 JavaScript 프레임 워크 및 라이브러리와 문제없이 작동합니다.
확장자가 .d.ts 인 Definition 파일은 다음과 같은 기존 JavaScript 라이브러리를 지원합니다. Jquery, D3.js , 등등. 그래서 TypeScript 코드는 자바 스크립트 라이브러리 유형 정의를 사용하여 유형 검사, 코드 자동 완성 및 기존 동적 유형 JavaScript 라이브러리의 문서화의 이점을 활용할 수 있습니다.
그것은 다음의 기능을 포함합니다 ES6 과 ES7 ES5 수준의 JavaScript 엔진에서 실행할 수있는 Node.js .
이제 TypeScript가 무엇인지 이해 했으므로이 TypeScript 자습서로 넘어 가서 다양한 유형을 살펴 보겠습니다.
TypeScript 유형
유형 시스템은 언어에서 지원하는 다양한 유형의 값을 나타냅니다. 그것은 확인합니다 타당성 제공된 가치 프로그램에 의해 저장되거나 조작되기 전에.
다음과 같은 두 가지 유형으로 분류 할 수 있습니다.
- 내장 : 여기에는 숫자, 문자열, 부울, 무효, 널 및 정의되지 않음이 포함됩니다.
- 사용자 정의 : 열거 형 (열거 형), 클래스, 인터페이스, 배열 및 튜플이 포함됩니다.
이제이 TypeScript 자습서로 넘어 가서 변수에 대해 더 많이 이해하겠습니다.
파이썬에서 숫자를 이진수로 변환하는 방법
TypeScript 튜토리얼 : 변수
변수는 값을 저장하는 데 사용되는 메모리의 명명 된 공간입니다.
TypeScript에서 변수를 선언하기위한 유형 구문에는 변수 이름 뒤에 콜론 (:)과 그 유형이 포함됩니다. JavaScript와 유사하게 var 키워드 변수를 선언합니다.
변수를 선언 할 때 네 가지 옵션이 있습니다.
var [식별자] : [유형 주석] = 값
var [식별자] : [유형 주석]
var [식별자] = 값
var [식별]
예:
var name : string = 'Daisy'var empid : number = 1001 console.log ( 'name'+ name) console.log ( 'employee id'+ empid)
컴파일시 다음 JavaScript 코드가 생성됩니다.
// 타입 스크립트로 생성됨 1.8.10 var name = 'Daisy'var empid = 1001 console.log ( 'name'+ name) console.log ( 'employee id :'+ empid)
산출:
이름 : 데이지
직원 ID : 1001
이제 TypeScript 자습서의 다음 항목으로 이동하겠습니다.
연산자
연산자는 데이터에 대해 수행 될 기능을 정의하는 데 사용됩니다. 연산자가 작동하는 데이터를 피연산자라고합니다. 다양한 유형이 있습니다. 연산자 다음과 같은 TypeScript에서
- 산술 연산자
- 논리 연산자
- 관계 연산자
- 비트 연산자
- 할당 연산자
산술 연산자
| 연산자 | 기술 |
더하기 (+) | 피연산자의 합계를 반환합니다. |
빼기 (-) | 값의 차이를 반환합니다. |
곱하기 (*) | 값의 곱을 반환합니다. |
나눗셈 (/) | 나눗셈 연산을 수행하고 몫을 반환합니다. |
계수 (%) | 나누기 연산을 수행하고 나머지를 반환합니다. |
증분 (++) | 변수 값을 1 씩 증가시킵니다. |
감소 (–) | 변수 값을 1 씩 감소시킵니다. |
예:
var num1 : number = 10 var num2 : number = 2 var res : number = 0 res = num1 + num2 console.log ( 'Sum :'+ res) res = num1-num2 console.log ( 'Difference :'+ res) res = num1 * num2 console.log ( '제품 :'+ res)
산출:
합계 : 12
차이 : 8
제품 : 20
논리 연산자
| 연산자 | 기술 |
AND (&&) | 지정된 모든 표현식이 true를 반환하는 경우에만 true를 반환합니다. |
또는 (||) | 지정된 표현식 중 하나 이상이 true를 반환하면 true를 반환합니다. |
아님 (!) | 표현식 결과의 역을 반환합니다. |
예:
var avg : number = 20 var percent : number = 90 console.log ( '평균 값 :'+ avg + ', 백분율 값 :'+ percentage) var res : boolean = ((avg> 50) && (percentage> 80 )) console.log ( '(평균> 50) && (백분율> 80) :', res)
산출:
평균 값 : 20, 백분율 값 : 90
(평균> 50) && (백분율> 80) : 거짓
관계 연산자
| 연산자 | 기술 |
> | 보다 큰 |
< | 보다 작음 |
> = | 크거나 같음 |
<= | 작거나 같음 |
== | 평등 |
! = | 같지 않음 |
예:
var num1 : number = 10 var num2 : number = 7 console.log ( 'Value of num1 :'+ num1) console.log ( 'Value of num2 :'+ num2) var res = num1> num2 console.log ( 'num1 num2보다 큼 : '+ res) res = num1산출:
num1의 값 : 10
num2 : 7의 값
num2보다 큰 num1 : true
num2보다 작은 num1 : false비트 연산자
연산자 기술 비트 AND (&)
정수 인수의 각 비트에 대해 부울 AND 연산을 수행합니다.
비트 OR (|)
정수 인수의 각 비트에 대해 부울 OR 연산을 수행합니다.
비트 XOR (^)
정수 인수의 각 비트에 대해 부울 배타적 OR 연산을 수행합니다.
비트 NOT (~)
이것은 단항 연산자이며 피연산자의 모든 비트를 반대로하여 작동합니다.
왼쪽 이동 (<<)
첫 번째 피연산자의 모든 비트를 두 번째 피연산자에 지정된 자릿수만큼 왼쪽으로 이동합니다.
오른쪽 시프트 (>>)
왼쪽 피연산자의 값은 오른쪽 피연산자에 지정된 비트 수만큼 오른쪽으로 이동합니다.
0으로 오른쪽 시프트 (>>>)
>> 연산자와 유사하지만 왼쪽에서 이동 된 비트가 항상 0이라는 점이 다릅니다.
예:
var a : number = 2 // 비트 표시 10 var b : number = 3 // 비트 표시 11 var result result = (a & b) console.log ( '(a & b) =>', result) result = ( a | b) console.log ( '(a | b) =>', 결과)산출:
(a & b) => 2
(a | b) => 3할당 연산자
연산자 기술 단순 할당 (=)
오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다.
추가 및 할당 (+ =)
왼쪽 피연산자에 오른쪽 피연산자를 추가하고 결과를 왼쪽 피연산자에 할당합니다.
빼기 및 대입 (-=)
왼쪽 피연산자에서 오른쪽 피연산자를 빼고 결과를 왼쪽 피연산자에 할당합니다.
곱하기 및 할당 (* =)
오른쪽 피연산자와 왼쪽 피연산자를 곱하고 결과를 왼쪽 피연산자에 할당합니다.
나누기 및 할당 (/ =)
왼쪽 피연산자를 오른쪽 피연산자로 나누고 결과를 왼쪽 피연산자에 할당합니다.
예:
var a : number = 12 var b : number = 10 a = b console.log ( 'a = b :'+ a) a + = b console.log ( 'a + = b :'+ a) a-= b 콘솔 .log ( 'a- = b :'+ a)산출:
a = b : 10
a + = b : 20
a-= b : 10이들은 다른 운영자였습니다. 이제 TypeScript 튜토리얼로 넘어가 루프에 대해 알아 보겠습니다.
루프
코드 블록을 여러 번 실행해야하는 상황이있을 수 있습니다. ㅏ 고리 문을 사용하면 문 또는 문 그룹을 여러 번 실행할 수 있습니다.
TypeScript 루프는 다음과 같이 분류 할 수 있습니다.
For 루프
그만큼 for 루프 명확한 루프의 구현입니다.
통사론:
for (첫 번째 표현식 두 번째 표현식 세 번째 표현식) {// 반복적으로 실행할 명령문}여기에서 첫 번째 표현식은 루프가 시작되기 전에 실행됩니다. 두 번째 표현식은 루프를 실행할 조건입니다. 그리고 세 번째 표현식은 모든 코드 블록이 실행 된 후에 실행됩니다.
예:
for (let i = 0 i<2 i++) { console.log ('Execute block statement' + i) }산출:
블록 문 실행 0
블록 문 실행 1While 루프
while 루프는 지정된 조건이 참으로 평가 될 때마다 명령을 실행합니다.
통사론:
while (조건식) {// 실행할 코드 블록}예:
let i : number = 1 while (i<3) { console.log( 'Block statement execution no.' + i ) i++ }산출:
블록 문 실행 1 번
블록 문 실행 2 번Do..While 루프
do & hellipwhile 루프는 루프가 처음 실행될 때 조건을 평가하지 않는다는 점을 제외하면 while 루프와 유사합니다.
통사론:
do {// 실행할 코드 블록} while (조건식)예:
let i : number = 1 do {console.log ( 'Block statement execution no.'+ i) i ++} while (i<3)산출:
블록 문 실행 1 번
블록 문 실행 2 번이 외에도 루프에서 사용되는 TypeScript에는 break 및 continue 문이 있습니다.
Break 문
break 문은 구성을 제어하는 데 사용됩니다. 루프에서 break 문을 사용하면 프로그램이 루프를 종료하는 데 도움이됩니다.
예:
var i : number = 1 while (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop산출:
1과 10 사이의 5의 첫 번째 배수는 다음과 같습니다. 5계속 진술
continue 문은 현재 반복의 후속 문을 건너 뛰고 제어를 루프의 시작 부분으로 되돌립니다.
예:
var num : number = 0 var count : number = 0 for (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)산출:
0과 10 사이의 홀수 값 개수는 다음과 같습니다. 5이들은 TypeScript의 다른 루프였습니다. 이제 TypeScript 자습서를 진행하고 함수를 이해하겠습니다.
기능
자바 스크립트에서 기능 함수형 프로그래밍 언어이기 때문에 가장 중요한 부분 중 하나입니다. 기능은 프로그램이 유지 관리 및 재사용 가능하며 읽기 쉬운 블록으로 구성되도록합니다. TypeScript는 클래스와 모듈의 개념을 제공하지만 함수는 여전히 언어의 필수적인 부분입니다.
명명 된 함수
명명 된 함수는 주어진 이름으로 함수를 선언하고 호출하는 데 사용됩니다.
예:
function display () {console.log ( 'TypeScript 함수')} display ()산출:
TypeScript 함수익명 기능
익명 함수는 표현식으로 정의 된 함수입니다. 이 표현식은 변수에 저장됩니다. 이러한 함수는 함수가 저장된 변수 이름을 사용하여 호출됩니다.
예:
let greeting = function () {console.log ( 'TypeScript Function')} greeting ()산출:
TypeScript 함수화살표 기능
팻 화살표 표기법은 익명 함수, 즉 함수 표현식에 사용됩니다. 다른 언어에서는 람다 함수라고도합니다.
통사론:
(param1, param2, ..., paramN) => 식굵은 화살표 (=>)를 사용하면‘함수’키워드를 사용할 필요가 없습니다. 매개 변수는 꺾쇠 괄호로 전달되고 함수 표현식은 중괄호 {}로 묶여 있습니다.
예:
let sum = (x : number, y : number) : number => {return x + y} sum (10, 30) // 40을 반환합니다.함수 과부하
TypeScript는 함수 오버로딩의 개념을 제공합니다. 따라서 이름은 같지만 매개 변수 유형과 반환 유형이 다른 여러 함수를 가질 수 있습니다.
예:
function add (a : string, b : string) : string function add (a : number, b : number) : number return a + b} add ( 'Hello', 'Edureka') // 'Hello Edureka'반환 add ( 10, 10) // 20을 반환합니다.위의 예에서 두 개의 함수 선언과 하나의 함수 구현이있는 동일한 함수 add ()가 있습니다. 첫 번째 서명에는 문자열 유형의 두 매개 변수가있는 반면 두 번째 서명에는 숫자 유형의 두 매개 변수가 있습니다.
이들은 다양한 유형의 기능입니다. 이제 TypeScript 자습서로 넘어 가서 TypeScript의 문자열을 이해하겠습니다.
TypeScript 튜토리얼 : 문자열
그만큼 텍스트 데이터를 저장하는 데 사용되는 또 다른 기본 데이터 유형입니다. 문자열 값은 작은 따옴표 또는 큰 따옴표로 묶여 있습니다.
통사론:
var var_name = 새 문자열 (문자열)다음과 같이 String 객체에서 사용할 수있는 메서드의 여러 속성이 있습니다.
- 빌더 – 객체를 생성 한 String 함수에 대한 참조를 반환합니다.
- 길이 – 문자열의 길이를 반환합니다.
- 원기 –이 속성을 사용하면 속성과 메서드를 개체에 추가 할 수 있습니다.
예:
let name = new String ( 'Welcome to Edureka!') console.log ( 'Message :'+ name) console.log ( 'Length :'+ name.length)산출:
메시지 : Edureka에 오신 것을 환영합니다!
길이 : 19문자열 방법
String 개체의 메서드 목록은 다음과 같습니다.
방법 기술 charAt ()
지정된 인덱스에있는 문자를 반환합니다.
charCodeAt ()
주어진 인덱스에있는 문자의 유니 코드 값을 나타내는 숫자를 반환합니다.
concat ()
두 문자열의 텍스트를 결합하고 새 문자열을 반환합니다.
indexOf ()
지정된 값이 처음 나타나는 호출 문자열 개체 내의 인덱스를 반환합니다.
lastIndexOf ()
지정된 값의 마지막 발생에 대한 호출 문자열 객체 내의 인덱스를 반환합니다.
시합()
정규식을 문자열과 일치시키는 데 사용됩니다.
localeCompare ()
참조 문자열이 정렬 순서에서 주어진 문자열의 앞이나 뒤에 오는지 또는 지정된 문자열과 동일한지를 나타내는 숫자를 반환합니다.
검색()
정규식과 지정된 문자열 사이의 일치를 검색합니다.
바꾸다()
정규식과 문자열 간의 일치 항목을 찾고 일치하는 하위 문자열을 새 하위 문자열로 바꾸는 데 사용됩니다.
일부분()
문자열의 섹션을 추출하고 새 문자열을 반환합니다.
스플릿()
문자열을 하위 문자열로 분리하여 문자열 객체를 문자열 배열로 분할합니다.
substr ()
지정된 수의 문자를 통해 지정된 위치에서 시작하는 문자열의 문자를 반환합니다.
부분 문자열 ()
두 인덱스 사이에있는 문자열의 문자를 문자열로 반환합니다.
toLocaleLowerCase ()
문자열 내의 문자는 현재 로케일을 유지하면서 소문자로 변환됩니다.
toLocaleUpperCase ()
문자열 내의 문자는 현재 로케일을 고려하면서 대문자로 변환됩니다.
toLowerCase ()
소문자로 변환 된 호출 문자열 값을 반환합니다.
toUpperCase ()
대문자로 변환 된 호출 문자열 값을 반환합니다.
toString ()
지정된 객체를 나타내는 문자열을 반환합니다.
valueOf ()
지정된 객체의 원시 값을 반환합니다.
예:
let str : string = 'Welcome to Edureka'str.charAt (0) // 'w'반환 str.charAt (2) // 'l'반환 'Welcome to Edureka'.charAt (2)는'l '반환 let str1 : string = 'welcome'let str2 : string = 'Edureka'str1.concat (str2) // 'welcomeEdureka'반환 str1.concat ( '', str2) // 'welcome Edureka'반환 str1.concat ( ''to ' ') //'welcome to '반환이제 문자열에 대해 알았으니이 TypeScript 자습서로 넘어 가서 배열을 이해해 보겠습니다.
TypeScript의 배열
안 정렬 특수 구문을 사용하여 순차적으로 서로 다른 데이터 유형의 여러 값을 저장하는 특수 유형의 데이터 유형입니다. 배열 요소는 요소의 첨자 또는 인덱스라고하는 고유 한 정수로 식별됩니다.
통사론:
var array_name [: datatype] // 선언 array_name = [val1, val2, valn ..] // 초기화예:
let names : 배열 이름 = [ 'John', 'Daisy', 'Rachel'] let ids : 배열 ID = [101, 700, 321]배열 방법
다음은 다양한 용도로 사용할 수있는 다양한 Array 메서드 목록입니다.
방법 기술 필터()
제공된 필터링 함수가 true를 반환하는이 배열의 모든 요소를 사용하여 새 배열을 만듭니다.
마다()
이 배열의 모든 요소가 제공된 테스트 함수를 충족하면 true를 반환합니다.
concat ()
다른 배열과 결합 된이 배열로 구성된 새 배열을 반환합니다.
indexOf ()
지정된 값과 같은 배열 내 요소의 첫 번째 또는 최소 인덱스를 반환합니다.
각각()
배열의 각 요소에 대해 함수를 호출합니다.
어울리다()
배열의 모든 요소를 문자열로 결합
lastIndexOf ()
지정된 값과 같은 배열 내 요소의 마지막 또는 가장 큰 인덱스를 반환합니다.
지도()
이 배열의 모든 요소에 대해 제공된 함수를 호출 한 결과로 새 배열을 만듭니다.
푸시()
배열 끝에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.
팝 ()
배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다.
줄이다()
단일 값으로 줄이기 위해 왼쪽에서 오른쪽으로 배열의 두 값에 대해 동시에 함수를 적용합니다.
reduceRight ()
단일 값으로 줄이기 위해 오른쪽에서 왼쪽으로 배열의 두 값에 대해 동시에 함수를 적용합니다.
역전()
배열 요소의 순서를 반대로합니다.
시프트()
배열에서 첫 번째 요소를 제거하고 해당 요소를 반환합니다.
일부분()
배열의 섹션을 추출하고 새 배열을 반환합니다.
약간()
이 배열의 요소가 제공된 테스트 기능을 충족하는 경우 true를 반환합니다.
종류()
배열의 요소를 정렬합니다.
toString ()
배열과 그 요소를 나타내는 문자열을 반환합니다.
접착()
배열에서 요소를 추가 및 / 또는 제거합니다.
unshift ()
배열의 앞에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.
예:
var name : Array = [ 'John', 'Daisy', 'Tara'] name.sort () console.log (name) // 출력 : [ 'Daisy', 'John', 'Tara'] console.log ( name.pop ()) // output : Tara name.push ( 'Rachel') console.log (name) // output : [ 'John', 'Daisy', 'Rachel']이제이 TypeScript 자습서를 진행하고 인터페이스에 대해 알아 보겠습니다.
TypeScript 인터페이스
인터페이스는 애플리케이션에서 계약을 정의하는 구조입니다. 따라야 할 클래스의 구문을 정의합니다. 멤버 선언 만 포함하고 멤버를 정의하는 것은 파생 클래스의 책임입니다.
예:
interface Employee {empID : number empName : string getSalary : (number) => number // 화살표 함수 getManagerName (number) : string}위의 예에서 종업원 인터페이스에는 두 가지 속성이 있습니다. empID 과 empName . 또한 메서드 선언도 포함합니다. getSalaray 사용하여 화살표 기능 여기에는 하나의 숫자 매개 변수와 숫자 반환 유형이 포함됩니다. 그만큼 getManagerName 메소드는 일반 함수를 사용하여 선언됩니다.
TypeScript 클래스
TypeScript는 캡슐화 및 추상화와 같은 객체 지향 기술의 이점을 활용할 수 있도록 클래스를 도입했습니다. TypeScript의 클래스는 플랫폼과 브라우저에서 작동하도록 TypeScript 컴파일러에 의해 일반 JavaScript 함수로 컴파일됩니다.
클래스에는 다음이 포함됩니다.
- 빌더
- 속성
- 행동 양식
예:
class Employee {empID : number empName : string constructor (ID : number, name : string) {this.empName = name this.empID = ID} getSalary () : number {return 40000}}계승
TypeScript 지원 계승 기존 클래스에서 새 클래스를 만드는 프로그램의 기능이기 때문입니다. 새로운 클래스를 만들기 위해 확장 된 클래스를 상위 클래스 또는 수퍼 클래스라고합니다. 새로 생성 된 클래스를 하위 또는 하위 클래스라고합니다.
클래스는 'extends'키워드를 사용하여 다른 클래스에서 상속됩니다. 자식 클래스는 부모 클래스의 개인 멤버와 생성자를 제외한 모든 속성과 메서드를 상속합니다. 그러나 TypeScript는 다중 상속을 지원하지 않습니다.
통사론:
class child_class_name은 parent_class_name을 확장합니다.예:
class Person {name : string constructor (name : string) {this.name = name}} class Employee extends Person {empID : number constructor (empID : number, name : string) {super (name) this.empID = empid} displayName () : void {console.log ( 'Name ='+ this.name + ', 직원 ID ='+ this.empID)}} let emp = new Employee (701, 'Jason') emp.displayName () // 이름 = Jason, 직원 ID = 701이제 클래스에 대해 알았으니이 TypeScript 자습서를 진행하고 객체에 대해 알아 보겠습니다.
TypeScript의 개체
객체는 다른 키-값 쌍 집합을 포함하는 인스턴스입니다. 값은 스칼라 값이나 함수 또는 다른 객체의 배열 일 수 있습니다.
통사론:
var object_name = {key1 : 'value1', // 스칼라 값 key2 : 'value', key3 : function () {// functions}, key4 : [ 'content1', 'content2']객체는 스칼라 값, 함수 및 배열 및 튜플과 같은 구조를 포함 할 수 있습니다.
예:
var person = {firstname : 'Danny', lastname : 'Green'} // 객체 값에 액세스 console.log (person.firstname) console.log (person.lastname)컴파일 할 때 JavaScript에서 동일한 코드를 생성합니다.
산출:
대니
초록이것들은 TypeScript의 다른 중요한 요소였습니다. 이제이 TypeScript 자습서로 넘어 가서 사용 사례를 이해하기위한 예제를 살펴 보겠습니다.
TypeScript 튜토리얼 : 사용 사례
여기에서는 기존 TypeScript에.
TypeScript 파일을 컴파일하면 동일한 이름의 해당 JavaScript 파일이 생성됩니다. 여기에서 입력 역할을하는 원래 JavaScript 파일이 동일한 디렉토리에있을 수 없도록하여 TypeScript가이를 덮어 쓰지 않도록해야합니다.
JavaScript에서 TypeScript로 마이그레이션하는 프로세스에는 다음 단계가 포함됩니다.
1. 프로젝트에 tsconfig.json 파일 추가
프로젝트에 tsconfig.json 파일을 추가해야합니다. TypeScript는 포함 및 제외 할 파일과 같은 프로젝트의 컴파일 옵션을 관리하기 위해 tsconfig.json 파일을 사용합니다.
{ 'compilerOptions': { 'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': [ './src/**/*']}2. 빌드 도구와 통합
대부분의 JavaScript 프로젝트에는 gulp 또는 webpack과 같은 통합 빌드 도구가 있습니다. 다음과 같은 방법으로 프로젝트를 웹팩과 통합 할 수 있습니다.
- 터미널에서 다음 명령을 실행하십시오.
$ npm 설치 awesome-typescript-loader 소스 맵 로더웹팩 통합에서는 소스 코드를보다 쉽게 디버깅하기 위해 소스 맵 로더와 결합 된 awesome-typescript-loader를 사용합니다.
- 두 번째로 webpack.config.js 파일의 모듈 구성 속성을 병합하여 로더를 포함합니다.
3. 모든 .js 파일을 .ts 파일로 이동
이 단계에서는 .js 파일의 이름을 .ts 파일로 변경해야합니다. 마찬가지로 파일에서 JSX를 사용하는 경우 이름을 .tsx로 변경해야합니다. 이제 TypeScript를 지원하는 편집기에서 해당 파일을 열면 일부 코드에서 컴파일 오류가 발생할 수 있습니다. 따라서 파일을 하나씩 변환하면 컴파일 오류를보다 쉽게 처리 할 수 있습니다. TypeScript가 변환 중에 컴파일 오류를 발견하면 여전히 코드를 번역 할 수 있습니다.
4. 오류 확인
js 파일을 ts 파일로 옮기면 즉시 TypeScript가 코드의 Type Checking을 시작합니다. 따라서 JavaScript 코드에서 진단 오류가 발생할 수 있습니다.
5. 타사 JavaScript 라이브러리 사용
JavaScript 프로젝트는 다음과 같은 타사 라이브러리를 사용합니다. 또는 Lodash. 파일을 컴파일하기 위해 TypeScript는 이러한 라이브러리에있는 모든 개체의 유형을 알아야합니다. JavaScript 라이브러리 용 TypeScript 유형 정의 파일은 이미 DefinitelyTyped에서 사용할 수 있습니다. 따라서이 유형을 외부에 설치할 필요가 없습니다. 프로젝트에서 사용되는 유형 만 설치하면됩니다.
jQuery의 경우 정의를 설치할 수 있습니다.
$ npm 설치 @ types / jquery그런 다음 JavaScript 프로젝트를 변경하고 빌드 도구를 실행하십시오. 이제 브라우저에서 실행할 수있는 일반 JavaScript로 컴파일 된 TypeScript 프로젝트가 있어야합니다.
이것으로 우리는이 TypeScript 튜토리얼의 끝까지 왔습니다. TypeScript의 모든 중요한 요소를 이해 하셨기를 바랍니다.
확인 에듀 레카. 웹 개발 인증 교육은 HTML5, CSS3, Twitter Bootstrap 3, jQuery 및 Google API를 사용하여 인상적인 웹 사이트를 만들고 Amazon Simple Storage Service (S3)에 배포하는 방법을 배우는 데 도움이됩니다.
질문이 있으십니까? 'TypeScript Tutorial'의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.