TypeScript 구덩이 밟 기 기록
6052 단어 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))
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Cypress에서 Stripe Elements의 자동 테스트 수행을 사용하여 E2E 테스트를 작성할 때 약간의 고려가 필요했기 때문에 비망으로 남겨 둡니다 ✍️ 을 사용하여 이런 코드에서 카드 번호 입력 요소를 만들었습니다. 본래라면, 카드 정보의 입력이 다른 도메인(Stripe...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.