타자기의 완전한 소개 지침
#1'유형'이라는 단어는'유형을 사용하라'는 뜻이다.
TypeScript의 가장 큰 기능 중 하나는 컴파일할 때 유형 검사를 통해 변수가 사용하는 유형이 일치하지 않도록 하는 것입니다. 예, TypeScript에서 실제 유형을 사용할 수 있습니다. 다음은 변수를 사용하는 방법에 대한 예입니다.
//합법적
isReady:boolean=false;
10진법을 설정합니다. 숫자 = 20;
name:string="Dev.to";
숫자: 숫자 []=[1,2,3];
//불법적
isReady:boolean=10;
decimal:number="숫자가 아니에요."
name:string=true 시키기;
숫자:number[]= "하나의 숫자 그룹이 아닙니다."
#1.1 변수에 여러 가지 유형을 사용할 수 있습니까?
물론, 변수 중 하나에 대해 임의의 유형을 사용하면 다음과 같은 다양한 값 유형을 할당할 수 있습니다.
알 수 없음: 임의 = 30;
알 수 없음 = "이 변수는 무엇입니까?"
변수에 지정할 수 있는 유형을 제한하려면 다음과 같이 파이핑 작업자를 사용할 수 있습니다.
배수: 부울 | 수 = 10;
multiple=true;//여전히 유효하다
#1.2 변수 유형을 지정하지 않으려면 어떻게 합니까?
문제 없어요!TypeScript는 암시적 및 명시적 유형을 지원합니다.첫 번째 경우, 지금까지 보았던 것처럼 변수의 유형을 정확하게 지정합니다. 두 번째 경우, 변수의 값을 처음 초기화할 때, 유형은 자동으로 변수에 분배됩니다. 이런 메커니즘을 유형 추정이라고 더욱 잘 부릅니다.
양현식:number=10;//"number"유형을 명시적으로 사용
은식 설정 = 10;//숫자 유형의 추정
유형은 함수 반환 값과 같은 다른 유용한 상황에서 어떻게 도움이 되는지 추정합니다.
//"number"를 이 함수의 반환 형식으로 설정하는 추리
함수 추가(a: 번호, b: 번호)
a+b 되돌리기;
}
#1.3 변수 유형을 확인할 수 있습니까?
정확한 타입을 썼는지 확인하고 싶으세요?정확한 반?다음과 같이 instanceof 연산자를 사용하여 사용할 수 있습니다.
가져오기 {Cake}from'/케이크모델
케이크 = 새 케이크('계란','우유').
(케이크 인스턴스)
위문하다.일지("우리 여기 케이크 한 조각!"
}
이것은 사용자가 정의한 유형에 특히 유용하며 다른 대상에서 속성을 계승할 때도 사용할 수 있다.
#1.4 변수 유형을 변환할 수 있습니까?
이러한 유형의 작업을 일반적으로 강제 변환이라고 하는데 TypeScript의 특수한 상황에서 실행할 수 있다. 이런 상황에서 우리는 특정한 유형의 처리 변수를 사용해야 할 수도 있다.any 유형의 변수를 정의한 경우 문자열이 아니기 때문에 문자열에 액세스할 수 없는 일반적인 문자열 함수를 사용하려고 합니다. TypeScript에서 다음과 같은 방법으로 변수를 처리하라고 알릴 수 있습니다.
알 수 없음: 모든 것;
unknown="안녕하세요".
위문하다.log ("길이는:"이고 (
#2. 패턴 사용
TypeScript에서 배열을 사용할 때 위에서 언급한 모든 내용을 조정할 수 있습니다.
//합법적
숫자: 숫자 []=[1,2,3];
letstrings:string[]="안녕하세요", "안녕하세요", "세계"];
부울 값: 부울 []=[진짜, 가짜, 진짜];
모든 것을 일으키기: 모든 []=['Hello World', 10];
//불법적
숫자를 양보: 숫자 []=[1,진,3];
let strings:string[]="안녕하세요", 1,"세계"];
부울 값: 부울 []=[true, 100,true];
//기타 가능성은
numbersAndBooleans=(number | boolean)=[true, 100];//를 설정합니다.파이프 조작원 사용하기
행렬=number[][]=[[10,20]];
#2.1 원조 사용
이것은 새로운 개념입니다. 모듈 형식은 그룹을 표현할 수 있습니다. 고정된 수량의 원소의 유형은 알고 있지만 같을 필요는 없습니다.값을 부울 값 쌍과 숫자 쌍으로 표시하려면 다음 사항을 고려하십시오.
//모듈 사용
x:[부울, 숫자]를 설정합니다.
x=[맞아, 10];//초기화
x=[10, "안녕하세요"];//잘못된 초기화
#2.2 나는 정말 한 가지 일을 놓쳤다. 매거!
내가 이전에 자바를 사용하여 코드를 작성했을 때, 나는 자바스크립트의 이 위대한 보충을 정말 그리워했다. 매거는 기본적으로 하나의 명칭 상수였다.세 가지 유형의 열거가 있다.
열거 방향
Up=1,
내려놓다
왼쪽,
정확히,
}
플레이어 이동(방향 위로);
#3. 물건은?
대상은 Typescript의 또 다른 중요한 부분입니다. 예를 들어 그것들을 더욱 상세하게 분석해 보겠습니다.
//Javascript 정의
사용자 = {
이름: "피에로",
성: "보렐리"
}
//유형 스크립트의 정의는 동일
사용자 = {
이름: "피에로",
성: "보렐리"
}
//현재 이름과 성을 제외하고는
{name:string, 성:string}
객체의 두 속성은 문자열 유형으로 추정되므로 다른 유형의 값을 지정하려는 모든 시도가 유효하지 않습니다.
사용자name=35;//무효이었어
#3.1 객체 유형
객체는 부울, 문자열, 숫자, 기호, null, 정의되지 않은 기본 유형 범주에 속하지 않으며 다음 구문을 따릅니다.
사용자: {name:string, 성:string};
#4 가지 기능
함수에 대해 말하자면 Typescript는 유형을 사용할 때 유형을 사용할 가능성을 도입했다. 예를 들어 우리가 함수를 사용하고자 하는 첫 번째 부분은 함수 매개 변수이다.
//함수 매개 변수의 유형 정의
기능 테스트(이름:string, 성:string) {
이름 + "+ 성으로 돌아가기;
}
전명 = 테스트(피에로·보렐리);//합법적이었어
fullName=test(10,"borrelli");//비합법적
다른 종류를 지정해야 할 수도 있는 곳은 함수에서 값을 되돌릴 때이다.위의 함수에서 되돌아오는 형식은string 형식으로 자동으로 추정됩니다.다음 방법을 사용하여 함수의 반환 유형을 명시적으로 정의하는 방법을 살펴보겠습니다.
//함수의 반환 유형 정의
함수 테스트(이름:string, 성:string):string {
이름 + "+ 성으로 돌아가기;
}
//불법적
함수 테스트(이름:string, 성:string):string {
이름을 반환합니다.길이예상치 못한 숫자를 되돌려줍니다.
}
#5. 객체 섹션 지향
ECMAScript 6이 출시된 이래로 Javascript 프로그래머는 이미 대상을 대상으로 하는 방법을 사용하여 그들의 프로그램을 구축할 수 있다.Typescript 도 이러한 방법을 지원하므로 몇 가지 예를 들어 이 방법을 분석해 보겠습니다.
학급 포인트
x: 숫자;
y: 숫자;
구조 함수(x: 번호, y: 번호) {
이거.x=x;//여기서 "this"는 현재 개체를 나타냅니다.
이거.y=y;
}
getPoints(){
x:+이것으로 돌아갑니다.x+"y:"이거요.y;
}
}
점 = 신점(10,20);
대부분의 C#이나 자바 등 언어를 사용한 사람들에게는 익숙해 보인다. 우리는 Point라는 클래스가 있는데, 두 개의 구성원 x와 y가 있어 자유롭게 접근할 수 있다. (잠시 후에 상세하게 소개할 것이다.) getPoints () 라는 클래스도 호출했다.그런 다음 new 키워드를 사용하여 Point 유형 객체의 인스턴스를 생성할 수 있습니다.
액세스 수정자 사용
이것은 완전히 다른 주제이기 때문에 너무 많은 상세한 소개를 하지 마십시오. 그러나 Typescript에서는 클래스의 변수에 대한 접근 수식자를 정의할 수 있습니다. 아래와 같습니다.
학급 포인트
개인x:번호;
개인 y:숫자;
구조 함수(x: 번호, y: 번호) {
이거.x=x;//여기서 "this"는 현재 개체를 나타냅니다.
이거.y=y;
}
getPoints(){
x:+이것으로 돌아갑니다.x+"y:"이거요.y;
}
}
기본적으로 모든 대상 프로그래밍 언어와 마찬가지로, 우리는 누가 우리의 클래스 데이터에 접근할 수 있는지 확인하기 위해 접근 수식자를 사용할 수 있다.기본적으로,public를 구성원의 기본 수식자로 설정합니다. 구성원이 클래스 (private) 이외에 접근할 수 없기를 원하고, 구성원이 클래스나 파생 클래스 내부에서만 접근할 수 있기를 원하면,private와protected를 각각 사용합니다.
상속권
앞에서 말한 바와 같이 Typescript는 상속을 포함한 가장 자주 사용하는 대상방향 모드를 지원합니다.따라서 Typescript를 사용하면 클래스를 정의한 다음 하위 클래스를 정의할 수 있습니다. 이 하위 클래스는 수퍼 클래스의 기본 방법과 구성원을 상속합니다.
종류동물
이동(단계: 번호 =0)
위문하다.로그 (`Animal moved${steps}m.`);
}
}
고양이과 동물
야옹()
위문하다.일지("야옹야옹");
}
}
const cat=new cat();
고양이야옹야옹 ();
고양이이동(1000);
이음매
또 다른 흔히 볼 수 있는 대상을 대상으로 하는 기술로 인터페이스를 만들어야 할 수도 있습니다.Typescript에서는 유형 검사에 주목합니다. 인터페이스를 사용하여 이 유형의 이름을 붙일 수 있습니다.따라서 기본적으로 이들을 사용할 때 우리는 관련 방법과 구성원을 만들어서 특정한 대상을 설명할 것이다.
인터페이스 상자
너비:숫자,
키: 숫자
}
결론
이 글의 배후 생각은 단지 당신이 Typescript를 어떻게 사용하는지, 우리가 흔히 볼 수 있는 문제를 어떻게 해결하는지, 그리고 Javascript를 사용하는 다른 방법을 이해할 수 있도록 하는 것일 뿐이다.그것이 너에게 유용한 새로운 시각을 줄 수 있기를 바란다.
TypeScript에 대한 자세한 내용은 here 및 here 자료를 참조하십시오.
감사
피에로 보레리.
Reference
이 문제에 관하여(타자기의 완전한 소개 지침), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/borrellidev/a-complete-introduction-guide-to-typescript-4a66텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
