活字の技術ポイントの概要

活字の技術ポイントの概要

1、プリミティブデータ型

ブール値ブール

let isDone: boolean = false;
//或者构造函数类型
let createdByNewBoolean: Boolean = new Boolean(1);
//或者通过下面方式返回布尔类型
let createdByBoolean: boolean = Boolean(1);

数値番号

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

文字列の文字列

let myName: string = 'Tom';
let myAge: number = 25;

// 模板字符串
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;

ヌルのボイド

JavaScriptは活字体でヌル（ボイド）の概念はないが、ボイド関数で表すことができる値を返しません

function alertName(): void {
    alert('My name is Tom');
}
//声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null
let unusable: void = undefined;

未定義の和はnull

let u: undefined = undefined;
let n: null = null;

与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量

// 这样不会报错
let num: number = undefined;
// 这样也不会报错
let u: undefined;
let num: number = u;
//但这样就报错
let u: void;
let num: number = u;
// index.ts(2,5): error TS2322: Type 'void' is not assignable to type 'number'.

任意の値

変数を一度に宣言されている場合は、タイプが指定されていない、それは価値のいずれかのタイプとして識別されます

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
//声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

ユニオンタイプ

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

関節型のプロパティとメソッド

//只能访问共有的属性或方法
function getString(something: string | number): string {
    return something.toString();
}

図2に示すように、オブジェクトタイプ

インタフェースインタフェース

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};
//必须一一对应，少属性报错

オプションの属性

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

任意のプロパティ

任意の属性の定義たら、その種類とオプションの属性の決意は、そのタイプのサブセットである必要があります

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};
let tom1: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
//tom1报错，age是任意类型的子集，不为字符串

読み取り専用属性 readonly

//第一次给对象赋值的时候
interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

配列

• 最初の

let fibonacci: number[] = [1, 1, 2, 5];

• 第二：ジェネリックアレイ

let fibonacci: Array<number> = [1, 1, 2, 5];

• 第三：配列インタフェースを表し

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
//NumberArray 表示：只要 index 的类型是 number，那么值的类型必须是 number。

• 第四：任意の

let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];

クラスArray

クラスの共通配列でのような、独自のインターフェース定義を持ちIArguments、NodeList、HTMLCollectionなど：

function sum() {
    let args: IArguments = arguments;
}

機能

関数の宣言

function sum(x: number, y: number): number {
    return x + y;
}
//执行时多余定义参数或者小于都不被允许

関数式

let mySum = function (x: number, y: number): number {
    return x + y;
};
//如果需要我们手动给 mySum 添加类型
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};
//这里的 => 不是es6的 => 

インタフェース定義された関数の形状

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

オプションのパラメータ

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

可选参数后面不允许再出现必须参数了
パラメータデフォルト

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

残りのパラメータ

//只能是最后一个参数
function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

オーバーロード

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

型アサーション

プロパティまたはメソッドのいずれかのタイプのアクセス時間のタイプを決定する必要はありません、あなたはアサーションの種類を使用することができます

function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}
//类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的

宣言ファイル

宣言

declare var jQuery: (selector: string) => any;

jQuery('#foo');

上記の例では、declare var実際に変数を定義しますが、グローバル変数の定義はなかったjQueryタイプの、唯一のコンパイル時のチェックに使用される、コンパイルの結果で削除されます

グローバル変数の宣言ファイル

• 通常、我々は別のファイル（にステートメントを宣言しますjQuery.d.tsマニフェストファイルです）、
• 声明では、ファイルに必要なd.ts接尾辞を。

サードパーティの通知ファイル

npm install @types/jquery --save-dev

書かれた宣言ファイル

• でた場合はnpm install @types/xxx --save-dev、インストール、必要ありません。

宣言する

// src/jQuery.d.ts

declare const jQuery: (selector: string) => any;
//使用
jQuery('#foo');

関数を宣言

// src/jQuery.d.ts

declare function jQuery(selector: string): any;
declare function jQuery(domReadyCallback: () => any): any;
//使用
jQuery('#foo');
jQuery(function() {
    alert('Dom Ready!');
});

クラス宣言
declare class文ができだけタイプを定義するために使用され、特定の実装を定義するために使用することができないような規定として、sayHi方法の特定の実装を説明します

// src/Animal.d.ts

declare class Animal {
    name: string;
    constructor(name: string);
    sayHi(): string;
}
//使用
// src/index.ts

let cat = new Animal('Tom');

emunの宣言
declare emun文ができる唯一のタイプを定義するために使用され、特定の値を定義するために使用することはできません

// src/Directions.d.ts

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
//使用
// src/index.ts

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

名前空間を宣言

// src/jQuery.d.ts

declare namespace jQuery {
    function ajax(url: string, settings?: any): void;
}
//使用
// src/index.ts

jQuery.ajax('/api/get_something');

インターフェイスとタイプ

// src/jQuery.d.ts

interface AjaxSettings {
    method?: 'GET' | 'POST'
    data?: any;
}
declare namespace jQuery {
    function ajax(url: string, settings?: AjaxSettings): void;
}
//使用
// src/index.ts

let settings: AjaxSettings = {
    method: 'POST',
    data: {
        name: 'foo'
    }
};
jQuery.ajax('/api/post_something', settings);

名前の競合を防ぎます

// src/jQuery.d.ts
//放到namespace下
declare namespace jQuery {
    interface AjaxSettings {
        method?: 'GET' | 'POST'
        data?: any;
    }
    function ajax(url: string, settings?: AjaxSettings): void;
}
//使用
// src/index.ts

let settings: jQuery.AjaxSettings = {
    method: 'POST',
    data: {
        name: 'foo'
    }
};
jQuery.ajax('/api/post_something', settings);

文の合併

// src/jQuery.d.ts

declare function jQuery(selector: string): any;
declare namespace jQuery {
    function ajax(url: string, settings?: any): void;
}
//使用
// src/index.ts

jQuery('#foo');
jQuery.ajax('/api/get_something');

NPMパッケージ

• 裁判官ベースpackage.jsonがあるtypesフィールドは、あるいはそこにあるindex.d.ts宣言ファイルは、
• installコマンドは、それが宣言ファイルが存在するかどうかを知るために@typesパッケージを対応インストールしよう npm install @types/foo --save-dev
• 作成しtypes、具体的文を書かれたファイル、管理するために設計されたディレクトリfooに文のファイルをtypes/foo/index.d.ts。このアプローチは、設定が必要ですtsconfig.jsonのpathsやbaseUrlフィールドを。

目录结构
/path/to/project
├── src
|  └── index.ts
├── types
|  └── foo
|     └── index.d.ts
└── tsconfig.json

tsconfig.json コンテンツ

{
    "compilerOptions": {
        "module": "commonjs",
        "baseUrl": "./",
        "paths": {
            "*": ["types/*"]
        }
    }
}

輸出輸出

// types/foo/index.d.ts

declare const name: string;
declare function getName(): string;
declare class Animal {
    constructor(name: string);
    sayHi(): string;
}
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
interface Options {
    data: any;
}

export { name, getName, Animal, Directions, Options };
//导入模块
// src/index.ts

import { name, getName, Animal, Directions, Options } from 'foo';

console.log(name);
let myName = getName();
let cat = new Animal('Tom');
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
let options: Options = {
    data: {
        name: 'foo'
    }
};

輸出デフォルトのエクスポート

// types/foo/index.d.ts

export default Directions;

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

輸出=

// 整体导出
module.exports = foo;
// 单个导出
exports.bar = bar;
//导入
// 整体导入
const foo = require('foo');
// 单个导入
const bar = require('foo').bar;

名前空間UMDライブラリとして書き出し

• いずれかを介して<script>導入されたラベル付けするだけでなく、することによりimport、インポートリポジトリと呼ばれるUMDライブラリを

// types/foo/index.d.ts

export as namespace foo;
export default foo;

declare function foo(): string;
declare namespace foo {
    const bar: number;
}

グローバル変数の直接の延長

interface String {
    prependHello(): string;
}

'foo'.prependHello();

declare globalでnpm、パッケージまたはUMDグローバル変数のライブラリを拡張

// types/foo/index.d.ts

declare global {
    interface String {
        prependHello(): string;
    }
}

export {};
//使用
// src/index.ts
//注意即使此声明文件不需要导出任何东西，仍然需要导出一个空对象，用来告诉编译器这是一个模块的声明文件，而不是一个全局变量的声明文件。

'bar'.prependHello();

ビルトインオブジェクト

ECMAScriptのは、組み込みオブジェクト

let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

ビルトインオブジェクトのDOMおよびBOM

let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});