TypeScript
TypeScript介绍
背景介绍
- TypeScript简称ts
- TypeScript是ES6的实现,ts语言是按照ES6的标准设计的
- TypeScript是微软公司联合谷歌公司推出的一门基于javascript的一门新语言,目前主要应用于Angular2以上版本的的开发中
什么是TypeScript?
- TypeScript是JavaScript的一个超集,对JavaScript中的变量加入的类型的支持和限制
- TypeScript可以编译出纯净,简洁的Javascript代码,并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中
- TypeScript本身并不能直接运行在浏览器上,需要编译成JavaScript进行运行(可以认为TypeScritp只存在于开发阶段,生产阶段依然使用的是我们熟悉的JavaScript,使用TypeScript中的好处可以提高开发效率,解决javascript弱类型带来的一些问题)
- TypeScript的文件后缀名为.ts
运行环境
TypeScript编译器介绍
- TypeScript编译器基于nodejs环境,所以必须先安装nodejs环境
TypeScript编译器安装
- 安装:
npm install typescript -g
因为TypeScript编译器为一个工具包,所以采用全局安装
- 编译:
tsc hello.ts- 指定编译文件名:
tsc hello.ts --outFile bundle.js
- 指定编译文件名:
hello.ts为文件名,因为TypeSscript本身不能直接运行,所以必须编译成js代码,才能进行运
TypeScript中数据类型介绍
定义布尔类型
//ts声明布尔类型的变量
let flag:boolean=true;ts中定义数值类型
let count:number=100ts中定义字符类型
let str:string='hello world'ts中定义undefined类型
let a:undefined=undefinedts中定义null
let b:null=null
ts中定义any(任意类型:变量值可以为任意类型)
let anyData:any=''ts定义void类型:一般用预定义函数返回值类型
function print:void(params){
console.log(params);
}
//声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：
let unusable: void = undefined;
-
定义数组
- 第一种:元素类型后面加一个[]
// 定义一个组成元素为数字的数组 let arr1:number[]=[1,2,3,4] //定义一个字符数组 let arr2:string[]=['jack','robin','pony'] // 定义一个对象数组 let arr3:object[]=[ {name:'jack',age:1967}, {name:'robin',age:1968}, {name:'pony',birthday:1974} ]- 第二种:使用数组泛型,
Array<元素类型>
//定义一个组成元素为字符的数组 let arr1:Array<string>=['jack','robin','pony'] //定一个数字数组 let arr2:Array<number>=[1,2,3,4] //定义一个对象数组 let arr3:Array<object>=[ {name:'jack',age:1967}, {name:'robin',age:1968}, {name:'pony',birthday:1974} ]
-
对象的定义
- 方案1:
// 在对象名后面使用一个{}来进行对象属性值类型的约束 let obj:{name:string,age:number,isMarry:boolean}={ name:'zs', age:30, isMarry:false }- 方案2:
// 使用接口定义属性值的类型 interface Person={ name:string; age:number; isMarry:boolean; } // 创建对象的时候引用该接口, 进行属性值类型的约束 let p1:Person={ name:'zs', age:30, isMarry:false }
函数
函数的定义
- 加入了类型的约束,只要体现在参数和返回值上面
function sum(a:number,b:number):string{
return '求和结果为:'+(a+b);
}
类(class)
类(class)的介绍
// 类(class)相当于ES5中的构造函数
class Person{
// 声明静态属性
static version:string='V1.0.0';
//声明成员属性; 并进行数据类型的约束
name:string;
age:number;
sex:string;
//构造函数,做一些初始化的事,比如给成员属性赋值
constructor(props){
//成员属性赋值
this.name=props.name;
this.age=props.age;
this.sex=props.sex;
}
//声明成员方法1
sayName(){
console.log('My name is '+this.name);
}
//声明成员方法2
dance(){
console.log('我会跳新疆舞');
}
// 静态成员方法
static sayHi():string{
console.log('hello world!!!');
return 'hello world!!';
}
}
//创建实例:和js中一样
let p1=new Person({name:'zs',age:10,sex:'男'})
类的继承(extends)
//通过extends语法结构继承Person类的属性和方法
class Student extends Person{
//声明自己独有的成员属性; 并进行数据类型的约束
addr:string;
constructor(props){
//必须在此处使用super()先调用父类的构造函数
super(props);
//属性赋值
this.addr=props.addr
}
//添加自己独有的成员方法
hobby(){
console.log('爱生活,爱代码');
}
}
//创建实例对象
let s1=new Student({name:'ls',age:10,sex:'女',addr:'中国西安'});
构建工具集成
webpack
安装
ts-loader:npm install ts-loader --save-dev-
配置webpack
-
webpack.config.js基本配置
module.exports = { entry: "./src/index.tsx", output: { filename: "bundle.js" }, resolve: { // Add '.ts' and '.tsx' as a resolvable extension. extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"] }, module: { loaders: [ // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader' { test: /\.tsx?$/, loader: "ts-loader" } ] } }; -
vscode配置ts自动转换成js
-
准备工作
- 全局安装
typescript工具包:npm i typescript -g
- 全局安装
-
第一步: 运行
tsc --init命令;生成tsconfig.json项目配置文件
vscode-ts-01.png -
第二步: 终端=>运行任务=>tsc监视
vscode-ts-02.png -
第三步:
ts文件发生改变,会自动重新编译js, 并保存到tsconfig.json中指定的目录
vscode-ts-03.png
-
tsconfig.json配置文件示例{ "compilerOptions": { "target":"es5", //指定最终编译的js版本 "module": "system", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "outFile": "../../built/local/tsc.js", "outDir": "./js", //指定编译输出目录 "sourceMap": true }, // 用户指定需要进行编译的目录 "include": [ "src/**/*" ], // 用于指定排除项, 此处配置的目录文件, 将不会被编译 "exclude": [ "node_modules", "**/*.spec.ts" ], // 指定需要编译的ts文件列表 files:[ "a.ts", "b.ts" ] }
