TypeScript 튜토리얼: 인터페이스, 열거형, 배열(예제 포함)이란 무엇입니까?
제임스 하트만
TypeScript?
TypeScript 의 상위 집합입니다 Java스크립트. TypeScript 클래스, 인터페이스 등을 지원하는 순수 객체지향 프로그래밍 언어입니다. Microsoft 코드를 정적으로 컴파일하여 Java스크립트. 브라우저나 Nodejs에서 쉽게 실행할 수 있습니다.
ECMAScript용으로 출시된 모든 최신 기능은 다음에서 지원됩니다. TypeScript 그리고 그 외에도 TypeScript 인터페이스, 앰비언트 선언, 클래스 상속 등과 같은 자체 객체 지향 기능이 있어 그렇지 않으면 하기 어려웠을 대규모 애플리케이션 개발에 도움이 됩니다. Java스크립트.
다운로드 및 설치 방법 TypeScript
다운로드 및 설치를 위한 단계별 프로세스는 다음과 같습니다. TypeScript:
1단계) Nodejs 다운로드 및 설치
nodejs 공식 사이트로 이동하세요. https://nodejs.org/en/download/ 그리고 운영 체제에 맞게 nodejs를 다운로드하고 설치하세요. nodejs를 다운로드하는 방법에 대한 자세한 지침은 여기에서 확인할 수 있습니다: https://www.guru99.com/download-install-node-js.html
2단계) Nodejs 및 npm 버전 확인
nodejs와 npm이 설치되어 있는지 확인하려면 명령 프롬프트에서 버전을 확인하세요.
D:\typeproject>node --version V10.15.1 D:\typeproject>npm --version 6.4.1
따라서 nodejs v10 및 npm 6이 설치되어 있습니다.
단계 3) TypeScript 설치
아래 명령과 같이 프로젝트 디렉터리 typeproject/를 만들고 npm init를 실행합니다.
npm init
4단계) 설치 시작
이제 프로젝트에 대한 종속성을 저장할 패키지 .json을 생성하겠습니다.
설치가 완료되면 TypeScript 다음과 같이 :
npm -g install typescript
위의 명령은 설치를 처리합니다 TypeScript. npm install에 "-g"를 추가하면 설치됩니다. TypeScript 전 세계적으로. -g를 사용하면 다음을 사용할 수 있다는 장점이 있습니다. TypeScript TSC 전역적으로 설치되므로 모든 디렉터리에서 명령을 실행할 수 있습니다. 설치를 원하지 않는 경우 TypeScript 아래 명령을 전역적으로 사용하십시오.
npm --save install typescript
프로젝트 디렉터리와 src/ 폴더에 src/ 폴더를 만듭니다. TypeScript test.ts 파일을 작성하고 코드를 작성하세요.
예 : test.ts
function add(x:number, y:number) {
return x+y;
}
let sum = add(5,10);
console.log(sum);
편집하다 TypeScript 코드 Javascript
위 코드를 컴파일하려면 다음 명령을 사용하세요.
If TypeScript 아래 명령을 사용하여 전역적으로 설치됩니다.
tsc test.ts
If TypeScript 경로를 사용해야 하는 프로젝트에 로컬로 설치됩니다. TypeScript 다음과 같이 node_modules에서:
node_modules/typescript/bin/tsc test.ts
위 명령은 test.js 파일을 생성하고 코드가 javascript로 컴파일됩니다.
예 : test.js
function add(x, y) {
return x + y;
}
var sum = add(5, 10);
console.log(sum);
실행하다 Javascript Nodejs를 사용하여
이번에 TypeScript 튜토리얼에서는 다음과 같이 nodejs에서 test.js를 실행합니다.
D:\typeproject\src>node test.js 15
test.js 실행시 consoled 값이 표시됩니다.
실행하다 Java브라우저의 스크립트
예:
<html> <head></head> <body> <script type="text/javascript" src="test.js"></script> </body> </html>
편집하다 TypeScript 코드 Javascript EcmaScript 버전 사용
TypeScript 출시된 모든 Ecmascript 기능을 지원하며, 개발자는 코딩하는 동안 동일한 기능을 사용할 수 있습니다. 그러나 모든 새로운 기능이 이전 브라우저에서 지원되는 것은 아니므로, 이전 버전의 Ecmascript로 자바스크립트를 컴파일해야 합니다. TypeScript 그렇게 할 수 있는 컴파일러 옵션을 제공합니다.
예 : test.ts
var addnumbers = (a, b) => {
return a+b;
}
addnumbers(10, 20);
선택한 ES 버전으로 컴파일하려면 다음과 같이 명령에 target 또는 t 옵션을 사용할 수 있습니다.
tsc --target ES6 test.ts OR tsc -t ES6 test.ts
기본적으로 대상은 ES3입니다. 변경을 원하는 경우 위의 명령을 사용할 수 있습니다.
현재 우리는 ES6를 사용할 것입니다. TypeScript 튜토리얼을 대상으로:
tsc --target ES6 test.ts
test.ts에서 test.js로
var addnumbers = (a, b) => {
return a+b;
}
addnumbers(10, 20);
사용한 화살표 기능은 ES6 기능이고 ES6으로 컴파일할 때와 동일하므로 코드는 그대로 유지됩니다.
기본적으로 대상은 ES3이므로 대상이 없으면 test.js를 다음과 같이 얻습니다.
var addnumbers = function (a, b) {
return a + b;
};
addnumbers(10, 20);
여기에서는 굵은 화살표가 일반 익명 함수로 변경됩니다.
변수 TypeScript
변수 값을 저장하는 데 사용되며 값은 문자열, 숫자, 부울 또는 표현식일 수 있습니다. 변수에 관해서는 TypeScript, 그들은 유사하다 Java스크립트. 그럼 변수에 값을 선언하고 할당하는 방법을 배워봅시다. TypeScript.
변수는 정의하지 않고 코드에서 사용할 수 없습니다. 변수를 선언하려면 다음을 사용할 수 있습니다.
였다 예어,
하자 키워드는
const를 키워드는
변수 작업 TypeScript 자바스크립트와 유사하며, 자바스크립트에 익숙한 사용자는 매우 쉽게 찾을 수 있습니다. 다음과 같은 변수만 하자 and const를 비해 많이 사용되지는 않습니다. 였다.
var를 사용하여 변수 선언
구문 :
var firstname = "Roy";
몇 가지를 살펴보겠습니다. TypeScript var 키워드의 작동과 다음을 사용하여 선언된 변수의 범위를 이해하기 위한 예 였다 예어.
예 1 :
var k = 1; // variable k will have a global scope
function test() {
var c = 1; // variable c is local variable and will be accessible inside function test, it will not be available outside the function.
return k++;
}
test(); // output as 1
test(); // output as 2
alert(c); // will throw error , Uncaught ReferenceError: c is not defined
예 2 :
var t = 0; // variable t is declared in global scope.
function test() {
var t = 10; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
return t;
}
test(); // will return 10.
console.log(t); // will console 0.
예 3 :
var i = 0;
function test() {
if (i>0) {
var t = 1;
}
return t;
}
test(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.
let을 사용하여 변수 선언하기
이 어플리케이션에는 XNUMXµm 및 XNUMXµm 파장에서 최대 XNUMXW의 평균 출력을 제공하는 TypeScript let의 구문은 다음과 같습니다.
구문 :
let name="Roy";
작업 하자 변수는 거의 같습니다 였다, 그러나 약간의 차이가 있으며 다음을 사용하여 동일한 내용을 이해할 것입니다. TypeScript 예.
예:
let i = 1;
function test() {
if (i>0) {
let t = 1;
}
return t;
}
test(); // throws an error : Uncaught ReferenceError: t is not defined.
위 TypeScript 예제에서는 오류가 발생하지만 였다 예어. 다음을 사용하는 변수 하자 예를 들어, 변수 t는 if 블록 내에서만 사용할 수 있고 전체 함수에서는 사용할 수 없습니다.
또한 어떤 함수나 for 루프, while 루프 내에서 변수를 선언하는 경우 TypeScript 스위치 블록을 사용하면 해당 블록 내부에서만 사용할 수 있고 블록 외부에서는 참조할 수 없으며, 해당 변수가 블록 외부에서 사용되면 오류가 발생합니다. 이것이 var와 let 키워드로 선언된 변수의 주요 차이점입니다.
const를 사용하여 변수 선언
Const는 상수 변수를 의미합니다. Let 변수와 유사하지만 유일한 차이점은 값이 할당되면 변경할 수 없다는 것입니다.
구문 :
const name;
예:
const age = "25"; age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.
따라서 사용자는 할당된 값을 변경할 필요가 없다는 것을 알고 있는 경우에만 const 변수를 사용할 수 있습니다.
유형 TypeScript
TypeScript 는 강력한 타입 언어인 반면, 자바스크립트는 그렇지 않습니다. 문자열로 정의된 값을 갖는 변수는 아무런 문제 없이 숫자로 변경될 수 있습니다. Javascript. 같은 건 용납되지 않는다 TypeScript. 에 TypeScript변수의 유형은 시작 시에만 정의되고, 실행 중에는 같은 유형을 유지해야 합니다. 유형을 변경하면 자바스크립트로 컴파일하는 동안 컴파일 타임 오류가 발생합니다.
유형은 다음과 같습니다.
- 번호
- 끈
- 부울
- 모든 품종
- 빈
번호
정수, 부동 소수점, 분수 등만 사용합니다.
구문 :
let a :number = 10; let marks :number = 150; let price :number = 10.2;
다음은 Number 유형에 사용할 수 있는 몇 가지 중요한 방법입니다.
toFixed () – 숫자를 문자열로 변환하고 메소드에 지정된 소수점 자리를 유지합니다.
toString () – 이 방법은 숫자를 문자열로 변환합니다.
valueOf () – 이 방법은 숫자의 기본 값을 반환합니다.
to정밀() – 이 방법은 숫자를 지정된 길이로 형식화합니다.
예: 모든 String 메소드 사용
let _num :number = 10.345; _num.toFixed(2); // "10.35" _num.valueOf(); // 10.345 _num.toString(); // "10.345" _num.toPrecision(2); //"10"
끈
문자열: 문자열 값만
구문 :
let str :string = "hello world";
다음은 String 유형에 사용할 수 있는 몇 가지 중요한 메서드입니다.
- 분열() – 이 메서드는 문자열을 배열로 분할합니다.
- 문자() – 이 방법은 주어진 인덱스의 첫 번째 문자를 제공합니다.
- 인덱스의() – 이 방법은 주어진 값에 대해 처음으로 나타나는 위치를 제공합니다.
- 교체 () – 이 메서드는 2개의 문자열을 사용합니다. 먼저 문자열에서 검색할 값을 사용하고, 존재하는 경우 두 번째 값으로 대체하고 새 문자열을 반환합니다.
- 정돈 () - 이 방법은 문자열 양쪽에서 공백을 제거합니다.
- 하위 문자열() – 이 방법은 시작과 끝으로 지정된 위치에 따라 달라지는 문자열의 일부를 제공합니다.
- 부분 문자열() – 이 방법은 시작과 끝으로 지정된 위치에 따라 달라지는 문자열의 일부를 제공합니다. 끝 위치의 문자는 제외됩니다.
- 대문자로() - 문자열을 대문자로 변환합니다.
- 소문자로() - 문자열을 소문자로 변환합니다.
예:
let _str:string = "Typescript";
_str.charAt(1); // y
_str.split(""); //["T", "y", "p", "e", "s", "c", "r", "i", "p", "t"]
_str.indexOf("s"); //4 , gives -1 is the value does not exist in the string.
_str.replace("Type", "Coffee"); //"Coffeescript"
_str.trim(); //"Typescript"
_str.substr(4, _str.length); //"script"
_str.substring(4, 10); //"script"
_str.toUpperCase();//"TYPESCRIPT"
_str.toLowerCase();//"typescript"
부울
true, false, 0, 1과 같은 논리값을 허용합니다.
구문 :
let bflag :boolean = 1; let status :boolean = true;
모든 품종
구문 :
let a :any = 123 a = "hello world"; // changing type will not give any error.
다음을 사용하여 선언된 변수 어떤 type은 변수를 문자열, 숫자, 배열, 부울 또는 무효로 사용할 수 있습니다. TypeScript 컴파일 타임 오류가 발생하지 않습니다. 이는 선언된 변수와 유사합니다. Java스크립트. 해당 변수와 연관될 값의 유형이 확실하지 않을 때만 모든 유형 변수를 사용하십시오.
빈
Void 유형은 반환할 내용이 없는 함수의 반환 유형으로 주로 사용됩니다.
구문 :
function testfunc():void{
//code here
}
TypeScript 배열
An 배열 in TypeScript 여러 값을 저장할 수 있는 데이터 유형입니다. Array 연산에 대한 값을 선언하고 할당하는 방법을 알아보겠습니다. TypeScript.
이후 TypeScript 강력한 타입 언어이므로 배열의 값의 데이터 유형이 무엇인지 알려줘야 합니다. 그렇지 않으면 any 유형으로 간주합니다.
배열 선언 및 초기화
구문 :
let nameofthearray : Array<typehere>
예시
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.
let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers
let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; //array with string and numbers mixed.
let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.
배열의 요소에 액세스하는 다양한 방법
배열에서 요소를 가져오려면 값이 인덱스 0부터 배열 길이까지 시작됩니다.
예:
let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers years[0]; // output will be 2016 years[1]; // output will be 2017 years[2]; // output will be 2018 years[3]; // output will be 2019
다음을 사용하여 배열에서 요소를 가져올 수도 있습니다. TypeScript for 고리 다음과 같이 :
사용 TypeScript for 루프
let years: Array<number> = [ 2016, 2017, 2018, 2019];
for (let i=0;i<=years.length; i++) {
console.log(years[i]);
}
Output:
2016
2017
2018
2019
for-in 루프 사용
let years: Array<number> = [ 2016, 2017, 2018, 2019];
for (let i in years) {
console.log(years[i])
}
Output:
2016
2017
2018
2019
for-of 루프 사용
let years: Array<number> = [ 2016, 2017, 2018, 2019];
for (let i of years) {
console.log(i)
}
Output:
2016
2017
2018
2019
foreach 루프 사용
let years: Array<number> = [ 2016, 2017, 2018, 2019];
years.forEach(function(yrs, i) {
console.log(yrs);
});
Output:
2016
2017
2018
2019
TypeScript 배열 메서드
TypeScript 배열 객체에는 개발자가 배열을 쉽고 효율적으로 처리하는 데 도움이 되는 많은 속성과 메서드가 있습니다. arrayname.property를 지정하여 속성 값을 얻을 수 있고, array name.method()를 지정하여 메서드의 출력을 얻을 수 있습니다.
길이 속성
=> 배열의 요소 수를 알고 싶다면 length 속성을 사용할 수 있습니다.
Rev다른 방법
=> reverse 메소드를 사용하여 배열의 항목 순서를 바꿀 수 있습니다.
정렬 방법
=> sort 메소드를 사용하여 배열의 항목을 정렬할 수 있습니다.
팝방식
=> 팝 메소드를 사용하여 배열의 마지막 항목을 제거할 수 있습니다.
Shift 방법
=> shift 메서드를 사용하여 배열의 첫 번째 항목을 제거할 수 있습니다.
푸시 방식
=> 배열의 마지막 항목으로 값을 추가할 수 있습니다.
concat 메서드
=> 두 개의 배열을 하나의 배열 요소로 결합할 수 있습니다.
길이 속성의 예
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.length); // 12
역방향 방법의 예
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.reverse()); // ["Dec", "Nov", "Oct", "Sept", "Aug", "July", "June", "May", "April", "March", "Feb", "Jan"]
정렬 방법의 예
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.sort()); // ["April", "Aug", "Dec", "Feb", "Jan", "July", "June", "March", "May", "Nov", "Oct", "Sept"]
팝 방식의 예
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.pop()); //Dec
교대방식의 예
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.shift()); // Jan
푸시 방법의 예
let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers
console.log(years.push(2020));
years.forEach(function(yrs, i) {
console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020
});
연결 방법의 예
let array1: Array<number> = [10, 20, 30]; let array2: Array<number> = [100, 200, 300]; console.log(array1.concat(array2)); //[10, 20, 30, 100, 200, 300]
수업 TypeScript
TypeScript 의 상위 집합입니다 Java스크립트이므로 가능한 모든 작업을 수행할 수 있습니다. Java스크립트도 가능합니다 TypeScript. 클래스는 ES6부터 추가된 새로운 기능입니다. Java스크립트 클래스 유형 기능은 프로토타입 기능이 있는 함수를 사용하여 코드를 재사용하는 방식으로 시도되었습니다. 클래스를 사용하면 코드를 Java, C#, Python 등과 같은 언어에 거의 가깝게 만들 수 있으며, 이 언어에서는 코드를 재사용할 수 있습니다. 클래스의 기능을 사용하여 TypeScript/Java스크립트는 언어를 매우 강력하게 만듭니다.
클래스 정의 TypeScript
다음은 기본 클래스 구문입니다. TypeScript:
class nameofclass {
//define your properties here
constructor() {
// initialize your properties here
}
//define methods for class
}
예: 클래스에 대한 실제 예
class Students {
age : number;
name : string;
roll_no : number;
constructor(age: number, name:string, roll_no: number) {
this.age = age;
this.name = name;
this.roll_no = roll_no;
}
getRollNo(): number {
return this.roll_no;
}
getName() : string {
return this.name;
}
getAge() : number {
return this.age;
}
}
위의 예에는 Students라는 클래스가 있습니다. age, name 및 Roll_no 속성이 있습니다.
생성자 TypeScript 클래스
위에서 정의한 Students 클래스 예제에는 아래와 같은 생성자가 있습니다.
constructor(age: number, name:string, roll_no: number) {
this.age = age;
this.name = name;
this.roll_no = roll_no;
}
생성자 메소드에는 age, name 및 Roll_no 매개변수가 있습니다. 생성자는 클래스가 호출될 때 속성 초기화를 처리합니다. 속성은 다음을 사용하여 액세스됩니다. 이 예어. 예를 들어 age 속성에 액세스하는 this.age, Roll_no에 액세스하는 this.roll_no 등이 있습니다. 아래와 같이 기본 생성자를 가질 수도 있습니다.
constructor () {}
내부 메소드 TypeScript 클래스
학생 클래스 예제에는 getRollNo(), getName(), getAge() 등의 메서드가 정의되어 있으며, 이러한 메서드는 roll_no, name, age 속성에 대한 세부 정보를 제공하는 데 사용됩니다.
getRollNo(): number {
return this.roll_no;
}
getName() : string {
return this.name;
}
getAge() : number {
return this.age;
}
클래스 인스턴스 생성 TypeScript
예:
In TypeScript 클래스의 인스턴스를 만들려면 new 연산자를 사용해야 합니다. new 연산자를 사용하여 클래스의 인스턴스를 만들면 아래와 같이 클래스의 속성과 메서드에 액세스할 수 있는 객체를 얻습니다.
let student_details = new Students(15, "Harry John", 33); student_details.getAge(); // 15 student_details.getName(); // Harry John
컴파일 TypeScript 클래스 Java스크립트
아래와 같이 tsc 명령을 사용하여 컴파일할 수 있습니다. Javascript.
Command: tsc Students.ts
의 출력 Javascript 컴파일 시 코드는 아래와 같습니다.
var Students = /** @class */ (function () {
function Students(age, name, roll_no) {
this.age = age;
this.name = name;
this.roll_no = roll_no;
}
Students.prototype.getRollNo = function () {
return this.roll_no;
};
Students.prototype.getName = function () {
return this.name;
};
Students.prototype.getAge = function () {
return this.age;
};
return Students;
}());
In Javascript, 클래스는 자체 호출 함수로 변환됩니다.
클래스 상속
클래스는 다음을 사용하여 상속될 수 있습니다. 확장 키워드 TypeScript.
클래스 상속 구문:
class A {
//define your properties here
constructor() {
// initialize your properties here
}
//define methods for class
}
class B extends A {
//define your properties here
constructor() {
// initialize your properties here
}
//define methods for class
}
클래스 B 공유할 수 있을 것이다 클래스 A 메서드와 속성.
다음은 상속을 사용하는 클래스의 실제 예제입니다.
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
getName(): string {
return this.name;
}
getAge(): number {
return this.age;
}
}
class Student extends Person {
tmarks: number;
getMarks(): number {
return this.tmarks;
}
setMarks(tmarks) {
this.tmarks = tmarks;
}
}
let _std1 = new Student('Sheena', 24);
_std1.getAge(); // output is 24
_std1.setMarks(500);
_std1.getMarks(); // output is 500
Person과 Student라는 두 가지 클래스가 있습니다. Student 클래스는 Person을 확장하고 Student에서 생성된 개체는 확장된 클래스뿐만 아니라 자체 메서드와 속성에 액세스할 수 있습니다.
이제 위 클래스에 몇 가지 변경 사항을 추가해 보겠습니다.
예:
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
getName(): string {
return this.name;
}
getAge(): number {
return this.age;
}
}
class Student extends Person {
tmarks: number;
constructor(name: string, age: number, tmarks: number) {
super(name, age);
}
getMarks(): number {
return this.tmarks;
}
setMarks(tmarks) {
this.tmarks = tmarks;
}
}
let _std1 = new Student('Sheena', 24, 500);
_std1.getAge(); // output is 24
_std1.getMarks(); // output is 500
이전 예제와 비교하여 추가한 변경 사항은 Student 클래스에 정의된 생성자가 있다는 것입니다. 생성자는 기본 클래스와 동일한 매개변수를 가져와서 자체 매개변수가 있는 경우 이를 추가해야 합니다.
In TypeScript super를 호출하면 모든 매개변수가 기본 매개변수로 지정됩니다. 이는 생성자 내에서 가장 먼저 수행되어야 하는 작업입니다. 슈퍼는 확장 클래스의 생성자를 실행합니다.
액세스 수정자 TypeScript
TypeScript 메서드 및 속성에 대한 공개, 비공개 및 보호 액세스 한정자를 지원합니다. 기본적으로 액세스 한정자가 제공되지 않으면 메서드나 속성은 공개로 간주되며 클래스 개체에서 쉽게 액세스할 수 있습니다.
개인용 액세스 한정자의 경우 클래스 객체에서 액세스할 수 없으며 클래스 내에서만 사용됩니다. 상속된 클래스에서는 사용할 수 없습니다.
protected 액세스 한정자의 경우 클래스와 상속된 클래스 내에서 사용되며 클래스 개체에서는 액세스할 수 없습니다.
예:
class Person {
protected name: string;
protected age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
private getName(): string {
return this.name;
}
getDetails(): string {
return "Name is "+ this.getName();
}
}
class Student extends Person {
tmarks: number;
constructor(name: string, age: number, tmarks: number) {
super(name, age);
this.tmarks = tmarks;
}
getMarks(): number {
return this.tmarks;
}
getFullName(): string {
return this.name;
}
setMarks(tmarks) {
this.tmarks = tmarks;
}
}
let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks(); // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails(); // output is Name is Sheena
- 은밀한: 속성이나 메서드는 클래스의 개체와 파생 클래스에서 액세스할 수 없으며 클래스 내에서 내부적으로 사용됩니다.
- 보호됨 : 속성과 메서드도 생성된 개체에서 액세스할 수 없습니다. 클래스 내부에서 액세스할 수 있으며 이를 확장하는 클래스에서 사용할 수 있습니다.
- 공공의: 속성과 메서드는 키워드 없이 선언됩니다. 외부에서 클래스 객체를 사용하여 쉽게 접근할 수 있습니다.
인터페이스 TypeScript
의 핵심 기능 중 하나 TypeScript 인터페이스입니다. 인터페이스는 그것을 사용하는 엔티티가 구현해야 하는 정의된 규칙의 집합입니다. 엔티티는 클래스, 함수 또는 변수가 될 수 있습니다. 인터페이스는 속성과 메서드로 구성될 수 있습니다. 해당 속성이나 메서드에 대해 "?" 구문을 사용하여 속성을 선택 사항으로 정의할 수 있습니다. 인터페이스는 인터페이스를 구현하는 모든 함수, 변수 또는 클래스에 대해 강력한 유형 검사를 추가합니다.
인터페이스 구문 TypeScript
interface Dimension {
width: string;
height: string;
}
너비와 높이 속성이 있고 둘 다 유형이 문자열인 Dimension이라는 인터페이스를 정의했습니다.
이제 이 인터페이스는 변수, 함수 또는 클래스로 구현될 수 있습니다. 다음은 Dimension 인터페이스를 구현하는 변수의 예입니다.
예:
interface Dimension {
width: string;
height: string;
}
let _imagedim: Dimension = {
width: "100px",
height: "200px"
};
Dimension 인터페이스의 서명에는 너비와 높이가 있으며 둘 다 필수입니다. 인터페이스를 구현하는 동안 속성이 누락되거나 유형이 변경된 경우 코드를 javascript로 컴파일하는 동안 컴파일 시간 오류가 발생합니다.
위의 코드를 자바스크립트로 컴파일하면 다음과 같습니다.
var _imagedim = {
width: "100px",
height: "200px"
};
이제 함수와 함께 인터페이스를 사용하는 방법을 살펴보겠습니다.
함수의 인터페이스를 반환 유형으로 사용
예:
interface Dimension {
width: string;
height: string;
}
function getDimension() : Dimension {
let width = "300px";
let height = "250px";
return {
width: width,
height: height
}
}
위의 예에서 Dimension 인터페이스는 getDimension() 함수에서 반환 유형으로 구현됩니다. getDimension()의 반환 유형은 인터페이스 차원에 대해 언급된 속성 및 유형과 일치해야 합니다.
컴파일된 코드는 Javascript 다음과 같이됩니다.
function getDimension() {
var width = "300px";
var height = "250px";
return {
width: width,
height: height
};
}
컴파일하는 동안 반환 유형이 인터페이스와 일치하지 않으면 오류가 발생합니다.
함수 매개변수로서의 인터페이스
interface Dimension {
width: string;
height: string;
}
function getDimension(dim: Dimension) : string {
let finaldim = dim.width +"-"+ dim.height;
return finaldim;
}
getDimension({width:"300px", height:"250px"}); // will get "300px-250px"
위의 예에서는 인터페이스 차원을 getDimension() 함수에 대한 매개변수로 사용했습니다. 함수를 호출할 때 전달된 매개변수가 정의된 인터페이스 규칙과 일치하는지 확인해야 합니다.
컴파일된 코드는 Javascript 다음과 같이됩니다.
function getDimension(dim) {
var finaldim = dim.width + "-" + dim.height;
return finaldim;
}
getDimension({ width: "300px", height: "250px" });
클래스 구현 인터페이스
클래스와의 인터페이스를 활용하려면 키워드를 사용해야 합니다. 구현하다.
인터페이스를 구현하는 클래스의 구문:
class NameofClass implements InterfaceName {
}
다음 예제는 클래스와 인터페이스의 작동 방식을 보여줍니다.
interface Dimension {
width : string,
height: string,
getWidth(): string;
}
class Shapes implements Dimension {
width: string;
height: string;
constructor (width:string, height:string) {
this.width = width;
this.height = height;
}
getWidth() {
return this.width;
}
}
위의 예에서는 문자열 유형의 너비 및 높이 속성과 반환 값을 문자열로 갖는 getWidth()라는 메서드를 사용하여 Dimension 인터페이스를 정의했습니다.
컴파일된 코드는 Javascript 다음과 같이됩니다.
var Shapes = /** @class */ (function () {
function Shapes(width, height) {
this.width = width;
this.height = height;
}
Shapes.prototype.getWidth = function () {
return this.width;
};
return Shapes;
}());
기능 TypeScript
기능은 작업을 수행하기 위해 수행되는 명령 집합입니다. ~ 안에 Javascript, 대부분의 코드가 함수 형태로 작성되어 중요한 역할을 합니다. ~ 안에 TypeScript, 클래스, 인터페이스, 모듈, 네임스페이스를 사용할 수 있지만 여전히 함수가 중요한 역할을 합니다. 에 있는 함수의 차이점 자바스크립트와 TypeScript 함수는 다음과 함께 사용할 수 있는 반환 유형입니다. TypeScript 기능.
Java스크립트 기능:
function add (a1, b1) {
return a1+b1;
}
TypeScript 기능:
function add(a1 : number, b1: number) : number {
return a1 + b1;
}
위의 함수에는 함수 이름이 추가되고 매개변수는 다음과 같습니다. a1및 b1 둘 다 숫자 유형을 가지며 반환 유형도 숫자입니다. 함수에 문자열을 전달하면 함수를 컴파일하는 동안 컴파일 타임 오류가 발생합니다. Java스크립트.
함수 호출: 추가
let x = add(5, 10) ; // will return 15
let b = add(5); // will throw an error : error TS2554: Expected 2 arguments, but got 1.
let c = add(3,4,5); // will throw an error : error TS2554: Expected 2 arguments, but got 3.
let t = add("Harry", "John");// will throw an error : error TS2345: Argument of type '"Harry"' is not assignable to parameter of type 'number'.
매개변수 a1 and b1 필수 매개변수이며 이러한 방식으로 수신되지 않으면 오류가 발생합니다. 또한 매개변수 유형과 반환 유형은 매우 중요하며 일단 정의되면 변경할 수 없습니다.
함수에 대한 선택적 매개변수
자바스크립트에서 함수에 대한 모든 매개변수는 선택 사항이며 전달되지 않으면 정의되지 않은 것으로 간주됩니다. 그러나 다음과 같은 경우는 다릅니다. TypeScript, 매개변수를 정의한 후에는 이를 보내야 하지만 매개변수를 선택적으로 유지하려는 경우?를 사용하여 그렇게 할 수 있습니다. 아래와 같이 매개변수 이름에 대해:
function getName(firstname: string, lastname?: string): string {
return firstname + lastname;
}
let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3.
선택적 매개변수는 마지막에만 함수에서 정의되어야 하며, 첫 번째 매개변수는 선택사항으로, 두 번째 매개변수는 필수 매개변수로 가질 수 없습니다. 하나의 매개변수로 함수를 호출하면 컴파일러에서 오류가 발생합니다. 따라서 마지막에 선택적 매개변수를 유지해야 합니다.
매개변수에 기본값 할당
아래와 같이 params에 기본값을 할당할 수 있습니다.
function getName(firstname: string, lastname = "Harry"): string {
return firstname + lastname;
}
let a = getName("John"); // will return JohnHarry
let b = getName("John", "H"); // will return JohnH
선택적 매개변수와 유사하게 여기에서도 기본 초기화 매개변수는 함수의 끝에 유지되어야 합니다.
휴식 매개변수
당신은 방법을 보았습니다 TypeScript 필수 매개변수, 선택적 매개변수 및 기본값 초기화 매개변수를 처리합니다. 이제 나머지 매개변수를 살펴보겠습니다. 나머지 매개변수는 함께 정의된 선택적 매개변수 그룹으로, 세 가지 매개변수를 사용하여 정의됩니다. 점(…) 그 뒤에 배열인 param의 이름이 옵니다.
나머지 매개변수 구문:
function testFunc(a: string, ...arr: string[]) :string {
return a + arr.join("");
}
위에 표시된 것처럼 나머지 매개변수는 (…param-name)을 사용하여 정의됩니다. 나머지 매개변수는 세 개의 점이 앞에 붙은 배열입니다. 배열에는 모든 매개변수가 전달됩니다. 아래 예와 같이 함수를 호출할 수 있습니다.
예:
let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as MondayTuesdayWednesdayThursday
화살표 함수
화살표 기능은 ES6에 출시된 중요한 기능 중 하나이며 다음에서 사용할 수 있습니다. TypeScript 도. 화살표 함수 구문에는 굵은 화살표가 포함되어 있어 함수를 화살표 함수라고 합니다.
화살표 함수 구문:
var nameoffunction = (params) => {
// code here
}
화살표 기능의 용도는 무엇입니까?
Arrow 함수의 사용 사례를 이해하기 위해 예제를 살펴보겠습니다.
예:
var ScoreCard = function () {
this.score = 0;
this.getScore = function () {
setTimeout(function () {
console.log(this.score); // gives undefined.
}, 1000);
}
}
var a = new ScoreCard();
a.getScore();
this 속성을 갖는 익명 함수를 만들었습니다. Score는 0으로 초기화하고 내부적으로 setTimeout을 갖는 getScore 메소드를 사용하여 1초 내에 this.score를 콘솔에 표시합니다. this.score를 정의하고 초기화했지만 콘솔 값은 unundefined를 제공합니다. 여기서 문제는is 예어. setTimeout 내부의 함수에는 자체 this가 있으며 내부적으로 점수를 참조하려고 시도하며 정의되지 않았으므로 unundefined를 제공합니다.
아래와 같이 화살표 기능을 사용하여 동일한 작업을 수행할 수 있습니다.
var ScoreCard = function () {
this.score = 0;
this.getScore = function () {
setTimeout(()=>{
console.log(this.score); // you get 0
}, 1000);
}
}
var a = new ScoreCard();
a.getScore();
아래와 같이 setTimeout 내부의 함수를 화살표 함수로 변경했습니다.
setTimeout(()=>{
console.log(this.score); // you get 0
}, 1000);
화살표 함수에는 자체 속성이 없습니다. 이 정의되어 있으며 부모를 공유합니다. 이, 외부에 선언된 변수는 화살표 함수 내부에서 이를 사용하여 쉽게 액세스할 수 있습니다. 구문이 짧을 뿐 아니라 콜백, 이벤트 핸들러, 내부 타이밍 함수 등에 유용합니다.
TypeScript 열거 형
TypeScript Enum은 관련된 값의 모음을 함께 저장하는 개체입니다. Javascript 열거형을 지원하지 않습니다. 대부분의 프로그래밍 언어 처럼 Java, 씨, C++ 지원 TypeScript Enum과 함께 사용 가능 TypeScript 도. 열거형은 키워드 enum을 사용하여 정의됩니다.
Enum을 선언하는 방법은 무엇입니까?
구문 :
enum NameofEnum {
value1,
value2,
..
}
예: 열거형
enum Directions {
North,
South,
East,
West
}
위의 예에서는 Directions라는 열거형을 정의했습니다. 주어진 값은 북쪽, 남쪽, 동쪽, 서쪽입니다. 값은 열거형의 첫 번째 값에 대해 0부터 번호가 지정되고 이후 다음 값에 대해 1씩 증가합니다.
숫자 값이 포함된 Enum 선언
기본적으로 열거형에 값이 지정되지 않으면 0부터 시작하는 숫자로 간주합니다. 다음 예제는 숫자 값이 있는 열거형을 보여줍니다.
enum Directions {
North = 0,
South = 1,
East =2,
West =3
}
열거형에 시작 값을 할당할 수도 있으며 다음 열거형 값은 증가된 값을 가져옵니다. 예를 들어:
enum Directions {
North = 5,
South, // will be 6
East, // 7
West // 8
}
이제 North의 열거형 값은 5로 시작하므로 South의 값은 6, East = 7, West = 8이 됩니다.
기본 값을 사용하는 대신 원하는 값을 할당할 수도 있습니다. 예를 들어:
enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}
Enum에 액세스하는 방법은 무엇입니까?
다음 예제는 코드에서 Enum을 사용하는 방법을 보여줍니다.
enum Directions {
North,
South,
East,
West
}
console.log(Directions.North); // output is 0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]); //output is North
자바스크립트로 컴파일된 코드는 다음과 같습니다.
var Directions;
(function (Directions) {
Directions[Directions["North"] = 0] = "North";
Directions[Directions["South"] = 1] = "South";
Directions[Directions["East"] = 2] = "East";
Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);
이후 Javascript 열거형을 지원하지 않으면 위에 표시된 대로 열거형을 자체 호출 함수로 변환합니다.
문자열 값을 사용하여 Enum 선언
아래 예와 같이 원하는 문자열 값을 할당할 수 있습니다.
예:
enum Directions {
North = "N",
South = "S",
East = "E",
West = "W"
}
console.log(Directions.North); // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]); // output is North
자바스크립트로 컴파일된 코드는 다음과 같습니다.
var Directions;
(function (Directions) {
Directions["North"] = "N";
Directions["South"] = "S";
Directions["East"] = "E";
Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);
모듈은 무엇입니까? TypeScript?
다음에서 생성된 파일 TypeScript 전역 액세스 권한이 있습니다. 즉, 한 파일에서 선언된 변수는 다른 파일에서 쉽게 액세스할 수 있습니다. 이러한 전역적 특성으로 인해 코드 충돌이 발생할 수 있으며 런타임 시 실행 문제가 발생할 수 있습니다. 전역 변수, 함수 충돌을 방지하는 데 사용할 수 있는 내보내기 및 가져오기 모듈 기능이 있습니다. 이 기능은 다음에서 사용할 수 있습니다. JavaES6 릴리스가 포함된 스크립트이며 다음에서도 지원됩니다. TypeScript.
모듈이 필요한 이유 TypeScript?
다음 예는 모듈이 없는 경우의 문제를 보여줍니다.
예 test1.ts
let age : number = 25;
test1.ts에 숫자 유형의 변수 연령을 정의했습니다.
예 test2.ts
test2.ts 파일에서 변수에 쉽게 액세스할 수 있습니다. 나이 test1.ts에 정의하고 아래와 같이 수정합니다.
age = 30; // changed from 25 to 30. let _new_age = age;
따라서 위의 경우 변수가 전역적으로 사용 가능하고 수정될 수 있으므로 많은 문제가 발생할 수 있습니다.
와 모듈, 작성된 코드는 파일에 대한 로캘로 유지되며 파일 외부에서 액세스할 수 없습니다. 파일의 어떤 항목에 액세스하려면 내보내기 키워드를 사용하여 내보내야 합니다. It 변수, 클래스, 함수 또는 인터페이스를 다른 파일에서 사용하려는 경우에 사용됩니다. 수입 내보낸 변수, 클래스, 인터페이스나 함수에 액세스하려는 경우에도 사용됩니다. 이렇게 하면 작성된 코드가 파일 내에 그대로 유지되며 동일한 변수 이름을 정의하더라도 혼동되지 않고 선언된 파일에 대해 로컬로 동작합니다.
내보내기 및 가져오기 사용
내보내고 가져오는 방법에는 여러 가지가 있습니다. 그래서 여기서는 주로 사용되는 구문에 대해 논의하겠습니다.
가져오기 및 내보내기 1의 구문:
export nameofthevariable or class name or interface name etc
//To import above variable or class name or interface you have to use import as shown below:
Import {nameof thevariable or class name or interfacename} from "file path here without.ts"
다음은 내보내기 및 가져오기를 사용한 실제 예제입니다.
예:
test1.ts
export let age: number = 25;
내보내기 키워드는 다른 파일에서 연령 변수를 공유하는 데 사용됩니다.
test2.ts
import { age } from "./test1"
let new_age :number = age;
Import 키워드는 나이 변수이며 위와 같이 파일 위치를 지정해야 합니다.
가져오기 및 내보내기 2 구문:
내보내고 가져오는 또 다른 방법이 있으며 이에 대한 구문은 아래와 같습니다.
export = classname; import classname = require(“file path of modulename”)
사용할 때 수출 = 모듈을 내보내려면 가져오기에서 require(“모듈 이름의 파일 경로”)를 사용하여 가져와야 합니다.
위의 사례를 보여주는 실제 예는 다음과 같습니다.
Customer.ts
class Customer {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
getName(): string {
return this.name;
}
}
export = Customer;
testCustomer.ts
import Customer = require("./Customer");
let a = new Customer("Harry", 30);
alert(a.getName());
모듈 로더
모듈은 자체적으로 작동할 수 없으므로 다음에서 본 것처럼 가져오기 종속성을 찾으려면 모듈 로더가 필요합니다. TypeScript 위에 표시된 예. 사용 가능한 모듈 로더는 브라우저에서 실행하기 위한 nodejs 및 Require.js용 CommonJS입니다.
CommonJS 모듈을 사용하여 코드를 컴파일하려면 다음 명령을 사용하세요.
tsc --module commonjs testCustomer.ts
Requirejs 모듈을 사용하여 코드를 컴파일하려면 다음 명령을 사용하세요.
tsc --module amd testCustomer.ts
위 명령을 사용하면 종속 파일이 js 파일로 변환됩니다.
Requirejs를 사용하여 testCustomer.ts에서 testCustomer.js로의 예
define(["require", "exports", "./Customer"], function (require, exports, Customer) {
"use strict";
exports.__esModule = true;
var a = new Customer("Harry", 30);
alert(a.getName());
});
Requirejs를 사용하여 Customer.ts에서 Customer.js로의 예
define(["require", "exports"], function (require, exports) {
"use strict";
var Customer = /** @class */ (function () {
function Customer(name, age) {
this.name = name;
this.age = age;
}
Customer.prototype.getName = function () {
return this.name;
};
return Customer;
}());
return Customer;
});
require.js를 사용하여 테스트하려면 표시된 대로 종속성을 참조하는 main.js라는 파일을 생성해야 합니다.
폴더 구조는 다음과 같습니다.
src/
Customer.js
testCustomer.js
main.js
require.js // you can get this file from github or npm install requirejs
test.html
메인.js
define(function (require) {
var customer = require("./Customer");
var testCustomer = require("./testCustomer");
});
테스트.html
<!DOCTYPE html>
<html>
<head>
<title>TypeScript Module testing using Requirejs</title>
<script data-main="main" src="require.js"></script>
</head>
<body>
<h3>Testing modules using Requirejs</h3>
</body>
</html>
네임스페이스 TypeScript
네임스페이스는 기본적으로 클래스, 인터페이스, 변수, 함수가 하나의 파일에 함께 모여 있습니다.
네임스페이스 구문
namespace name{
export class {
}
export interface {
}
export const constname;
}
관련된 코드는 하나의 네임스페이스 아래에서 사용할 수 있습니다.
네임스페이스 작업 예: testnamespace.ts
namespace StudentSetup {
export interface StudDetails {
name: string;
age: number;
}
export function addSpace(str) { // will add space to the string given
return str.split("").join(" ");
}
export class Student implements StudDetails {
name: string;
age: number;
constructor(studentdetails: StudDetails) {
this.name = studentdetails.name;
this.age = studentdetails.age;
}
getName(): string {
return this.name;
}
}
}
네임스페이스의 이름은 학생 설정, StudDetails 인터페이스, addSpace 함수, Student라는 클래스를 추가했습니다.
네임스페이스 액세스
다음은 네임스페이스를 사용하는 코드입니다. 학생 설정.
testStudentSetup.ts
let a = new StudentSetup.Student({ name: "Harry", age: 20 });
console.log("The name is :" + StudentSetup.addSpace(a.getName()));
네임스페이스 내에서 사용 가능한 클래스, 인터페이스, 함수는 네임스페이스 이름을 사용하여 참조해야 합니다. StudentSetup.addSpace 기능에 액세스하려면 학생설정.학생 클래스에 액세스합니다.
아래와 같이 두 파일을 하나의 js로 컴파일할 수 있습니다.
tsc --outFile namespace.js testnamespace.ts testStudentSetup.ts
아래 명령을 사용하여 명령 프롬프트에서 출력을 확인합니다.
node namespace.js
출력은 다음과 같이 표시됩니다.
The name is: H a r r y
앰비언트 선언 TypeScript
TypeScript ambient 선언을 사용하여 타사 자바스크립트 파일을 사용할 수 있습니다. 이 기능의 장점은 라이브러리의 모든 기능을 다시 작성하지 않고도 사용할 수 있다는 것입니다. TypeScript.
주변 구문
주변 모듈을 선언하려면 다음을 수행하세요.
declare module moduleName {
//code here
}
주변 파일은 다음과 같이 저장되어야 합니다.
filename.d.ts
파일을 사용하려면 파일 이름.d.ts .ts에서 다음과 같이 참조해야 합니다.
/// <reference path="filename.d.ts"/>
앰비언트 유형 선언 TypeScript 타사 라이브러리에 대한 참조가 있고 자체 유형으로 필요한 함수를 다시 선언합니다. 예를 들어, 아래와 같이 작은 자바스크립트 라이브러리가 있다고 가정해 보겠습니다.
타사 Java스크립트 파일: testString.js
예: testString.js
var StringChecks = {
isString: function (str) {
return typeof str === "string";
},
convertToUpperCase: function (str) {
return str.toUpperCase();
},
convertToLowerCase: function (str) {
return str.toLowerCase();
},
convertToStringBold: function (str) {
return str.bold();
}
};
StringChecks라는 객체가 있는데, 이 객체에는 isString, convertToUpperCase, convertToLowerCase, converToStringBold와 같은 함수가 있습니다.
Ambient 모듈 생성 TypeScript
이제 위의 js 함수를 참조하고 요구 사항에 따라 유형 검사를 추가하는 주변 모듈을 생성합니다.
파일명 : tstring.d.ts
declare module TestString {
export interface StringsFunc {
isString(str: string): boolean;
convertToUpperCase(str: string): string;
convertToLowerCase(str: string): string;
convertToStringBold(str: string): string;
}
}
declare var StringChecks: TestString.StringsFunc;
모듈 이름을 TestString으로 정의하고 StringsFunc 인터페이스를 내보냈어야 합니다.
isString(str: 문자열): 부울
=> 이것은 param을 문자열로 받아들이고 반환 유형은 부울입니다. .ts 파일에서 사용할 때 매개변수를 숫자나 문자열 이외의 다른 것으로 전달하면 컴파일 유형 오류가 발생합니다.
ConvertToUpperCase(str:string): 문자열
=> 이것은 인수를 문자열로 취하고 문자열을 반환합니다. ConvertToLowerCase(str: 문자열)
: 끈; 그리고 ConvertToStringBold(str: 문자열): 문자열
;
자바스크립트 파일에는 StringChecks라는 개체 이름이 있으므로 마지막으로 다음과 같이 수행되는 .d.ts 파일에서 동일한 이름을 참조해야 합니다.
declare var StringChecks: TestString.StringsFunc;
Ambient 모듈 사용 TypeScript
이제 주변 파일 tstring.d.ts를 사용할 test.ts 파일이 있습니다.
예: test.ts
/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);
편집하다 TypeScript tsc test.ts를 test.js로
/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);
이제 html 파일과 라이브러리 파일 testString.js에서 test.js를 사용할 수 있습니다.
<html>
<head>
<title>Test TypeScript Ambient</title>
<script src="testStrings.js"></script>
<script src="test.js"></script>
</head>
<body>
</body>
</html>
콘솔에 표시되는 출력은 다음과 같습니다.
true HELLO WORLD hello <b>Hello World</b>
TypeScript 연혁
역사의 중요한 랜드마크를 살펴보세요 TypeScript:
- XNUMX년간의 내부 개발 끝에 Microsoft. TypeScript 0.9, 2013년 출시
- 제네릭에 대한 추가 지원 TypeScript 1.0은 빌드 2014에서 출시되었습니다.
- 2014년 XNUMX월에는 새로운 TypeScript 이전 버전보다 5배 더 빠른 컴파일러가 출시되었습니다.
- 2015년 6월 ESXNUMX 모듈, 네임스페이스 키워드, 데코레이터 지원이 지원됩니다.
- 2016년 XNUMX월에는 매핑된 유형의 키 및 조회 유형, 나머지 기능과 같은 기능이 추가되었습니다.
- 27년 2018월 XNUMX일에 조건부 유형, 교차 유형 지원이 포함된 향상된 키가 TypeScript.
왜 사용 TypeScript?
여기에는 사용의 중요한 장단점이 있습니다. TypeScript
- 크고 복잡한 프로젝트 Java스크립트는 코딩하고 유지 관리하기 어렵습니다.
- TypeScript 코드 구성에 많은 도움이 되지만 컴파일 중에 대부분의 오류를 제거합니다.
- TypeScript JS 라이브러리 및 API 문서 지원
- 선택적으로 입력되는 스크립트 언어입니다.
- TypeScript 코드를 일반 코드로 변환할 수 있습니다. Java스크립트 코드
- 더 나은 코드 구조화 및 객체 지향 프로그래밍 기술
- 더 나은 개발 시간 도구 지원을 허용합니다.
- 표준 데코레이터, async/await를 넘어 언어를 확장할 수 있습니다.
누가 사용 TypeScript?
다음은 가장 일반적인 응용 프로그램 중 일부입니다. TypeScript:
- 각도 팀은 다음을 사용합니다. TypeScript.
- NodeJS 및 NPM 설치
- TypeScript 설치
- 편집하다 TypeScript 코드 Javascript
- Nodejs를 사용하여 코드 실행
- 실행하다 Javascript 브라우저에서
- 편집하다 TypeScript 코드 Javascript EcmaScript 버전 사용
- 다음으로 작성된 코드를 쉽게 컴파일할 수 있습니다. TypeScript 에 JavaNodeJS를 사용한 스크립트.
- 그래서 함께 일하려면 TypeScript 먼저 NodeJS를 다운로드하고 설치해야 합니다.
요약
- TypeScript 의 상위 집합입니다 Java스크립트. TypeScript 클래스, 인터페이스 등을 지원하는 순수 객체지향 프로그래밍 언어입니다.
- TypeScript 출시된 모든 Ecmascript 기능을 지원하며 개발자는 코딩하는 동안 동일한 기능을 사용할 수 있습니다.
- 변수는 값을 저장하는 데 사용되며 값은 문자열, 숫자, 부울 또는 표현식일 수 있습니다.
- In TypeScript변수의 유형은 시작 시에만 정의되고, 실행 중에는 같은 유형을 유지해야 합니다. 유형을 변경하면 자바스크립트로 컴파일하는 동안 컴파일 타임 오류가 발생합니다.
- 배열 TypeScript 여러 값을 저장할 수 있는 데이터 유형입니다.
- 클래스는 ES6부터 추가된 새로운 기능입니다. Java프로토타입 기능이 있는 함수를 사용하여 코드 재사용을 위해 클래스 유형 기능을 스크립트로 작성해 보았습니다.
- TypeScript 메서드 및 속성에 대한 공개, 비공개 및 보호 액세스 한정자를 지원합니다.
- 의 핵심 기능 중 하나 TypeScript 인터페이스입니다. 인터페이스는 이를 사용하는 엔터티에 의해 구현되어야 하는 정의된 규칙 집합입니다.
- 기능은 작업을 수행하기 위해 수행되는 명령 집합입니다.
- TypeScript Enum은 관련된 값의 모음을 함께 저장하는 개체입니다.
