TS初级总结(一)

一、简介

TypeScript具有类型系统,且是JavaScript的超集。它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。Ts主要用于解决那些问题:

  • js木有编译类型检查,写代码的时候木有错误,在运行的时候就发现错误一大堆,ts具有类型系统,可以解决此类问题
  • js代码非常灵活,同一团队中,大神和小菜鸟写的代码各不相同,维护起来十分不便,统一采用ts开发js,使用相同的规则进行编码,能够比较好的解决此类问题
  • js发展十分迅速,存在各种各样的版本和各种环境,在不同的环境中特性存在差异,为了满足各种环境,需要编写各异的代码,js通过制定编译环境可以将同一代码编译成对应环境的js脚本
  • js在编译大型项目缺乏良好的模块及文件的组织,需要支持有模块及命名空间的概念,遵循CommonJs的规范,ts支持模块及命名空间,同时支持。

二、环境

1、安装

npm install -g typescript

2、VSC

  • tsconfig.json:指定ts编译的一些参数信息
    • “compilerOptions”:
      Target:编译目标平台(es3,es5,e6,es2015)
      Module:组织代码方式(commonjs,amd)
      sourceMap:编译文件对应关系
      outDir:输出目录
    • “include”: 包含的编辑目录
    • “exclude”:不包含的编译目录
{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "lib": ["es2015", "es2016", "dom"]
    },
    "exclude": [
        "node_modules",
        "dist"
    ],
    "include": [
        "./src/**/*"
    ],
}

类型

  • 布尔 (简单的true/false值)
let isTrue:boolean = true;
  • 数字
let age:number = 29
let max:number = Number.MAX_VALUE
  • 字符串
var word = "hello world"
  • 数组(在类型后面直接使用[])
var numbers: number[] = [1, 2, 3];

使用Array泛型

var nums: Array<number> = [1, 2, 3];
  • 枚举
    enum 类型是对js类型的一个补充,使用枚举类型可以为一组数值选择一个友好的名称
enum Color { red, green, blue }
let sRed: Color: Color.red;

声明

var

最常用的关键字,用来声明对象,例如

var str:string = 'nihao'
function func(str:string):string{
  var test:string = 'nihao';
  return test;
}

var关键字存在一些弊端:

  • 变量可以重复声明
  • 变量声明可以滞后
  • 没有块级作用域
function func(a){
	if(a) {
		var x1 = 2;
		var x2 = 3;
		b = x1+2;
	}
	return b;
};
console.log(func(true))
console.log(func(false))

let

为了解决 var 关键字的以上弊端,提出了 let关键字,基本用法和var关键字一样,如下:

function func(str:string):string{
	let test:string = 'hello';
	let test:string = 'hello1';
	if(str.length){
		let a1 = 1;
	}
	console.log(a1);
	return test;
	let a1 = 2;
}

const

定义的变量不可以修改

const demo_1:string = 'hello world';
demo_1 = 'x'; //err

函数

完整函数类型

完整函数类型包含两部分:参数类型和返回值类型

let sayHello:(word:string)=>string = function(word:string):string{
	return "say" + word;
}

上诉写法过于复杂,ts提供类型推断,可以简化写法,如下所示

let sayHello = function(word:string):string{
	return "say" + word;
}

参数类型

  • 默认参数
    默认参数可以指定参数默认值,函数调用时可以不用传递默认参数
let sayHello = function(word:string = 'hello world'):string{
	return "say" + word;
}
sayHello();
  • 可选参数
    可选参数在参数后用 ? 来表示,可选参数只能在必须参数后
let sayHello = function(word?:string):string{
	return "say" + word;
}
sayHello();
  • 剩余参数
    剩余参数表示不知道传递多个类型相同的参数可以使用,剩余参数只能用类型数组来表示,并在参数前加上省略号,剩余参数只能是最后一个参数
let sayHello = function(...words:string[]):string{
	return "say" + words.join(' ');
}
sayHello();

Lambda和this

看如下所示的代码,调用out函数的this 对象被指定为全局变量导致调用失败

var obj = {
	name: 'chuck',
	say: function(){
		return function(){
			console.log(this.name);
		}
	}
}
var out = obj.say();
out();

在ts中,函数表达式变为使用lambda表达式( () => {} ),这样就会在函数创建的时候就指定’this’值

var obj = {
	name: 'chuck',
	say: function(word:string){
		return (x:number) => {
			console.log(this.name + world);
			console.log(x)
		}
	}
}
var out = obj.say('1');
out(2);

编辑后的结果如下:

var obj = {
	name: 'chuck',
	say: function(word){
		var _this = this;
		return function(x){
			console.log(_this.name + world);
			console.log(x);
		}
	}
}
var out = obj.say('1');
out(2);

结构

ts中类的基本结构如图所示,在ts里,每个成员默认为public的,也存在 private 及 protected,private只能在自身类可用,protected可在继承类中使用

class Dog{
	constructor(name:string="大黄"){
		this.name = name;
	}
	name:string;
	private age:number = 3;
	protected sex:string = 'rose';
	say(word:string):string{
		return this.name + 'say' + word
	}
}
let a:Dog = new Dog();
a.say('dog');

抽象类

抽象类使用abstract关键字来定义抽象类和在抽象类内部定义抽象方法,抽象类只能用派生类实例化,抽象方法必须在派生类中实现

abstract class animal{
	abstract say(word:string):string;
	move(steps:number):void{
		console.log(steps);
	}
}

继承

abstract class animal{
	abstract say(word:string):string;
	move(steps:number):void{
		console.log(steps);
	}
}
class Dog extends animal{
	constructor(name:string='大黄'){
		super();
		this.name = name;
	}
	name:string;
	private age:number = 3;
	protected sex:string = 'rose';
	say(word:string):string{
		return this.name + 'say' + word;
	};
	move():void{
		conosle.log('void');
	}
}
let a:Dog = new Dog();
a.say('dog');
a.move();

面向对象最基本的模式就是对类型进行继承扩展,如上所示,Dog继承了抽象类animal,实现了抽象方法say,并重写了父类中的move方法

静态成员

类的静态成员,这些属性存在于类本身上面而不是类的实例上

class Utils{
	static source:number = 0;
	static log(logs:string):void{
		console.log(logs);
	}
}
let s = Utils.source;
Utils.log('error');

接口

结构

与C#或Java里接口的基本作用一样,ts也能够用它来明确的强制一个类去符合某种契约。如下所示,Squre类实现Shape接口。

interface Shape{
	eara():number;
}
class Squre implements Shape{
	width:number;
	constructor(width:number){
		this.width = width;
	}
	eara():number{
		return this.width*this.width;
	}
}
var sq.Shape = new Squre(5);
sq.eara();

继承

接口可以继承多个接口,使用extends关键字来继承多个接口,如下所示

interface Shape{
	eara():number;
}
interface Type{
	type:string;
}
interface Circle extends Shape,Type{
	
}

泛型

ts像C#和Java,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据,ts中使用(<>)括起泛型类型

abstract class AbstractContext {
	BizType: string;
}
class PoContext extends AbstractContext {
	BizType: string = 'Po';
}
interface OperationInterface<T extends AbstractContext> {
	getContext(): T;
}
class AbstractOperation<T extends AbstractContext> {
	Context: T;
	OpCode: string;
	constructor(opCode: string, Context: T) {
		this.OpCode = OpCode;
		this.Context = Context;
	}
}
class PoOperation extends AbstractOperation<PoContext> implements OperationInterface<PoContext> {
	constructor(OpCode: string, Context: PoContext) {
		super(OpCode, Context);
	}
	getContext(): PoContext {
		return: this.Context;
	}
}

模块

为了开发大型的代码程序,模块化是必须经历的一个过程。ts组织代码的方式主要包括内部使用的命名空间和外部使用的模块。

命名空间

当代码变得复杂的时候,要一种手段来组织代码,以便于在记录它们类型的同时还不用担心与其它对象产生命名冲突,这时候我们使用命名空间。命名空间内的代码只在命名空间内才是可见的,对外部不可见。

namespace framework{
	class Utils {
		static isNullOrEmpty(input:string):boolean{
			if(!input) {
				return true;
			}
			return false;
		}
	}
}
console.log(framework.Utils.isNullOrEmpty('')); //err

外部模块

模块在其自身的作用域里执行,在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import形式之一。

模块是自声明的;两个模块之间的关系是通过在文件级别上使用imports和exports建立的。

任何声明(比如变量,函数,类,类型别名或接口)都能够通过添加export关键字来导出。

export let num:number = 2;
export interface demo {

}
class Utils {
	static isNullOrEmpty(input:string):boolean {
		if (!input) {
			return true;
		}
		return false;
	}
}
export { Utils }

可以使用以下import形式之一来导入其他模块中的导出内容。

  • 导入一个模块中的某个导出内容
import { Utils } from './test';
import { Utils as DemoUtils } from './test';
  • 将这个模块导入到一个变量,并通过它来访问模块的导出部分
import * as demo from './test';

CommonJS和AMD都有一个exports对象的概念,它包含了一个模块的所有导出内容。ts模块支持export =语法,以配合传统的CommonJS和AMD的工作流。

export =语法定义一个模块的导出对象。它可以是类,接口,命名空间,函数或枚举。

若要导入一个使用了export =的模块时,必须使用TypeScript提供的特定语法import let = require(“module”)。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值