TypeScript 구덩이 밟 기 기록

우선 자동 컴 파일 을 하 겠 습 니 다.
ts 파일 을 직접 실행 하려 면 tsc 명령 을 사용 해 야 합 니 다.  tsc xxx.ts
자동 으로 컴 파일 하려 면:
첫걸음  tsc -- init 생 성 tsconfig. json 출력 디 렉 터 리 "outDir": ". / js" (여기 서 js 폴 더 를 만들어 야 합 니 다)
제2 부 vs 에서 작업, tsconfig. json 감시 선택
자주 저 지 르 는 오류 에 대하 여.
TypeScript 2.7 은 엄격 한 제어 표 시 를 도입 했다. strictProperty Initialization
하면, 만약, 만약...  strictPropertyInitialization 우 리 는 모든 인 스 턴 스 의 속성 이 초기 값 을 확보 하고 구조 함수 나 속성 이 정 의 될 때 값 을 부여 할 수 있 도록 해 야 합 니 다.

class StrictClass {
    foo: number;
    bar = 'hello';
    baz: boolean; 
    // error,Property 'baz' has no initializer and is not definitely assigned in the constructor
    constructor() {
        this.foo = 42;
    }
}

두 가지 상황 에서 우 리 는 이 error 의 발생 을 피 할 수 없다.

이 속성 은 원래  undefined  。이 경우 유형 undefined 추가

속성 이 간접 적 으로 초기 화 되 었 습 니 다 (예 를 들 어 구조 함수 에서 하나의 방법 을 호출 하여 속성의 값 을 변경 하 였 습 니 다).이런 상황 에서 저희 가 사용 할 수 있어 요. 명시 적 할당 단언 (수식 부호 !) 유형 시스템 의 유형 인식 을 돕 습 니 다. 나중에 구체 적 으로 소개 하 겠 습 니 다. 먼저 코드 에서 어떻게 사용 하 는 지 보 겠 습 니 다.

class StrictClass {
    // ...
    baz!: boolean;
    // ^
    //      !  
    //             
}

명시 적 할당 단언 (Definite Assignment Assertions)
비록 우 리 는 유형 시스템 을 더욱 표 현 력 있 게 하려 고 시도 하지만, 때때로 사용자 가 TypeScript 보다 유형 을 더 잘 알 고 있다 는 것 을 알 고 있 습 니 다.
위 에서 언급 한 클래스 속성 예 와 차이 가 많 지 않 습 니 다. 우 리 는 하나의 값 을 부여 하기 전에 사용 할 수 없습니다. 그러나 만약 에 우리 가 이미 할당 되 었 다 고 확정 했다 면 이 때 유형 시스템 은 우리 사람의 개입 이 필요 합 니 다.

let x: number;
initialize();
console.log(x + x);
//          ~   ~
// Error! Variable 'x' is used before being assigned.

function initialize() {
    x = 10;
}

덧붙이다 ! 수식: let x!: number, 이 문 제 를 복구 할 수 있 습 니 다.
우리 도 표현 식 에서 사용 할 수 있 습 니 다!  variable as string 와  variable  :

let x: number;
initialize();
console.log(x! + x!); //ok

function initialize() {
    x = 10;
}

 
 
다음은 작은 코드 기록 입 니 다.
상속
부모 클래스 와 하위 클래스 에 constructor 함 수 를 써 야 합 니 다. 예 를 들 어 / / 부모 클래스 Parent {    name:string;     age:number;     constructor(name:string,age:number){         this.name = name;         this.age = age;     } } // 하위 클래스 Web extends Tparent {     constructor(name:string){     this.name = name;              }  }이 안에 아버지 급 에 있 는 모든 변 수 를 넣 어야 만 이 등급 을 받 을 수 있 습 니 다. 그렇지 않 으 면 잘못 보고 할 수 있 습 니 다.
식별 자
 static 은 정적 내용 입 니 다.
접근 수정자
 public 는 공유 내용 입 니 다. 기본 예: Public name:string;  private 는 개인 콘 텐 츠 로 개인 속성 을 계승 하고 접근 할 수 없습니다.  예: private name:string;
 
 
인터페이스
/ / 키워드 interface 를 통 해 인터페이스 laberValue {를 설명 합 니 다.    laber: string;} / / 인터페이스 형식 function printLaber (laberValue: laberValue) {    console.log(laberValue.laber) } var myobjs = {laber:'hellos rouse'} printLaber(myobjs)
/ / 인터페이스의 배열 형식
interface StringArray{     //[index: number] 아래 표 시 됩 니 다.    [index:number]:string; } var myArray:StringArray; myArray=["fuck","any","www",""]; console.log(myArray[1]);
 
/ / 인터페이스의 class 형식, 클래스 에 대한 제약
interface ClockInterface{     currentTime:string;     // void: 값 을 되 돌 릴 필요 가 없습니다.    setTime(d:string):void; } class Clock implements ClockInterface{     currentTime:string;     setTime(){         console.log('tag '+this.currentTime);     }     constructor(currentTime:string){         this.currentTime=currentTime;     } }
var dsq=new Clock('jacks'); dsq.setTime();
 
/ / 인터페이스의 계승 과 혼합 유형
interface Shape{     color:string; }
interface PenStroke{     penWidth:number; }
interface Square extends Shape,PenStroke{     sideLength:number; }
요약: 하나의 인 터 페 이 스 는 여러 개의 서로 다른 인 터 페 이 스 를 계승 할 수 있 습 니 다. 클래스 클 라 스 가 인 터 페 이 스 를 계승 한 후에 인터페이스 에 포 함 된 속성 을 다시 써 야 합 니 다.
 
범 형
 
/ / 범 형, 이 T 는 / / function Hellopes (num: number): number {/ / 와 같은 다른 내용 을 임의로 지정 할 수 있 습 니 다.    return num; // }
function Hellopes(num:T):T {         return num;     } // 사용 할 때 필요 한 유형 을 설정 합 니 다 var output = Hellopes ("hello, jack"), console. log (output)
/ / 범 형의 기본 운용
function Hellopll(number:T[]):T[]{     console.log(number.length)     return number; } var listers:Array=Hellopll(["1","2","3"]); for(var i=0;i     console.log(listers[i]); }
 
Module
설명: 주로 클래스, 인 터 페 이 스 를 하나의 module 에 정의 하여 유지 와 작성 이 편리 하고 오류 가 발생 하지 않도록 합 니 다.
/ / module, 각 클래스 와 인 터 페 이 스 는 export module Validition {를 추가 해 야 합 니 다.    export interface StringValidator{     isAccept(s:string):boolean; }     var letterRegxp = /^[A-Za-z]+$/;     var numberRegxp = /^[0-9]+$/;     export class letters implements StringValidator{         // 복사 함수        isAccept(s:string):boolean{             return letterRegxp.test(s);         }     }     export class ZipCodeVailed implements StringValidator{     isAccept(s:string):boolean{         return s.length === 5 && numberRegxp.test(s);     } } }
/ / 일반적인 유형
function Heoo(arg:T):T{     return arg;} / 화살표 함수 의미 (arg: K) 의 함수 반환 값 유형 은 K var my hello: (arg: K) = > K = Heoo; / 그 자체 의 자체 유형 검사 이기 때문에 상소 코드 는 var my hello = Heoo; console. log (my hello ("heoooo") 로 간략하게 쓸 수 있 습 니 다.
/ / 호출 시 형식 정의
interface Hellp{     (arg:T):T; } function myHellp(arg:T):T{     return arg;} var MH: Hellp = my Hellp; / MH 뒤에 형식 을 연결 할 수도 있 고 받 지 않 을 수도 있 습 니 다. 직접 MH ("이것 은 함수 입 니 다") console. log (MH ("호출 할 때 정의 하 는 범 형 입 니 다") 를 씁 니 다.
/ / 인터페이스 정의 시 형식 정의
interface Hellw{     (arg:T):T; } function eee(arg:T):T{     return arg;} var qeew: Hellw = eee; console. log (qeew);
/ / 범용 클래스 (class)
class HelloNumber{     zeros!:T;     add!:(x:T,Y:T) => T; }
/ / 클래스 의 종 류 는 실례 화 할 때 < > 로 지정 합 니 다.
var myHelloNumber = new HelloNumber(); myHelloNumber.zeros = 10; myHelloNumber.add =(x,y)=>x+y console.log(myHelloNumber.zeros) console.log(myHelloNumber.add(1,5))