TypeScript 문법

설치:npm install-g typescript
컴 파일:tsc greeter.ts
형식 설명:person:string
인터페이스:
     interface Person{
         firstName:string;
         lastName:string
      }  
    호출:
         person：Person
         person.firstName
클래스:
     구조 함수 의 매개 변수 에 사용public은 같은 이름 의 구성원 변 수 를 만 드 는 것 과 같 습 니 다.

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

 Gulp 를 사용 하여 TypeScript 를 구축 하고 Gulp 파이프 에 Browserify,uglify 또는 Watchify 를 추가 하 는 방법 입 니 다.바벨 리 피 를 통 해 바벨 리 피 를 사용 하 는 기능 도 포함 하고 있다.
새 디 렉 터 리 만 들 기:mkdir

mkdir proj
cd proj

초기 화:

npm init

설치 의존 항목:

npm install -g gulp-cli

Browserify
모든 모듈 을 자 바스 크 립 트 파일 로 묶 기
Browserify,tsify(Browserify 의 플러그 인)와 vinyl-source-stream 을 설치 합 니 다.

npm install --save-dev browserify tsify vinyl-source-stream

Watchify,Babel,Uglify
시작,컴 파일

npm install --save-dev watchify gulp-util

 Uglify

npm install --save-dev gulp-uglify vinyl-buffer gulp-sourcemaps

 gulpfile 파일

var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var paths = {
    pages: ['src/*.html']
};

gulp.task("copy-html", function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist"));
});

gulp.task("default", ["copy-html"], function () {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['src/main.ts'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest("dist"));
});

성명 파일 가 져 오기

npm install -s @types/lodash

모듈 에서 내 보 내기
속성 추가exports또는module.exports

module.exports.feedPets = function(pets) {
    // ...
}

export function feedPets(pets) {
    // ...
}

다시 쓰기 내 보 내기 대상

var express = require("express");
var app = express();

모든 인 자 를 쓰 지 않 고 사용arguments대상 의 함 수 를 설명 합 니 다.
**let명령 이 있 는 코드 블록 에서 만 유효 합 니 다.
연속 속성 추가

let options = {
    color: "red",
    volume: 11
};

interface Options { color: string; volume: number }

let options = {} as Options;
options.color = "red";
options.volume = 11;

any,Object,그리고{}Object유형의 물건 이 있 습 니 다.그 위 에 호출 할 수 없습니다toLowerCase()any 형식 호출,구성,속성 에 접근 하지만 대부분의 TypeScript 에서 제공 하 는 오류 검사 와 컴 파일 러 지원 을 잃 습 니 다.
엄격 한null과undefined검사
TypeScript 는null과undefined를 모든 유형 에 속 합 니 다.
연합 유형:number|null
만약 에 TypeScript 가null또는undefined이 라 고 생각 하지만 그 유형 을 더 잘 알 고 있 으 면!접 두 사 를 사용 할 수 있 습 니 다.

foo!.length; // okay - 'foo!' just has type 'string[]'

명시 적 할당 단언:형식 시스템 의 형식 인식 을 돕 고 초기 화 지연 이나 초기 화 에 사용 합 니 다.

let x!: number[];

숫자 구분자
밑줄 치기 사용()숫자 를 묶 습 니 다.
기본 유형
1.불 값:boolean

let isDone: boolean = false;

2.숫자:number
3.문자열:string,작은 따옴표"또는 작은 따옴표'를 사용 하여 문자열 을 표시 합 니 다.
모드 문자열 을 사용 하면 여러 줄 의 텍스트 와 내장 표현 식 을 정의 할 수 있 습 니 다.이 문자열 은 반 따옴표 로 둘러싸 여 있 으 며`표현 식 에 포함 되 어 있 습 니 다.
 4.배열:요소 유형 뒤에 연결${ expr }5.원 그룹 Tuple:이미 알 고 있 는 요소 의 수량 과 유형 을 나타 내 는 배열

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

크로스 오 버 요소 에 접근 하면 연합 형식 으로 대 체 됩 니 다.

x[3] = 'world'; // OK,         (string | number)  

console.log(x[5].toString()); // OK, 'string'   'number'    toString

x[6] = true; // Error,     (string | number)  

6.매 거

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

7.Any(주의)

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

Any 와 Object 의 차이[]유형의 변 수 는 임 의 값 을 부여 할 수 있 을 뿐-그 위 에 임 의 방법 을 사용 할 수 없습니다.

let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

 8.Null 과 Undefined
기본 적 인 상황 에서Object와null는 모든 유형의 하위 유형 입 니 다.즉,undefined와null를undefined유형의 변수 에 할당 할 수 있다 는 것 이다.number표 시 를 지 정 했 습 니 다.--strictNullChecks와null는 각각undefined값 만 부여 할 수 있 습 니 다.
연합 유형voidstring | null | undefined Never
영원히 존재 하지 않 는 값 의 유형
항상 이상 하거나 반환 값 이 없 는 함수 표현 식 이나 화살표 함수 표현 식 의 반환 값 형식 을 던 집 니 다.변 수 는9.유형 일 수도 있 습 니 다.실제 유형 보호 에 제약 을 받 지 않 을 때.
10.유형 단언
유형 단언 에는 두 가지 형식 이 있다.하 나 는'괄호'문법 이다.

let someValue: any = "this is a string";

let strLength: number = (someValue).length;

다른 하 나 는never문법 입 니 다.

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

11.let(주의)
가능 한 한 사용as으로 대체let새 이름 을 새 이름 으로 삽입 하 는 행 위 를 차단 이 라 고 합 니 다.
readonly VS   const
 변수 로 사용 하면  var,속성 으로 사용const.
JSX

파일 하나 주세요.  readonly확장자

활성화  .tsx옵션

TypeScript 는 세 가지 JSX 모드 를 가지 고 있 습 니 다.  jsx ，  preserve과  react react-native，
고유 요 소 는 특수 한 인터페이스 JSX.IntrinsicElements 를 사용 하여 찾 습 니 다.

declare namespace JSX {
    interface IntrinsicElements {
        foo: any
    }
}

; //   
; //   

상태 함수 구성 요소 없 음(SFC)
클래스 구성 요소