这是步骤 但是影响不是很清楚,感觉肯定两者要打架
但是ts编译成js可以这样
TypeScript快速、简单,最重要的是,容易学习。
TypeScript支持面向对象的编程特性,比如类、接口、继承、泛型等等。
TypeScript在编译时提供了错误检查功能。它将编译代码,如果发现任何错误,它将在运行脚本之前突出显示这些错误。
TypeScript支持所有JavaScript库,因为它是JavaScript的超集。
TypeScript通过使用继承来支持可重用性。
TypeScript使应用程序开发尽可能的快速和简单,并且TypeScript的工具支持为我们提供了自动完成、类型检查和源文档。
TypeScript支持最新的JavaScript特性,包括ECMAScript 2015。
TypeScript提供了ES6的所有优点和更高的生产力。
TypeScript支持静态类型、强类型、模块、可选参数等。
见后面
见后面
要遵循的类的语法
,这意味着实现接口的类必须实现它的所有成员
。它不能被实例化,但是可以被实现它的类对象引用。无论对象是否具有特定的结构,TypeScript编译器都使用接口进行类型检查语法:
interface interface_name {
// 字段声明
// 方法声明
}
接口只是声明方法和字段,它不能用来建造任何东西。不需要将接口转换为JavaScript来执行,它们对运行时JavaScript没有任何影响。因此,它们的唯一目的是在开发阶段提供帮助。
类是用于创建可重用组件的基本实体
。它是一组具有公共属性
的对象。类是创建对象的模板或蓝图。它是一个逻辑实体。“class”关键字用于在Typescript中声明一个类。class Student {
studCode: number;
studName: string;
constructor(code: number, name: string) {
this.studName = name;
this.studCode = code;
}
getGrade() : string {
return "A+" ;
}
}
类的特征是-
继承
封装
多态性
抽象
继承可以通过使用extend关键字来实现。我们可以通过下面的例子来理解它。
class Shape {
Area:number
constructor(area:number) {
this.Area = area
}
}
class Circle extends Shape {
display():void {
console.log("圆的面积: "+this.Area)
}
}
var obj = new Circle(320);
obj.display()
在模块中声明的变量、函数、类和接口不能在模块外部直接访问。
//可以使用export关键字创建模块,也可以在其他模块中使用import关键字。
module module_name{
class xyz{
export sum(x, y){
return x+y;
}
}
}
“内部模块”现在称做“命名空间”。
“外部模块”现在则简称为“模块”模块在其自身的作用域里执行,而不是在全局作用域里;
/**
* 新建一个db.ts 将数据库方法封装并且暴露出来
* 暴露一个获取数据的方法
*/
export function getData():any[]{
return [
{
name:'123',
ahe:20
},
{
name:'123425',
age:30
}
]
}
export function saveData():boolean{
console.log('保存数据成功!')
return true;
}
/**
* 在index.ts文件中引入
* 在这里引入我暴露的函数
*/
import {
getData} from './modules/db'
console.log(getData());
saveData();
/**
* 暴露一个获取数据的方法
*/
function getData():any[]{
return [
{
name:'123',
ahe:20
},
{
name:'123425',
age:30
}
]
}
function saveData():boolean{
console.log('保存数据成功!')
return true;
}
export {
getData, saveData}
/**
* 在index.ts文件中引入
* 在这里引入我暴露的函数
*/
import {
getData} from './modules/db'
console.log(getData());
saveData();
/**
* 使用export default 暴露数据
*/
function getData():any[]{
return [
{
name:'123',
ahe:20
},
{
name:'123425',
age:30
}
]
}
function saveData():boolean{
console.log('保存数据成功!')
return true;
}
export default getData;
/**
* export default 引入数据
*/
import getData from './modules/db'
console.log(getData());
它封装了共享某些关系的特性和对象。名称空间也称为内部模块。名称空间还可以包括接口、类、函数和变量,以支持一组相关功能。
注意: 名称空间可以在多个文件中定义,并允许将每个文件都定义在一个地方。它使代码更容易维护。
namespace <namespace_name> {
export interface I1 {
}
export class c1{
}
}
我们可以通过使用问号符号(‘?’)来使用可选参数。这意味着可以或不可以接收值的参数可以附加一个’?”“可选的。
function Demo(arg1: number, arg2? :number) {
}
因此,arg1总是必需的,而arg2是一个可选参数要放后面。
注意: 可选参数必须遵循要求的参数。如果我们想让arg1成为可选的,而不是arg2,那么我们需要改变顺序,arg1必须放在arg2之后。
function Demo(arg2: number, arg1? :number) {
}
我们知道所有的JavaScript库/框架都没有TypeScript声明文件,但是我们希望在TypeScript文件中使用它们时不会出现编译错误。为此,我们使用declare关键字。在我们希望定义可能存在于其他地方的变量的环境声明和方法中,可以使用declare关键字。
declare var myLibrary;
TypeScript运行时将把myLibrary变量赋值为任意类型。
declare var jQuery: (selector: string) => any;
jQuery('#foo');
//上例的编译结果是:
jQuery('#foo');
通常我们会把类型声明放到一个单独的文件中,这就是声明文件
// jQuery.d.ts
declare var jQuery: (string) => any;
我们约定声明文件以 .d.ts 为后缀。
然后在使用到的文件的开头,用「三斜线指令」///表示引用了声明文件
///
jQuery('#foo');
TypeScript泛型是一个提供创建可重用组件方法的工具。它能够创建可以处理多种数据类型而不是单一数据类型的组件。泛型在不影响性能或生产率的情况下提供类型安全性。泛型允许我们创建泛型类、泛型函数、泛型方法和泛型接口。
在泛型中,类型参数写在开(<)和闭(>)括号之间,这使得它是强类型集合。泛型使用一种特殊类型的类型变量,它表示类型。泛型集合只包含类似类型的对象。
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("myString");
let output2 = identity<number>( 100 );
console.log(output1);
console.log(output2);
interface X {
a: number
b: string
}
type X = {
a: number
b: string
};
类型断言的工作方式类似于其他语言中的类型转换,但是它不像其他语言一样执行C#和Java那样的类型检查或数据重组。类型转换附带运行时支持,而类型断言对运行时没有影响
。但是,类型断言仅由编译器使用,并向编译器提供有关我们希望如何分析代码的提示。
例
let empCode: any = 111;
let employeeCode = <number> code;
console.log(typeof(employeeCode)); // : number
例将 something 断言成 string
function getLength(something: string | number): number {
if ((<string>something).length) {
return (<string>something).length;
} else {
return something.toString().length;
}
}
as是TypeScript中类型断言的附加语法,引入as-语法的原因是原始语法()与JSX冲突。
例子
let empCode: any = 111;
let employeeCode = code as number;
当使用带有JSX的TypeScript时,只允许as风格的断言。
JSX只不过是带有不同扩展名的Javascript。Facebook提出了这个新的扩展,以便与JavaScript中类似xml的HTML实现区分开来。
JSX是一种可嵌入的类似xml的语法。它将被转换成有效的JavaScript。JSX随着React框架而流行起来。TypeScript支持嵌入、类型检查和直接将JSX编译成JavaScript。
要使用JSX,我们必须做两件事。
使用.tsx扩展名命名文件
启用jsx选项
rest参数用于向函数传递零个或多个值。它是通过在参数前加上三个点字符(‘…’)
来声明的。它允许函数在不使用arguments对象的情况下拥有可变数量的参数。当我们有不确定数量的参数时,这是非常有用的。
rest参数要遵循的规则:
一个函数中只允许有一个rest参数。
它必须是数组类型。
它必须是参数列表中的最后一个参数。
function sum(a: number, ...b: number[]): number {
let result = a;
for (var i = 0; i < b.length; i++) {
result += b[i];
}
console.log(result);
}
let result1 = sum(3, 5);
let result2 = sum(3, 5, 7, 9);
枚举或枚举是一种数据类型,允许我们定义一组命名常量。使用枚举可以更容易地记录意图,或者创建一组不同的案例。它是相关值的集合,可以是数值或字符串值。
例子
enum Gender {
Male,
Female
Other
}
console.log(Gender.Female); // : 1
// 我们还可以通过enum值的number值来访问它
console.log(Gender[1]); // : Female
import * as $ from “jquery”;
import {
Component } from “@angular/core”;
import Entry from “./components/Entry”;
import {
DefaultHeaders} from “../constants/http”;
匿名函数是声明时没有任何命名标识符的函数
。这些函数是在运行时动态声明的
。与标准函数一样,匿名函数可以接受输入和返回输出。匿名函数在初始创建之后通常是不可访问的。
例子
let myAdd = function(x: number, y: number): number {
return x + y;
};
console.log(myAdd())
声明合并是编译器随后合并两个或多个独立声明的过程。将具有相同名称的声明声明为单个定义。这个合并的定义具有两个原始声明的特性。
最简单也是最常见的声明合并类型是接口合并。在最基本的层次上,merge将两个声明的成员机械地连接到一个具有相同名称的接口中。
例子
interface Cloner {
clone(animal: Animal): Animal;
}
interface Cloner {
clone(animal: Sheep): Sheep;
}
interface Cloner {
clone(animal: Dog): Dog;
clone(animal: Cat): Cat;
}
这三个接口将合并为一个单独的声明
interface Cloner {
clone(animal: Dog): Dog;
clone(animal: Cat): Cat;
clone(animal: Sheep): Sheep;
clone(animal: Animal): Animal;
}
注: 在TypeScript中不是所有的合并都允许。目前,类不能与其他类或变量合并。
如果子类(子类)具有与父类中声明的相同的方法,则称为方法覆盖。换句话说,在派生类或子类中重新定义基类方法。
方法重写的规则
该方法必须具有与父类相同的名称
该方法必须具有与父类相同的参数。
必须有一个IS-A关系(继承)。
例子
class NewPrinter extends Printer {
doPrint(): any {
super.doPrint();
console.log("Called Child class.");
}
doInkJetPrint(): any {
console.log("Called doInkJetPrint().");
}
}
let printer: new () => NewPrinter;
printer.doPrint();
printer.doInkJetPrint();
ES6版本的TypeScript提供了定义匿名函数的简写语法,也就是用于函数表达式。这些箭头函数也称为Lambda函数。lambda函数是没有名称的函数,箭头函数省略了function关键字。
例子
let sum = (a: number, b: number): number => {
return a + b;
}
console.log(sum(20, 30)); //returns 50
在上面,?=>?是一个lambda操作符,(a + b)是函数的主体,(a: number, b: number)是内联参数。