vue 에서 ts 의 예제 코드 를 어떻게 사용 합 니까?

본 고 는 vue 에서 ts 의 예시 코드 를 어떻게 사용 하 는 지 를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
주의:이 글 은 vue 를 모두 ts 로 바 꾸 는 것 이 아니 라 원래 의 프로젝트 에 ts 파일 을 삽입 할 수 있 습 니 다.현 재 는 실천 단계 일 뿐 ts 로 전환 하 는 과정 에서 의 과도 입 니 다.
ts 는 무슨 소 용이 있 습 니까?
유형 검사,원생 js 로 직접 컴 파일,새로운 문법 사탕 도입
왜 ts 를 써 요?
TypeScript 의 디자인 목적 은 JavaScript 의'통 증'을 해결 하 는 것 입 니 다.약 한 유형 과 네 임 스페이스 가 없어 모듈 화 하기 어렵 고 대형 프로그램 개발 에 적합 하지 않 습 니 다.또한 대상 을 대상 으로 하 는 프로 그래 밍 을 더욱 편리 하 게 실천 할 수 있 도록 문법 사탕 도 제공 했다.
type:script 은 우리 의 인 코딩 습관 을 제약 할 뿐만 아니 라 주석 역할 도 할 수 있 습 니 다.함수 하 나 를 본 후에 우 리 는 바로 이 함수 의 용법 을 알 수 있 습 니 다.어떤 값 을 전달 해 야 하 는 지,반환 값 이 어떤 유형 인지 한눈 에 알 수 있 고 대형 프로젝트 의 유지 성에 큰 향상 이 있 습 니 다.개발 자 들 이 돌 을 들 어 발 을 찧 을 정 도 는 아니다.
Angular:우 리 는 왜 TypeScript 를 선 택 했 습 니까?
TypeScript 에서 우수한 도구TypeScript 는 JavaScript 의 초 집합 입 니 다TypeScript 는 추상 적 이 고 선명 하 게 볼 수 있 습 니 다TypeScript 는 코드 를 쉽게 읽 고 이해 할 수 있 도록 합 니 다예,직관 적 으로 보이 지 않 는 다 는 것 을 알 고 있 습 니 다.나 로 하여 금 하나의 예 로 나의 뜻 을 설명 하 게 하 다.이 함수 jQuery.ajax()를 봅 시다.우 리 는 그것 의 서명 에서 어떤 정 보 를 얻 을 수 있 습 니까?

우리 가 유일 하 게 확정 할 수 있 는 것 은 이 함수 에 두 개의 인자 가 있다 는 것 이다.우 리 는 이런 유형 들 을 추측 할 수 있다.첫 번 째 는 문자열 일 수도 있 고,두 번 째 는 설정 대상 일 수도 있 습 니 다.그러나 이것 은 단지 추측 일 뿐,우리 가 틀 렸 을 수도 있다.우 리 는 설정 대상(그들의 이름과 유형)에 들 어가 거나 이 함수 가 무엇 을 되 돌려 주 는 지 모른다.
원본 코드 나 문 서 를 검사 하지 않 은 상태 에서 우 리 는 이 함 수 를 호출 할 수 없습니다.소스 코드 를 검사 하 는 것 은 좋 은 선택 이 아 닙 니 다.함수 와 클래스 를 가 진 목적 은 어떻게 실현 해 야 할 지 모 르 는 상황 에서 사용 하 는 것 입 니 다.다시 말 하면 우 리 는 그들의 실현 이 아니 라 그들의 인터페이스 에 의존 해 야 한다.우 리 는 문 서 를 검사 할 수 있 지만,이것 은 결코 가장 좋 은 개발 경험 이 아니다.그것 은 추가 시간 이 필요 하고,문서 가 자주 기한 이 지 났 다.
따라서 jQuery.ajax(url,settings)를 쉽게 읽 을 수 있 지만 이 함 수 를 어떻게 호출 하 는 지 진정 으로 이해 하려 면 이 함수 의 실현 이나 문 서 를 읽 어야 합 니 다.
다음은 하나의 유형 버 전 입 니 다.

그것 은 우리 에 게 더 많은 정 보 를 주 었 다.
이 함수 의 첫 번 째 매개 변 수 는 문자열 입 니 다4.567917.매개 변 수 를 설정 하 는 것 은 선택 할 수 있 습 니 다.함수 에 전달 할 수 있 는 모든 옵션 을 볼 수 있 습 니 다.이름 뿐만 아니 라 유형 도 포함 합 니 다

함 수 는 JQuery XHR 대상 을 되 돌려 줍 니 다.우 리 는 그것 의 속성 과 함 수 를 볼 수 있 습 니 다

형식 화 된 서명 은 형식 화 되 지 않 은 서명 보다 길 겠 지만:string,:JQuery Ajax Settings 와 JQuery XHR 는 혼 란 스 럽 지 않 습 니 다.그것들 은 코드 의 이해 성 을 높이 는 중요 한 문서 이다.우 리 는 문 서 를 실현 하거나 읽 을 때 까지 코드 를 더욱 깊이 이해 할 수 있다.제 개인 적 인 경험 은 유형 화 코드 를 더 빨리 읽 을 수 있 습 니 다.유형 은 더 많은 문맥 을 제공 하여 코드 를 이해 할 수 있 기 때 문 입 니 다.
Angular:우 리 는 왜 TypeScript 를 선 택 했 습 니까?
ts 잘 배 워 요?
TypeScript 의 디자인 하 이 라 이 트 는 JavaScript 의 문법 을 버 리 지 않 고 JavaScript 의 초 집합(이 공 로 는 Anders 에 기록 해 야 합 니 다)을 만 들 었 다 는 것 입 니 다.이런 합 법 적 인 JavaScript 의 문 구 는 TypeScript 에서 모두 합 법 적 입 니 다.즉,학습 비용 이 매우 낮 습 니 다.만약 에 JavaScript 에 대해 깊이 알 고 있다 면.그러면 사실은 TypeScript 를 빨리 시작 할 수 있 습 니 다.왜냐하면 디자인 은 모두 JavaScript 의 사용 습관 과 관례 를 겨냥 한 것 이기 때 문 입 니 다.
몇 가지 간단 한 예 를 보면 바로 알 수 있다.
기본 유형

let isDone: boolean = false; //    
let decLiteral: number = 6;  //   
let name: string = "bob"; //    
let list: number[] = [1, 2, 3]; //   
...
...

인터페이스

function printLabel(labelledObj: { label: string }) {  console.log(labelledObj.label);
 } let myObj = { size: 10, label: "Size 10 Object" };
 printLabel(myObj);

형식 검사 기 는 printLabel 호출 을 볼 수 있 습 니 다.printLabel 은 매개 변수 가 있 으 며,이 대상 매개 변 수 는 label 형식 이 string 이라는 속성 을 요구 합 니 다.주의해 야 할 것 은 우리 가 들 어 오 는 대상 매개 변 수 는 실제 적 으로 많은 속성 을 포함 하지만 컴 파일 러 는 필요 한 속성 이 존재 하 는 지,그리고 그 유형 이 일치 하 는 지 만 검사 합 니 다.
물론 고급 용법 도 있 습 니 다.여 기 는 너무 많은 소 개 를 하지 않 고 더 많은 것 을 알 게 되 었 습 니 다.
어떻게 vue 프로젝트 에서 ts 를 응용 합 니까?
1.우선 ts 설치

npm install --save-dev typescript npm install --save-dev ts-loader

2.루트 디 렉 터 리 에 tsconfig.json 파일 만 들 기

{
  "compilerOptions": {
   "experimentalDecorators": true,
   "emitDecoratorMetadata": true,
   "lib": ["dom","es2016"],
   "target": "es5"
  },
  "include": ["./src/**/*"] }

3.설정 에 ts-loader 추가

{
  test: /\.tsx?$/,
  loader: 'ts-loader',  exclude: /node_modules/,   options: {
   appendTsSuffixTo: [/\.vue$/],
  }
 }

4.마지막 으로.ts 접 두 사 를 추가 하면 OK 입 니 다.webpack.base.conf.js 파일 에 있 습 니 다.

이제 우리 의 원래 프로젝트 에서 ts 파일 을 사용 할 수 있 습 니 다.
어떻게 실천 합 니까?
1.어떻게 js 에서 ts 파일 을 인용 합 니까?
js 파일 에 형식 검사 가 없 기 때문에 ts 파일 을 도입 할 때 ts 파일 은 js 파일 로 바 뀌 기 때문에 js 파일 에서 ts 파일 을 참조 하 는 방법 형식 검사 체 제 는 유효 하지 않 습 니 다.즉,ts 파일 에 만 형식 검사 메커니즘 이 있 습 니 다.
그렇다면 어떻게 js 파일 에서 형식 검사 체 제 를 사용 합 니까?type:Check 의 decorator 방법 을 직접 봉 인 했 습 니 다.참고 하 시기 바 랍 니 다!용법 은 다음 과 같다.

@typeCheck('object','number') deleteItem(item,index) {}

delete Item 방법 파라미터 검출:item 은 object 형식 이 고 index 는 number 형식 입 니 다.형식 이 일치 하지 않 으 면 이상 을 던 집 니 다.
부분 코드 제공:

const _check = function (checked,checker) {
    check:      for(let i = 0; i < checked.length; i++) {       if(/(any)/ig.test(checker[i]))          continue check;       if(_isPlainObject(checked[i]) && /(object)/ig.test(checker[i]))      continue check;       if(_isRegExp(checked[i]) && /(regexp)/ig.test(checker[i]))      continue check;       if(Array.isArray(checked[i]) && /(array)/ig.test(checker[i]))      continue check;       let type = typeof checked[i];       let checkReg = new RegExp(type,'ig')       if(!checkReg.test(checker[i])) {          console.error(checked[i] + 'is not a ' + checker[i]);          return false;
   }
  }  return true;
 } /**
  * @description     
  *  1.           ，      ，             ；
  *  2.         ， string String           ；
  *  3.  any  ，            ；
  *  4.       ，  "number array",        。          ；
  */
 export function typeCheck() {     const checker = Array.prototype.slice.apply(arguments);       return function (target, funcName, descriptor) {          let oriFunc = descriptor.value;
       descriptor.value = function () {           let checked = Array.prototype.slice.apply(arguments);             let result = undefined;             if(_check(checked,checker) ){
           result = oriFunc.call(this,...arguments);
    }       return result;
   }
  }
 };

ts 의 유형 검 측 협조 type:Check 은 기본적으로 우리 의 수 요 를 만족 시 켰 다.
2.어떻게 ts 에서 js 파일 을 인용 합 니까?
js 파일 에 형식 검사 가 없 기 때문에 ts 파일 이 js 파일 을 도입 할 때 any 형식 으로 전 환 됩 니 다.물론 저 희 는 d.ts 파일 에서 형식 을 설명 할 수 있 습 니 다.
예 를 들 어 global.d.ts 파일

물론 라 이브 러 리 를 사용 해 야 할 때 도 있 지만 파일 을 설명 하지 않 으 면 ts 파일 에서 인용 할 때 undefined 가 됩 니 다.이 럴 때 우 리 는 어떻게 해 야 합 니까?
예 를 들 어 내 가 util.ts 파일 에서'query-string'을 사용 하고 싶 을 때 우 리 는 이렇게 인용한다.

import querystring from 'query-string';

하지만 query string 을 인쇄 할 때 는 undefined 입 니 다.어떻게 해결 할 까요?소 편 방법 도 참고 하 시기 바 랍 니 다.
새 module.js 파일

import querystring from 'query-string'; export const qs = querystring;

utile.ts 파일

import { qs } from './module.js';

해 결 됐 습 니 다.인쇄 qs 는 더 이상 undefined 가 아니 라 qs 라 이브 러 리 를 정상적으로 사용 할 수 있 습 니 다.
이로써 본 고 는 ts 가 vue 에서 의 설정 소개 가 끝 났 습 니 다.이 글 은 개인 적 인 생각 만 대표 하고 프로젝트 의 확장 성 을 고려 하여 모두 ts 로 교체 되 지 않 았 습 니 다.다만 vue 에서 ts 를 도입 하려 고 시도 할 뿐 개선 해 야 할 부분 이 많 습 니 다.더 좋 은 건의 와 의견 이 있 으 면 저 에 게 연락 하 십시오!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.