TypeScript 의 설치,사용,자동 컴 파일 실현

1.TypeScript 가 무엇 입 니까?
1.TypeScript 는 마이크로소프트 가 개발 한 오픈 소스,크로스 플랫폼 의 프로 그래 밍 언어 입 니 다.그 는 자 바스 크 립 트 의 초 집합 이 며,본질 적 으로 이 언어 에 선택 할 수 있 는 정적 유형 과 클래스 기반 대상 프로 그래 밍 을 추가 하여 최신 ES5,ES6 규범 을 따른다.TypeScript 에는 ES5,ES6 코드 를 직접 쓸 수 있 습 니 다)
2.TypeScript 는 JavaScript 문법*을 확 장 했 기 때문에 기 존의 JavaScript 프로그램 에서 TypeScript 환경 에서 실 행 됩 니 다.TypeScript 는 대형 애플 리 케 이 션 개발 을 위해 설계 되 었 으 며,최종 적 으로 자바 script 코드 로 컴 파일 됩 니 다.
3.최신 Vue,React 도 TypeScript 를 통합 할 수 있 고 구 글 도 TypeScript 의 홍 보 를 지원 하고 있다.구 글 의 angular 2.x+는 바로 Typescript 문법 을 바탕 으로 하 는 것 이다.
4.TypeScript 는 미래 개발 의 기준 이자 추세 입 니 다.
TypeScript 의 설치,사용,자동 컴 파일 을 이해 하 는 튜 토리 얼
2.TypeScript 설치,컴 파일
메모:typescript 설치 전에 nodejs 를 설치 해 야 합 니 다.
npm install -g typescript
tsc helloworld.ts
1.TypeScript 설치
명령 으로 설치:npm install -g typescripttype:script 파일 접미사 이름 은ts 끝 에 있 는 브 라 우 저 는 해석 할 수 없습니다.ts 파일 의 경우 ES6 코드 를 해석 할 수 없 기 때문에 브 라 우 저가 해석 할 수 있 는 ES5 코드 로 컴 파일 해 야 합 니 다.
2.ts 파일 분석
ts 파일 을 실행 가능 한 js 파일 로 컴 파일 합 니 다.
코드 를 넣 은 폴 더 에 index.ts 파일 을 새로 만 들 고 다음 코드 를 index.ts 파일 에 복사 합 니 다.
console.log("hello world")
명령 행 cd 는 index.ts 가 속 한 폴 더 에서 tsc index.ts 를 실행 합 니 다.이 폴 더 아래 에 index.js 파일 을 만 드 는 것 을 볼 수 있 습 니 다.내용 은 index.ts 내용 과 같 습 니 다.
그러나 ts 코드 는 개발 할 때마다 명령 을 실행 하고 다시 컴 파일 해 야 합 니 다.번 거 롭 습 니 다.코드 를 쓰 면서 컴 파일 하 는 것 이 가장 좋 으 면 자동 으로 컴 파일 해 야 합 니 다.
3.자동 컴 파일
VScode,HBuilder X 개발 도구 가 자동 컴 파일 을 설정 하 는 방법 을 소개 한다.
VScode 는.ts 파일 의 설정 을 자동 으로 컴 파일 합 니 다.
1.프로젝트 루트 디 렉 터 리 에서 명령tscCinit을 실행 하고tsconfig.json프로필 을 생 성 합 니 다.이 파일 수정 을 엽 니 다:outDir 주석 을 지 웁 니 다.파일 을 컴 파일 해서 만 든 디 렉 터 리 입 니 다.
2.메뉴 퀘 스 트 클릭-퀘 스 트 실행 선택 tsc:감시-tsconfig.json 후 자동 으로 코드 생 성
파일 index.js 수정:
저장 하면 index.js 파일 이 생 성 된 것 을 볼 수 있 습 니 다.내용 은 다음 과 같 습 니 다.
HBuilder X 는.ts 파일 의 설정 을 자동 으로 컴 파일 합 니 다.
1.메뉴 표시 줄:도구 C 플러그 인 설치;
2.typescript 플러그 인 을 찾 아 설 치 를 클릭 합 니 다.
3.수 동 컴 파일:ts 파일 이름 에서 C 외부 명령/플러그 인 CtypescriptC 를 오른쪽 클릭 하여 TypeScript 를 컴 파일 하면 해당 하 는 js 파일 을 생산 할 수 있 습 니 다.
4.자동 컴 파일 설정:ts 파일 이름 에서 C 외부 명령/플러그 인 Ctype:scriptC 플러그 인 설정 을 오른쪽 단추 로 눌 러 다음 내용 을 찾 습 니 다.
//저장 할 때 자동 으로 실행 할 지 여부 입 니 다.true 로 설정 하면 저장 할 때 자동 으로 실 행 됩 니 다.
"onDidSaveExecution": false
false 값 을 true 로 변경
5.HBuilder 를 다시 시작 하고 저장 을 다시 수정 하면 해당 하 는 js 파일 을 생 성 하 는 것 입 니 다.
총결산
TypeScript 의 설치,사용,자동 컴 파일 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 TypeScript 의 설치,사용,자동 컴 파일 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!