JavaScript에서 TypeScript로 이동하는 방법은 무엇입니까?

이 기사의 내용은 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에서는 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. 물론 나중에 더 많이 접하게 될 것입니다. "

### 튜플의 개념

JS의 배열은 많은 양의 콘텐츠를 저장할 수 있습니다. 소위 튜플은 실제로 다양한 데이터 유형의 배열입니다

• [ 1,' 1',true,false] 사실 튜플인데 이름이 다릅니다.
• ### 열거형 열거형과 const 열거형의 차이점

enum app { red, blue, pink, deeppink }

• console.log(app.red, app.blue, app.pink, app.deeppink) // 출력 0,1,2,3

enum app2 { red = 2, blue, pink, deeppink }

• 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에서 중요한 역할을 합니다.

그러므로 먼저 기본 javaScript + ES6를 배우고 나서 typeScript를 배우는 것이 훨씬 쉬울 것입니다.

이 기사는 여기까지입니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 JavaScript 튜토리얼 비디오 칼럼을 주목하세요!

위 내용은 JavaScript에서 TypeScript로 이동하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!