JavaScript에서 TypeScript로 이동하는 방법은 무엇입니까?
- 不言앞으로
- 2019-03-21 10:57:162549검색
이 기사의 내용은 JavaScript에서 TypeScript로 이동하는 방법에 관한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
typeScript를 배우려면 먼저 기본 JavaScript에 매우 능숙해야 한다고 생각합니다. 그다음에는 ES5+ES6+ES7을 마스터해야 합니다(7개 이상은 아는 것이 가장 좋습니다). 새로운 기술을 익히면 앞으로는 사용할 수 없을 것입니다. typeScript =type+ javaScript, ES5/6/7+javaScript를 기반으로 유형을 추가합니다!
TS는 인터페이스나 값 유형 또는 개별 매개변수가 약간 일치하지 않는 한 JS에 비해 정말 매우 엄격합니다. 숫자가 올바르지 않거나 값이 변경되어 유형이 원래 값과 일치하지 않으면 오류가 보고됩니다. npm을 사용하여 typeScript를 전역으로 설치한 다음 tsc *.ts를 사용하여 TS 파일을 컴파일하는 것이 좋습니다.
'typeScript의 새로운 핵심 개념:'let app:string=2; 이 코드는 값 2가 다음과 같기 때문에 오류를 보고합니다. 숫자이고 규정 앱은 문자열 유형이므로 TS
에 오류가 보고됩니다. 새로운 값 유형:any: 모든 유형일 수 있음vold: 함수 move()와 같은 빈 반환 유형: vold{} 이는 이 함수를 나타냅니다. 반환 값이 없습니다. 이
함수는 모든 유형을 반환할 수 있지만, 그렇지 않으면 반환해야 합니다. TS는 오류를 보고합니다.새로운 개념: 유형 추론
let app = 'hello' ; app=1 ; this TS는 이를 let app:string = 'hello'로 간주하고- app 값을 다시 변경하기 때문에 오류를 보고합니다. 그렇지 않으면. 이는 유형 추론입니다.
Union type
let app: string | number = 'hello' ; app = 1; 유형 중 하나와 일치하는 한- 문자열 또는 숫자가 될 수 있습니다. 물론 더 쓸 수 있습니다.
인터페이스(프론트엔드 프로그래머가 이해하기 어려운 점)
javaScript도 객체지향 언어인데 ES5에서는 프로토타입 기반으로 구현하고, ES6에서는 클래스 클래스를 사용하므로- 이 용어는 객체 지향이지만 TS의 실제 객체 지향은 JAVA와 같은 언어처럼 인터페이스와 클래스를 통해 완전한 객체 지향 프로그래밍을 구현합니다.
- 이 여성을 설명하기 위해 인터페이스를 사용합니다(TS에서는 let app: 인터페이스 이름 사용).
- 마지막으로 이를 얻기 위해 몇 가지 방법을 사용합니다. 여성의 연락처 정보 (구현하려면 TS의 클래스 클래스에 있는 메소드를 사용하십시오)
- 예:
class ask{
name:string;
tel ? :number ; //这里为什么加问号，因为你不一定能拿到她的号码，如果拿不到，那么便可以不传参数，
但是如果不加? ，你又没那么号码，那么你没有参数传进来，TS就会报错
age:number ;
constructor(name,age,tel){
this.name=name;
this.age=age;
this.tel=tel
}
}
interface check {
name : string;
age:number;
tel ? :number;
}
let woman :check = new ask ('rose',20,1888888888);//假设你拿到美女所有资料 传入构造函数
이 방법으로 console.log(woman)를 인쇄하여 위 코드가 어떻게 보이는지 확인할 수 있습니다. 오류가 보고되지 않았습니다.
- 위 코드가 tsc 명령을 통해 JS 파일로 컴파일된 후
-
var ask = /* @class / (function () { function ask(name, age, tel) { this.name = name; this.age = age; this.tel = tel; } return ask; }()); let woman = new ask('rose', 20, 1888888888); console.log(woman)"여기서 주목해야 할 점은 컴파일 후 const 열거형 열거형, 인터페이스 등 많은 TS 코드가 JS 파일에 나타나지 않는다는 점입니다. , etc. 물론 나중에 더 많이 접하게 될 것입니다. "
- [ 1,' 1',true,false] 사실 튜플인데 이름이 다릅니다.
- ### 열거형 열거형과 const 열거형의 차이점
- console.log(app.red, app.blue, app.pink, app.deeppink) // 출력 0,1,2,3
- console.log(app2.red, app2.blue, app2.pink, app2.deeppink) / / 출력 2,3,4,5
- 열거의 기본 첫 번째 값은 0입니다. 사용자 정의가 시스템 기본값과 충돌하는 경우 TS는 이를 인식하지 않으며 오류를 보고하지 않습니다. . , 하지만 결국 누가 문제를 찾고 있습니까?
- ### 상수 열거도 있습니다
const enum Directions {
Up,
Down,
Left,
Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
// 结果是 0 1 2 3
* 계산된 멤버가 포함된 경우 컴파일 단계에서 오류가 보고됩니다.
* const enum Color {Red, Green, Blue = "blue".length}* 상수 열거형과 일반 열거형의 차이점은 컴파일 단계에서 삭제되며 계산된 멤버를 포함할 수 없다는 것입니다. 시도해 보면 알게 될 것입니다
* 클래스는 한 번에 하나의 인터페이스만 상속할 수 있지만 동시에 여러 인터페이스에 대응할 수 있습니다
* 여러 인터페이스를 달성하려는 경우 클래스 상속, 그런 다음 하위 클래스를 사용하여 계속 다른 클래스 상속 및 루프
interface check {
name: string;
age: number;
hobby: Array<number>
fuck: number[] //这两种写法是一样的
}
class exp implements check {
name: string
age: number
hobby:Array<number>
fuck: number[]
constructor(name, age, hobby, fuck) {
this.name = name;
this.age = age;
this.hobby = hobby;
this.fuck = fuck;
}
}
let app = new exp('hello', 18, [1, 2, 3], [2, 3, 4])
---------TS 컴파일 후
var exp = /* @class / (function () {
function exp(name, age, hobby, fuck) {
this.name = name;
this.age = age;
this.hobby = hobby;
this.fuck = fuck;
}
return exp;
}());
var app = new exp('hello', 18, [1, 2, 3], [2, 3, 4]);
typeScript를 얻습니다. 아마도 가장 어려운 것은 우아한 객체 지향 프로그래밍을 이해하는 방법일 것입니다. 인터페이스는 단지 설명을 위한 것입니다.
실제로 구현하려면 클래스 클래스가 필요합니다. ES6은 typeScript에서 중요한 역할을 합니다.
이 기사는 여기까지입니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 JavaScript 튜토리얼 비디오 칼럼을 주목하세요!
위 내용은 JavaScript에서 TypeScript로 이동하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!