TypeScript
TypeScript介紹
背景介紹
- TypeScript簡稱ts
- TypeScript是ES6的實現(xiàn),ts語言是按照ES6的標準設計的
- TypeScript是微軟公司聯(lián)合谷歌公司推出的一門基于javascript的一門新語言,目前主要應用于Angular2以上版本的的開發(fā)中
什么是TypeScript?
- TypeScript是JavaScript的一個超集,對JavaScript中的變量加入的類型的支持和限制
- TypeScript可以編譯出純凈,簡潔的Javascript代碼,并且可以運行在任何瀏覽器上、Node.js環(huán)境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中
- TypeScript本身并不能直接運行在瀏覽器上,需要編譯成JavaScript進行運行(可以認為TypeScritp只存在于開發(fā)階段,生產階段依然使用的是我們熟悉的JavaScript,使用TypeScript中的好處可以提高開發(fā)效率,解決javascript弱類型帶來的一些問題)
- TypeScript的文件后綴名為.ts
運行環(huán)境
TypeScript編譯器介紹
- TypeScript編譯器基于nodejs環(huán)境,所以必須先安裝nodejs環(huán)境
TypeScript編譯器安裝
- 安裝:
npm install typescript -g
因為TypeScript編譯器為一個工具包,所以采用全局安裝
- 編譯:
tsc hello.ts- 指定編譯文件名:
tsc hello.ts --outFile bundle.js
- 指定編譯文件名:
hello.ts為文件名,因為TypeSscript本身不能直接運行,所以必須編譯成js代碼,才能進行運
TypeScript中數(shù)據(jù)類型介紹
定義布爾類型
//ts聲明布爾類型的變量
let flag:boolean=true;ts中定義數(shù)值類型
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類型:一般用預定義函數(shù)返回值類型
function print:void(params){
console.log(params);
}
//聲明一個void類型的變量沒有什么大用巫橄，因為你只能為它賦予undefined和null：
let unusable: void = undefined;
-
定義數(shù)組
- 第一種:元素類型后面加一個[]
// 定義一個組成元素為數(shù)字的數(shù)組 let arr1:number[]=[1,2,3,4] //定義一個字符數(shù)組 let arr2:string[]=['jack','robin','pony'] // 定義一個對象數(shù)組 let arr3:object[]=[ {name:'jack',age:1967}, {name:'robin',age:1968}, {name:'pony',birthday:1974} ]- 第二種:使用數(shù)組泛型,
Array<元素類型>
//定義一個組成元素為字符的數(shù)組 let arr1:Array<string>=['jack','robin','pony'] //定一個數(shù)字數(shù)組 let arr2:Array<number>=[1,2,3,4] //定義一個對象數(shù)組 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; } // 創(chuàng)建對象的時候引用該接口, 進行屬性值類型的約束 let p1:Person={ name:'zs', age:30, isMarry:false }
函數(shù)
函數(shù)的定義
- 加入了類型的約束,只要體現(xiàn)在參數(shù)和返回值上面
function sum(a:number,b:number):string{
return '求和結果為:'+(a+b);
}
類(class)
類(class)的介紹
// 類(class)相當于ES5中的構造函數(shù)
class Person{
// 聲明靜態(tài)屬性
static version:string='V1.0.0';
//聲明成員屬性; 并進行數(shù)據(jù)類型的約束
name:string;
age:number;
sex:string;
//構造函數(shù),做一些初始化的事,比如給成員屬性賦值
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('我會跳新疆舞');
}
// 靜態(tài)成員方法
static sayHi():string{
console.log('hello world!!!');
return 'hello world!!';
}
}
//創(chuàng)建實例:和js中一樣
let p1=new Person({name:'zs',age:10,sex:'男'})
類的繼承(extends)
//通過extends語法結構繼承Person類的屬性和方法
class Student extends Person{
//聲明自己獨有的成員屬性; 并進行數(shù)據(jù)類型的約束
addr:string;
constructor(props){
//必須在此處使用super()先調用父類的構造函數(shù)
super(props);
//屬性賦值
this.addr=props.addr
}
//添加自己獨有的成員方法
hobby(){
console.log('愛生活,愛代碼');
}
}
//創(chuàng)建實例對象
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監(jiān)視
vscode-ts-02.png -
第三步:
ts文件發(fā)生改變,會自動重新編譯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" ] }
